Reputation: 7945
How do I select one item of a list and apply the conditions to only that item?
I have this html:
<ion-list v-if="mangelzuordnungs.length > 0">
<ion-item>
<h2>Item A</h2>
<button
data-cy="photo-add-button"
shape="round"
>
<span data-cy="photo-add-button-text"> Hinzufügen </span>
</button>
</ion-item>
<ion-item>
<h2>Item B</h2>
</ion-item>
</ion-list>
And this test:
it('Ensures when Mangelzustand does contains photos, the "Hinzufügen" Button Text does not exist', () => {
cy.get("ion-item")
.eq(1)
.get("[data-cy=photo-add-button")
.get("[data-cy=photo-add-button-text")
.should("not.contain", "Hinzufügen");
});
I would expect that the test succeeds because it fails arguing that photo-add-button-text
exists and highlights the element of the first list item.
What am I missing?
Upvotes: 1
Views: 867
Reputation:
If you use .get()
after .eq(1)
you are searching from cy.root()
, which is the the whole DOM.
Try .find()
instead.
cy.get("ion-item")
.eq(1)
.find("[data-cy=photo-add-button")
.find("[data-cy=photo-add-button-text")
.should("not.contain", "Hinzufügen");
Upvotes: 3
Reputation: 18565
Your second item in the list doesn't contain [data-cy="photo-add-button-text]
and [data-cy=photo-add-button-text]
, hence when you are trying to use get()
, the test is failing. Instead you can directly assert:
cy.get("ion-item").eq(1).should("not.contain", "Hinzufügen")
Upvotes: 1