<div data-component="tab" data-value="first_tab">

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"]
  • 1
    Same way you'd combine any two CSS selectors to refer one one element, concatenate them: '[data-component="tab"][data-value="first_tab"]'.
    – jonrsharpe
    May 13, 2020 at 6:35

2 Answers 2


in CSS, attributes for the same element should be provided without space so,

[data-component="tab" data-value="first_tab"] is incorrect

correct one is [data-component="tab"][data-value="first_tab"]

Now to find next element you can give space or > , space means any child and > means immediate child .

so the final locator is [data-component="tab"][data-value="first_tab"] [data-component="select_box"]

And the command looks like :

cy.get('[data-component="tab"][data-value="first_tab"] [data-component="select_box"]')

You can concatenate them as jonrsharpe said in the comment section:


if you then need to access another element inside this one, you can use .find() command:


then you can further chain some assertion:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.