Search code examples
reactjscss-selectorstestcafe

Testcafe Selector functions, how do they work?

When u have a selector and some functions chained

Selector('[data-testid="somevalue"]')
      .nth(0)
      .find('div')
      .withAttribute('class', 'someclass');

Does this work as a single query on dom or does it query for first one ( Selector ) and go through dom programatically there on?

I want understand this because I have a Selector that fails and I need to verify that with dom.

code

Selector

Selector('[data-testid="table-row"]')
      .nth(0)
      .find('div')
      .withAttribute('class', 'checkbox-ui');

error

Solution

  • As the checkbox-ui class seems to be one among other classes (and it is not the first class in the list regarding the order) within the div-container that you're trying to select, you could follow the following approach to select the div properly:

    Selector('[data-testid="table-row"]')
      .nth(0)
      .find('div[class*="checkbox-ui"]')

    The withAttribute method goes for a strict match when Strings are used. Hence, your current Selector is not able to match the div.

    Regarding the * CSS-Selector, you can take a further look at this.