Reputation: 1545
Ex:
<div data-component="tab" data-value="first_tab">
</div>
How can I get data-component="tab" and data-value="first_tab" together in cypress command? Like I want to access select box inside first_tab and I want to be more context specific and write a more readable code: What I have tried is below (which is syntactically wrong)
cy.get('[data-component="tab" data-value="first_tab"] [data-component="select_box"]').click()
Upvotes: 9
Views: 15784
Reputation: 1086
Cypress follows the jQuery convention so this should work:
cy.get('[data-component="tab"][data-value="first_tab"]').click()
Reference: https://api.jquery.com/multiple-attribute-selector/
Upvotes: 18
Reputation: 18624
cy.get('[data-component="tab"][data-value="first_tab"]').within(() =>
cy.get('[data-component="select_box"]').click()
})
Cypress Docs: https://docs.cypress.io/api/commands/get.html#Get-in-within
Upvotes: 1