A J
A J

Reputation: 1545

How to add two data attribute check in cypress?

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

Answers (2)

ebanster
ebanster

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

Alapan Das
Alapan Das

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

Related Questions