WebdriverIO：elementIdHtml 的等价物是什么？

Question

如何使用浏览器对象从elementId 获取元素的内部 HTML？

WebdriverIO API 中有类似elementIdHtml 的东西吗？

v4 的 getHTML 链接返回 403 Forbidden。

---

我的目标是我需要从 elementId 中获取所有 a._3cnp 中的所有文本

示例 html

<div class="container">
    <a class="_3cnp">first link</a>
    <a class="_3cnp">second link</a>
    <a class="_3cnp">third link</a>
</div>

需要将其转换为 ["first link", "second link", ..]

我已经有了.container elementId

这就是我所做的

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
    console.log('->', buttonElem)
    console.log('-->', buttonElem.getHTML)
    buttonElem.getHTML().then(x => console.log('---->', x))
    return buttonElem.value
})

elementIdElements 的结果是 按钮元素

{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
  status: 0,
  value:
   [ { ELEMENT: '0.6603119466268468-24',
       'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
  selector: 'a._3cnp' }

但是buttonElem.getHTML 是undefined

我在 botium-webdriverio-connector 中独立使用 webdriverio

Answer 1

LE：

相应地更改您的代码：

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
    // buttonElem's 'value' will contain a list of all the matching elements
    // thus, you have to call getHTML() on each item from 'value'

    // the following will return the HTML of the first matching element
    console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
    return buttonElem.value[0].getHTML();
})

更好的方法是在它们之间循环并打印 HTML：

.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {

    console.log('\nPrint element HTML: ' + buttonElem.getHTML());
    return buttonElem.getHTML();
})

---

.getHTML() 属性的作用域是所有 ELEMENT 对象。为了更具有指导意义，我将考虑在无序列表 (<ul>) 的一系列列表项 (<li>) 中找到的操作 HTML 代码 的任务)。

因此您可以执行以下操作：

• browser.getHTML('ul.ourList li.ourListItems')（这将返回所有 <li> 的 HTML 代码的列表）
• browser.element('ul.ourList li.ourListItems').getHTML()（这将返回第一个 <li>'s HTML 代码）
• $('ul.ourList li.ourListItems').getHTML()（这相当于上面的命令，只是一个宽松的版本）

---

如果您需要遍历所有 <li>s 并获取 HTML，请执行以下操作：

let locator = 'ul.ourList li.ourListItems';

browser.elements(locator).value.forEach(elem => {
  let elemHTML = elem.getHTML();

  console.log( JSON.stringify(elemHTML) );
  elemHTML.doSomethingWithIt();
})

其中，elem 将是一个具有以下格式的对象：

{ ELEMENT: '0.285350058261731-1',
  'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
  selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
  value: { ELEMENT: '0.285350058261731-1' },
  index: 0 
}