How to chain cy.get in cypress

Question

I'm trying to get to #1 element then get to #2 element to click on #3 element.

but I'm having a trouble with getting the correct CSS selector in Cypress.

How to write a test script for this?

I've tried cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').contains('Delete yield').click() but doesn't work.

Is there a way to get #1 first, then #2 to reach #3? this is not a real code but something like this.

cy.get('.yield-event__date-and-text--container').contains('10kg')
cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').click()
cy.get('.item.fr-dropdown__option').contains('Delete yield').click()

Thanks a lot in advance

Answer 1

You can write something like this using find():

cy.get('.yield-event__date-and-text--container').contains('10kg')
cy.get('.yield-event__date-and-text--container').find('i[class*="fr-dropdown__icon"]').click({force: true})
cy.get('.yield-event__date-and-text--container').find('Delete yield').click({force: true})

Answer 2

As @RosenMihaylov says, you might find it easier to use the Cypress "relationship" commands which follow the HTML structure, rather than CSS selectors.

Also I think you would need two clicks - one to open the menu and the second to invoke the delete action.

Step 1 - looks like the text devEnv_admin identifies the card you want

cy.contains('div', 'devEnv_admin')

which gives you the 7th div down.

Step 2 - the dropdown you need to click is 2nd sibling to the above

.siblings('div.note-event__dropdown')  // list of siblings matching the selector
.eq(0)                                 // take the first (and only)

which gives you the parent of the dropdown button.

Step 3 - but it looks like the child of that which has class button might have the click event handler (you might have to experiment here because elements with event handlers are sometimes difficult to find)

.children('div.button')   // list of children matching the selector
.eq(0)                    // take the first (and only)
.click();

which should open the menu, but it might take some milliseconds to appear

Step 4 - wait for the div with the text you need

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

In summary,

cy.contains('div', 'devEnv_admin')
  .siblings('div.note-event__dropdown')  // list of siblings matching the selector
  .eq(0)                                 // take the first (and only)
  .children('div.button')                // list of children matching the selector
  .eq(0)                                 // take the first (and only)
  .click();

cy.contains('span', 'Delete yield')   // this form of .contains() waits for the text
  .click();

There are other paths through the DOM elements and other selectors you can use, like .next() and .parent().

A lot depends on where the event handlers are attached, which is easiest to find out by looking at the source code.

---

Alternatively, using within()

cy.contains('.yield-event__date-and-text--container', 'devEnv_admin')  // pick the card
  .within(() => {  // restricts commands below to this card
    cy.get('div.button.dropdown').click();
    cy.contains('span', 'Delete yield').click();
  });