CodeceptJs - Getting List of elements and checking attributes of elements

Question

I'm QA Automation with 7+ years of experiance in C#+Nunit+Webdriver. Now I have to switch to CodeceptJS and can't find how to do some common actions using this framework. Please, help me with next questions:

1. How can I get list of elements and get some attribute of specific element in this list. In C# it will be something like this:

   var list = driver.FindElements(By.Xpath("*//xpath"));
   

2. How to check if element has some attribute in customsteps or pageobject?

   module.exports = {
    MyElemThatIsNotAlwaysVisible_Likesubmenu: { id: "submenu" },
    MyElementThatIsAlwaysVisible_Likemuenu : {id: "menu"}
   
    function_click_onelement_that_notalwaysvisible () 
    {
      //here I want to check 
      if(MyElementThatIsAlwaysVisible.getattribute("class").contains("not-active"))
      {
         MyElementThatIsAlwaysVisible_Likemuenu.click();
         wait.until (MyElemThatIsNotAlwaysVisible_Likesubmenu.Displayed)
      }
      MyElemThatIsNotAlwaysVisible_Likesubmenu.Click();
    }
   }
   

Answer 1

1. If you want to get and do something more with the list, you can use:

await I.grabAttributeFrom('//img', 'src');

If xPath matches more than one element, method returns an array. Documentation reference is here.

---

2. If you need to validate only that the attribute exists, you can use:

   I.seeAttributesOnElements('//form', { method: "post"});

as stated in here in documentation.

Answer 2

Found answers:

1) Add CustomHelper and inside it add functions

async GetListOfElements(locator) {
    let browser = this.helpers.WebDriver;
    let res = browser._locateFields(locator);
    return res;
  };

this will return list of elements Later if you need to do something with specific item can add one more helper function like

  async Clicker(elem) {
    let browser = this.helpers.WebDriver.browser;
    await browser.elementClick(elem.elementId);
  };

In this way you can use any methods from WebdriverIo API 2) You can add async function and in it something like

  var attr = await I.grabAttributeFrom(this.MyElement, "class");
    if (attr.toString().includes("checked"))
      myaction();

Answer 3

I made a custom helper using protractor that does this since the getattrib method in codeceptjs never worked for me either, you can edit the "textcontent" value to get different attributes.

  /**
   * Function to return the text content of all elements matching with the locator in an array
   * @param xpath object
   */
  async getElementsText(locator) {
    const driver = this.helpers.Protractor.browser;
    await driver.waitForAngular();
    // await console.log("Getting text for: " + locator.xpath);
    return driver.element.all(by.xpath(locator.xpath)).getAttribute("textContent");
  }