CodeceptJs - 获取元素列表并检查元素的属性答案

【问题标题】：CodeceptJs - Getting List of elements and checking attributes of elementsCodeceptJs - 获取元素列表并检查元素的属性
【发布时间】：2020-02-06 00:43:03
【问题描述】：

我是一名 QA Automation，在 C#+Nunit+Webdriver 方面有 7 年以上的经验。现在我不得不切换到 CodeceptJS 并且找不到如何使用这个框架做一些常见的动作。请帮我解决下一个问题：

如何获取元素列表并获取此列表中特定元素的某些属性。在 C# 中会是这样的：
```
var list = driver.FindElements(By.Xpath("*//xpath"));
```

如何检查元素是否在customsteps或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();
 }
}

【问题讨论】：

标签： codeceptjs

【解决方案1】：

如果您想获得并使用该列表做更多事情，您可以使用：

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

如果 xPath 匹配多个元素，则方法返回一个数组。文档参考是here。

如果你只需要验证属性是否存在，你可以使用：

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

如文档中here 所述。

【讨论】：

【解决方案2】：

找到答案：

1) 添加 CustomHelper 并在其中添加函数

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

这将返回元素列表稍后，如果您需要对特定项目做某事，可以再添加一个辅助函数，例如

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

通过这种方式，您可以使用 WebdriverIo API 中的任何方法 2）您可以添加异步功能，其中类似

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

【讨论】：

【解决方案3】：

我使用量角器制作了一个自定义助手，因为 codeceptjs 中的 getattrib 方法也对我不起作用，您可以编辑“textcontent”值以获得不同的属性。

  /**
   * 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");
  }

【讨论】：