codeceptJS - how to click specific element from list

Question

With protractor it's possible by doing element.all(by.css("li")).get(0)

How to do it with codecept?

I tried with no success:

I.click('.item').get(1);
I.click('.item:nth-child(2)');

Answer 1

Using XPath to click the element is the best option you have. However, you might have various instances of the element's tag. So your XPath has to be absolute

For example:

I.click("//li[contains(@class,'next')]");

or

I.click("//div[contains(@class,'next')]/li[1]");

Note: @class can be changed to whatever identifier you want to use.

Answer 2

You could just use XPath to click the first li element.

I.click('//li[1]');

Answer 3

It's also possible to grab all the elements that match a certain pattern and then specify the one you want by its index. In my case I needed to click all the checkboxes on a page. Here I grabbed all the elements that had the same xpath pattern (using I.grabNumberOfVisibleElements("//fieldset/label") and went through their indexes using a for loop.

  module.exports = {
  firstCheckbox: { xpath: '//li[1]//fieldset/label'},
 
  async clickOnClassAssociations() {

    await I.waitForElement(this.firstCheckbox, WAIT_FOR_TIMEOUT)

    const totalCb = await I.grabNumberOfVisibleElements("//fieldset/label")

    for (let i=1; i<=totalCb; i++) {
      await I.waitForElement(`//li[${i}]//fieldset/label`, WAIT_FOR_TIMEOUT);
      await I.click( `//li[${i}]//fieldset/label`);
    }
  },
};