剧作家 - 查找多个元素或 class 个名称

Question

我已经阅读了一些与此相关的不同 QA，但似乎都没有用。

我正在尝试使用名为 mat-radio-checked 的 class 定位一个名为 mat-radio-button 的元素（Angular）。 然后是 select 内部文本。

在 Chrome 中这很简单：

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

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

要在 Playwright 中找到匹配的第一个元素，我可以这样做：

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

    console.log(test);

但如果我试试这个：

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

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

它不返回元素数组我可以 select 的内部文本。

我需要能够找到带有 class 的所有元素，这样我就可以使用 expect 来确保返回的内部文本是正确的，例如：

    expect(test).toBe("Australian Citizen");

Answer 1

我发现问题是由于页面预先生成并且元素不可用。 所以我添加了一个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());

Answer 2

  public async validListOfItems(name) {
  await this.page.waitForSelector(name, {timeout: 5000});
  const itemlists = await this.page.$$(name);

  let allitems: string[]=new Array();

    for await (const itemlist of itemlists) {
        allitems.push(await itemlist.innerText());
    }
  return allitems;
  }

做一个普通的方法，通过传参调用。