通过 class 使用 Webdriver.IO 到 select 元素

Question

我使用来自 Webdriver.io 的浏览器，并希望 select 一个带有 class 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">.

之类的东西

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

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

提示：当您尝试找出要在端到端测试中使用的正确选择器时，只要它不是 Protractor 的 Angular 特定选择器之一，您就可以运行它通过 document.querySelector 或 document.querySelectorAll 看看它是否得到任何东西。

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

Answer 2

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

因此，在这种情况下，请尝试以下操作：

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

通过 class 使用 Webdriver.IO 到 select 元素

Use Webdriver.IO to select element by class

javascript

html

selenium-webdriver

webdriver-io