Software Quality Assurance & Testing Stack Exchange is a question and answer site for software quality control experts, automation engineers, and software testers. It only takes a minute to sign up.
Sign up to join this community
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"]
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:
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')
'[data-component="tab"][data-value="first_tab"]'.