劇作家 - 查找多個元素或 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;
  }

做一個普通的方法，通過傳參調用。