Playwright - Find multiple elements or class names

user_328446 0
Viewed 8168

I have read a few different QAs related to this but none seem to be working.

I am trying to target an element (Angular) called mat-radio-button with a class called mat-radio-checked. And then select the inner text.

In Chrome this is easy:

https://i.stack.imgur.com/Ev0iQ.png

https://i.stack.imgur.com/lVoG3.png

To find the first element that matches in Playwright I can do something like:

      let test: any = await page.textContent(
      "mat-radio-button.mat-radio-checked"
    );

    console.log(test);

But if I try this:

      let test: any = await page.$$(
      "mat-radio-button.mat-radio-checked"
    );

    console.log(test);
    console.log(test[0]);
    console.log(test[1]);
  });

It does not return an array of elements I can select the inner text of.

I need to be able to find all elements with that class so I can use expect to ensure the returned inner text is correct, eg:

    expect(test).toBe("Australian Citizen");
playwright typescript browser-automation automation javascript
1 Answers

I found out the issue was due to the page generating beforehand and the elements were not available. So I added a waitForSelector:

await page.waitForSelector("mat-radio-button");

const elements = await page.$$("mat-radio-button.mat-radio-checked");
console.log(elements.length);
console.log(await elements[0].innerText());
console.log(await elements[1].innerText());
console.log(await elements[2].innerText());
user_3284460
Related