如何获得剧作家的元素集合？

Question

如何使用剧作家获取页面上的所有图像？我只能ElementHandle通过以下代码获得一个 ( )，但不能获得一个集合。

const { chromium } = require("playwright");

class Parser {
  async parse(url) {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto(url);
    await page.waitFor("img");
    // TODO: get somehow collection of elements
    return await page.$("img");
  }
}

module.exports = Parser;

在远处的另一个模块中的某处：

const Parser = require("./path/to/dir/Parser.js");
const parser = new Parser();

parser
    .parse(body.url)
    .then(elemHandle => {
      // here I get only one ElementHandle object, but suppose to get an array or collection
    })
    .catch(err => {
      throw new Error(err);
    });

节点 v.12.16.1

Answer 1

我已经找到了答案。需要使用page.$$(selector)而不是page.$(selector)去抢像document.querySelectorAll(selector)。

Answer 2

正如已接受的答案中提到的，您可以使用await page.$$(selector). 这是该页面的链接。$$ 官方文档

您还可以使用以下代码。

const result = await page.evaluate(selector => document.querySelectorAll(selector) , selector);

这是页面的链接。evaluate 官方文档

Answer 3

您想要使用v1.29locator.all()中添加的新方法来迭代所有匹配元素：

// returns all images on the page & stores them in an array
const images = await page.getByRole('img').all();

不鼓励使用await page.$$(selector);。请改用基于定位器page.locator()。您可以在此处阅读有关该方法的信息。

Answer 4

对于计数，当试图避免使用 时await page.$$(selector);，另一种选择是直接使用 LocatorAssertion：

await expect(locator).toHaveCount(n);

官方文档链接

Answer 5

• 供剧作家使用：await page.$$(selector);