使用 Webdriver.IO 按类选择元素

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查看它是否有任何结果。

有关属性选择器的更多信息，请参阅此 CSS Tricks 帖子。