-1

Example:

<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"]
  • 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 at 6:35
1

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"]')
| improve this answer | |
0

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

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

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

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

then you can further chain some assertion:

cy.get('[data-component="tab"][data-value="first_tab"]')
  .find('[data-component="select_box"]')
  .should('be.visible')
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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