Use Webdriver.IO to select element by class

Question

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.

Answer 1

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');

Answer 2

[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 recommend 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.