使用 Webdriver.IO 按类选择元素答案

【问题标题】：Use Webdriver.IO to select element by class使用 Webdriver.IO 按类选择元素
【发布时间】：2017-09-06 15:10:12
【问题描述】：

我使用来自 Webdriver.io 的浏览器，并想在这个星座中选择一个具有 js-add-board 类的元素（我想点击一个按钮）：

<div id="content">
    <div class="wrapper">
        <div class="news-sidebar sidebar">
            ..
        </div>
        <ul class="board-list clearfix">
            <li class="js-add-board">
                <a class="board-list-item label" href="#">Add a new board</a>
            </li>
        </ul>
    </div>
</div>

这是来自样式：

.board-list .js-add-board {
    text-align: center;
}

我尝试的是：

browser.element('[js-add-board]');

但它返回了undefined。

【问题讨论】：

标签： javascript html selenium-webdriver webdriver-io

【解决方案1】：

[js-add-board] 是一个属性选择器。它将匹配 <a js-add-board="something"> 或 <div js-add-board="1"> 之类的内容。

要匹配一个类，请使用 CSS 类选择器：.js-add-board

如果您必须使用属性选择器，您可以使用[class~="js-add-board"]，但我不建议这样做。

提示：当您试图找出在端到端测试中使用的正确选择器时，只要它不是 Protractor 的特定于 Angular 的选择器之一，您就可以通过 document.querySelector 或 @ 运行它987654328@，看看有什么收获。

有关属性选择器的更多信息，请参阅this CSS Tricks post。

【讨论】：

【解决方案2】：

据我所知，您应该按类使用选择器，而不是按属性。

所以，在这种情况下，请尝试以下方法：

browser.element('.js-add-board');

【讨论】：

元素不是一个有效的函数