如何点击木偶操作中具有特定内容的链接？

Question

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

<a>Hi!</a>

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

我需要能够仅根据其内容选择它，而不是id，类或属性。

有什么像$('a:contains("Hi!")')我可以利用来选择这个元素？

我怎么能用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'});

将它保存在与puppeteer脚本相同的文件夹中，将其命名为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，此代码查找所有a元素，其中包含文本Hi!。结果将是一个包含匹配的a元素句柄的数组。使用elementHandle.click函数，我们可以单击元素。