How to select particular from list item in Cypress

Question

<ul class="ItemList">
  <li class="Item" data-id="2"><label><input type="checkbox" value="on"><span>bb</span><button type="button">X</button></label></li>
  <li class="Item" data-id="3"><label><input type="checkbox" value="on"><span>aaa</span><button type="button">X</button></label></li>
</ul>

from the above list I need to select second item and select the check box.

What have you tried and what exactly is the problem with it? — jonrsharpe
– jonrsharpe, Commented Aug 11, 2019 at 17:45
I am new to Cypress. Want to click on X button based on the <span>aaa</span> element or based on row number — Kishore
– Kishore, Commented Aug 12, 2019 at 15:20
That doesn't answer my question. Did you read the docs? Try anything? — jonrsharpe
– jonrsharpe, Commented Aug 12, 2019 at 15:20

Mr. J. · Accepted Answer · 2019-08-13 06:06:06Z

2

You can do this:

cy.contains('aaa')
  .parent()
  .find('input')
  .check()

This will search for the text of the second checkbox, then gets the parent and searches for an 'input' within that parent. And check it after all.

If you want to click the 'X' per element it's just as easy:

cy.contains('aaa')
  .parent()
  .find('button')
  .click()

edited Aug 13, 2019 at 6:06

answered Aug 12, 2019 at 6:10

Mr. J.

3,7451 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kishore Over a year ago

Please can you help me to click on X button based on the <span>aaa</span> element or any row

Mr. J. Over a year ago

I expanded the answer with the button click. Please accept the answer (by hitting the ^ beside it) if an answer pleases you.

Collectives™ on Stack Overflow

How to select particular from list item in Cypress

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related