How to add two data attribute check in cypress?

Question

Ex:

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()

user_6527143 · Answer

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/

user_4571271 · Answer

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

How to add two data attribute check in cypress?

2 Answers