迭代页面上的元素，并使用nightwatchjs/selenium单击它们

Question

如何遍历页面上具有特定类名的元素并单击它们？我试过使用

browser.elements('css selector', element.articleItemTitle,function (links) {
        for (var i=0; i < links.value.length; i++) {
            browser.waitForElementVisible('body');
            browser.pause(1000);
            browser.elementIdClick(links.value[i].ELEMENT);
            browser.waitForElementVisible('.article-detail');
            browser.expect.element(element.postHeroTitle).to.be.present;
            browser.back();
        }
});

但它并不总是在每次遍历循环时单击指定的元素。

我得到错误：陈旧元素引用：元素未附加到页面文档

用守夜人




Answer 1

我也遇到过类似的问题并能够解决它。我在这里发布了示例代码。这只是我们可以做的一个示例。请根据您的情况调整相同的。

Answer 2

您不能在迭代来自另一个页面的元素列表（链接）时更改DOM（例如通过加载新页面）。一旦您更改页面，您就有使列表无效的风险，在这种情况下，下次循环时您会收到该错误。

不要将元素仅仅看作属性的集合，而应将其看作是真实浏览器中真实数据页面的“代理”对象。它们只在当前页面上有用，不能被玩弄。

至于解决方案，在您的情况下，您从链接元素中使用的唯一东西似乎是Id，它只是一个无害的字符串。因此，与其遍历匹配的元素，不如先构建所有Id字符串的列表，然后遍历它。这应该是您唯一需要的更改。

更新：

示例代码（未经测试，也不是优雅的JavaScript，但很可能工作，并演示了概念）：

var ids = {};

// build the list of matching Ids on current page
browser.elements('css selector', element.articleItemTitle,function (links) {
    ids.push(links.value[i].ELEMENT);
});

// Try each one in turn - note *no references* held to existing page
for (var i = 0; i < ids.length; i++) {
    browser.waitForElementVisible('body');
    browser.pause(1000);
    browser.elementIdClick(ids[i]);
    browser.waitForElementVisible('.article-detail');
    browser.expect.element(element.postHeroTitle).to.be.present;
    browser.back();
}