javascript - 我怎样才能点击与 Playwright 的选择器匹配的所有链接？

Question

我正在使用 Playwright 抓取一些数据。如何点击页面上与选择器匹配的所有链接？

const { firefox } = require('playwright');

(async () => {
  const browser = await firefox.launch({headless: false, slowMo: 50});
  const page = await browser.newPage();
  
  await page.goto('https://www.google.com');
  
  page.pause(); // allow user to manually search for something
  
  const wut = await page.$$eval('a', links => {
    links.forEach(async (link) => {
      link.click();           // maybe works?
      console.log('whoopee'); // doesn't print anything
      page.goBack();          // crashes
    });
    return links;
  });

  console.log(`wut? ${wut}`); // prints 'wut? undefined'

  await browser.close();
})();

一些问题:

$$eval 中的
1. console.log 不执行任何操作。
eval 中的
2. page.goBack() 和 page.pause() 导致崩溃。
3. $$eval 的返回值是undefined(如果我注释掉page.goBack() 所以我得到一个返回值在全部)。如果我返回 links.length 而不是 links，它是正确的(即它是一个正整数)。嗯？

我得到类似的结果:

const links = await page.locator('a');
await links.evaluateAll(...)

显然我不知道自己在做什么。实现此类目标的正确代码是什么？

( X-Y problem alert :我实际上并不关心我是否使用 $$eval、Playwright，或者坦率地说，甚至是 Javascript；我真正想做的就是让这个在任何语言或工具中工作)。

Answer 1

const { context } = await launch({ slowMo: 250 });
const page = await context.newPage();
await page.goto('https://stackoverflow.com/questions/70702820/how-can-i-click-on-all-links-matching-a-selector-with-playwright');

const links = page.locator('a:visible');
const linksCount = await links.count();

for (let i = 0; i < linksCount; i++) {
  await page.bringToFront();

  try {
    const [newPage] = await Promise.all([
      context.waitForEvent('page', { timeout: 5000 }),
      links.nth(i).click({ modifiers: ['Control', 'Shift'] })
    ]);
    await newPage.waitForLoadState();
    console.log('Title:', await newPage.title());
    console.log('URL: ', page.url());

    await newPage.close();
  }
  catch {
    continue;
  }
}

有多种方法可以做到这一点，但我最喜欢这种方法。单击一个链接，等待页面加载，然后返回上一页有很多问题 - 最重要的是对于许多页面来说，链接可能会在每次页面加载时发生变化。 Ctrl+shift+clicking 在新选项卡中打开，您可以使用 Promise.all pattern and catching the 'page' event 访问该选项卡.

我只在这个 页面上试过这个，所以我确信我会出现很多其他问题。但特别是对于此页面，必须使用“a:visible”以防止卡在隐藏链接上。整个点击操作都包含在 try/catch 中，因为某些链接不是真正的链接并且不会打开新页面。

根据您的用例，从每个链接中获取所有 href 可能是最简单的:

const links = page.locator('a:visible');
const linksCount = await links.count();

const hrefs = [];
for (let i = 0; i < linksCount; i++) {
  hrefs.push(await links.nth(i).getAttribute('href'));
}

console.log(hrefs);