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', 'jdoe@email.com')
        .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)

I was trying to be more specific with className (.v-btn__content) and also contain the text "Create" — code-8, May 09 '22 at 13:52
From that error you got, it seems it failed on .assert.textContains('.v-btn__content','Create'), not on the click. Maybe try to remove that assertion. Also, you can try to target that button itself, but as I can see, it has already clicked on it. On the step where you did .setValue('#input-13', '**') — Chilaxathor, May 14 '22 at 18:09

score 1 · Answer 1 · answered May 09 '22 at 17:51

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.

E2E Testing- click on specific button

1 Answers1