Search code examples
htmltestingautomated-testse2e-testingtestcafe

test cafe, select button where child span has text

I'm using material-ui buttons which put its' labels inside a span element. The button I am trying to click is next to other buttons, the only thing that makes them unique is the text in the child span element.

enter image description here

I have tried clicking the button like this:

await t.click(Selector('button').withText('button 2'));

But it is not working, I assume it it because withText is looking for text as the button child and not an additional span element as wrapper for the text?

Anyway, any suggestions on how I can click this button?

Solution

  • You have mo options.

    You can use find():

    await t.click(Selector('button').find('span').withExactText('button 2'));

    or you for example use child():

    await t.click(Selector('button').child('span').withExactText('button 2'));

    This documentation page and its subchapters might help you further: https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/