Locating multiple elements by partially equal id/class values

Question

I'm struggling with a thing that may be obvious for some of you. Let's imagine I have an array of HTML elements like:

<tr> id=item-1 ... </tr>
<tr> id=item-2 ... </tr>
<tr> id=item-3 ... </tr> etc.

What I want to do is to write a TestCafe selector that will find the entire table of elements by id "item-". Can anyone answer how to do this?

A simple

NAME_OF_SELECTOR = Selector('tr').withAttribute('id', 'item-');

doesn't work that way; it needs the entire name id.

Answer 1

You are already close to what you want to achieve. The withAttribute method also accepts regular expressions, which you can use like this:

const myTableRowsSelector = Selector('tr').withAttribute('id', /^item-/);

As an alternative, you could also do the following:

const myTableRowsSelector = Selector("tr[id^='item-']");

The second example is inspired by this post.