E2E Testing- click on specific button

Question

I have a button, it looks like this in HTML form

<span class="v-btn__content">Create</span>

My E2E Test, I am trying to click that Create button

module.exports = {
    'My first test case'(browser) {
        browser

        .url('http://localhost:8080/#/')

        .waitForElementVisible('#app')
        .waitForElementVisible('#input-10')
        .waitForElementVisible('#input-13')
        .setValue('#input-10', '[email protected]')
        .setValue('#input-13', '**')
        .click('.v-btn__content')
        .assert.textContains('.v-toolbar__title','App')
        .waitForElementVisible('.v-data-footer__pagination')
        .waitForElementVisible('.v-btn__content')
        .assert.textContains('.v-btn__content','Create')
        .click('.v-btn__content','Create')  ❌
        
    }
}

I got

✖ Testing if element <.v-btn__content> contains text 'Create' in 5000ms - expected "contains text 'Create'" but got: "does not contain 'Create'" (5219ms)

Answer 1

I cannot confirm 100% that my guess is correct, but from my understanding, textContains would select a DOM element that you provide the selector for, and compare with the text you provided. Though, in your example, your selector is a classname, which can be attributed to several elements, especially a generic one such as v-btn__content.

A potential fix could be to give your HTML button an id such as: <span id="create-content" class="v-btn__content">Create</span>, and then replace the textContains selector by:

...
.assert.textContains('#create-content', 'Create')
...

Now again, if this is the error, then I am surprised that you did not get an error with .assert.textContains('.v-toolbar__title','App'), but this could be because textContains is smart enough to shorthand to a single element if only one exists in your page, which most likely is the case.

If this does not resolve it, happy to help further if you could provide a minimal codesandbox.