如何在puppeteer 中点击一个有一定内容的link？

Question

如果我的页面中有一些内容，例如：

<a>Hi!</a>

如何使用 Google 的 Puppeteer 自动点击该元素？

我需要能够 select 它仅基于其内容，而不是 id、class 或属性。

是否有类似 $('a:contains("Hi!")') 的东西可以用来 select 这个元素？

如何使用 https://github.com/GoogleChrome/puppeteer

谢谢

Answer 1

首先，我们必须按文本查找元素。

/**
 * findElemByText - Find an Element By Text
 *
 * @param  {String} str                case-insensitive string to search
 * @param  {String} selector = '*'     selector to search
 * @param  {String} leaf = 'outerHTML' leaf of the element
 * @return {Array}                     array of elements
 */
function findElemByText({str, selector = '*', leaf = 'outerHTML'}){
  // generate regex from string
  const regex = new RegExp(str, 'gmi');

  // search the element for specific word
  const matchOuterHTML = e => (regex.test(e[leaf]))

  // array of elements
  const elementArray = [...document.querySelectorAll(selector)];

  // return filtered element list
  return elementArray.filter(matchOuterHTML)
}

// usage
// findElemByText({str: 'Example', leaf: 'innerHTML', selector: 'title'});
// findElemByText({str: 'Example', selector: 'h1'});
// findElemByText({str: 'Example'});

将其保存在与您的人偶脚本相同的文件夹中，将其命名为 script.js。

现在，我们可以在 puppeteer 脚本中使用它。我们可以使用 ElementHandle，但为了便于理解，我将使用 puppeteer 提供的 .evaluate() 函数。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // expose the function
  await page.addScriptTag({path: 'script.js'});

  // Find Element by Text and Click it
  await page.evaluate(() => {
   // click the first element 
   return findElemByText({str: 'More'})[0].click();
  });

  // Wait for navigation, Take Screenshot, Do other stuff
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();

不要复制粘贴上面的代码，试着理解它并自己输入。如果上面的代码失败，请尝试找出失败的原因。

Answer 2

使用 XPath 的替代方法

使用 XPath 表达式有一种更简单的方法：

const aElementsWithHi = await page.$x("//a[contains(., 'Hi!')]");
await aElementsWithHi[0].click();

使用page.$x, this code finds all a elements with the text Hi! inside. The result will be an array containing the matching a element handles. Using the elementHandle.click函数，我们可以点击元素。

如何在puppeteer 中点击一个有一定内容的link？

How to click on a link that has a certain content in puppeteer?

browser-automation

css-selectors

puppeteer

使用 XPath 的替代方法