javascriptjavacss-selectorscypressui-automation

How to chain cy.get in cypress

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.

enter image description here

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

Solution

  • 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})