Playwright: Creating and interacting with a list of elements on the page

Question

This might be a simple question, however I would like to know if there is a simple way of declaring a list of elements which later on you will be working on for example looping through it and looking for an element with a locator provided. I did some reading on https://playwright.dev/ and also some of examples on the internet. Below I am placing my example.

 <tbody class="ant-table-tbody">
    <tr data-row-key="1" class="ant-table-row-0">...</tr>
    <tr data-row-key="1" class="ant-table-row-0">...</tr>
    <tr data-row-key="1" class="ant-table-row-0">...</tr>
    <tr data-row-key="1" class="ant-table-row-0">...</tr>

Now I would like to create a list of elements, once the list is created I would like to narrow it down to just rows which contain "My group" text value and after that I would like to narrow it again to only rows which have "My group" text value but are in "Phase one" text values. All those values are text ones which are displayed in the row. Finally once I have my last list, I would like to select the 1st element from the list and perform a click operation.

I have already found similar topic -> https://stackoverflow.com/questions/66230621/getting-a-list-of-list-elements-using-playwright but I was wondering if you can work more on the more advanced lists because the example in the post is focused only on printing the results where I am would like to actually work on the elements which are in the created list.

I am using Mocha and Chai in my Playwright framework by the way.

I came up with a following solution of mine, however it does not work as expected. Below I am posting my idea.

async selectFristItemInItemCreatePhase() {
await this.page.waitForSelector('tr[class="ant-table-row-0"]', { state:'attached',});

const myItemList = await this.page.$$('tr[class="ant-table-row-0"]');
const myGroupItems = await myItemList.$$('tr:has-text("My Group Value")');
const itemInCreationPhase = await myGroupItems.$$('tr:has-text("Item Creation Phase")');
const firstItemSelected = await itemInCreationPhase[0].click;

return firstItemSelected;

After running it I am getting an error that myItemsList is not a function...

Thanks for your help and support on it.

Answer 1

const myItemList = await this.page.$$('tr[class="ant-table-row-0"]');
const myGroupItems = await myItemList.$$('tr:has-text("My Group Value")');

$$ returns a list, not an object, so you cannot call myitemList.$$ , but use

const myItemList = await this.page.$$('tr[class="ant-table-row-0"]');
const myGroupItems = await myItemList[0].$$('tr:has-text("My Group Value")');

https://playwright.dev/docs/api/class-elementhandle#elementhandleselector

Answer 2

I did some testing and playing with the and with a little bit of help I was able to create a following code which did the trick for me. Hopefully it will help others as well.

async selectFirstItemInItemCreationPhase() {
    await this.page.waitForSelector('tr[class="ant-table-row-0"]', {
      state: 'attached',
    });
    const myItemList = await this.page.$$('tr:has-text("Test Automation Group")');
    const itemsInItemsCreationPhase = await Promise.all(myItemList.map(item => item.$('td:has-text("Item Creation")')));
    const firstItem = await itemsInItemsCreationPhase[0].click();
    return firstItem;
  }