javascript - Use Webdriver.IO to select element by class - Stack Overflow

admin管理员组

文章数量:1323323

I use the browser from Webdriver.io and want to select an element with the class js-add-board (which is a button i would like to click) inside this constellation:

<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>

This is from the styles:

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

What I tried was:

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

but it returned undefined.

I use the browser from Webdriver.io and want to select an element with the class js-add-board (which is a button i would like to click) inside this constellation:

<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>

This is from the styles:

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

What I tried was:

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

but it returned undefined.

• javascript
• html
• selenium-webdriver
• webdriver-io

Share Follow edited Sep 7, 2017 at 8:34 Gobliins asked Sep 6, 2017 at 15:10 GobliinsGobliins 4,0261818 gold badges7171 silver badges130130 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

[js-add-board] is an attribute selector. It would match things like <a js-add-board="something"> or <div js-add-board="1">.

To match a class, use the CSS class selector: .js-add-board

If you must use an attribute selector, you could do [class~="js-add-board"], but I don't remend that.

Tip: when you're trying to figure out the correct selector to use in your end-to-end tests, as long as it's not one of Protractor's Angular-specific selectors you can just run it through document.querySelector or document.querySelectorAll and see if it gets anything.

For more on attribute selectors, see this CSS Tricks post.

As far I can see, you should use selector by class, not by attribute.

So, in this case, please try the following:

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

本文标签： javascriptUse WebdriverIO to select element by classStack Overflow