Question

我使用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。

Answer 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运行它。或document.querySelectorAll并查看是否有任何内容。

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

Answer 2

我可以看到，你应该按类使用选择器，而不是按属性。

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

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

使用Webdriver.IO按类选择元素

2 个答案: