Node.js Puppeteer如何将const变量插入page.$x的xpath查询语句

你遇到的是JS字符串变量插值的问题，有两种常用的正确实现方式： #

推荐写法：ES6模板字符串 #

这是最简单不易出错的写法，用反引号包裹整个XPath表达式，变量部分用${变量名}插入即可，注意XPath语法要求字符串需要用单引号包裹：

// 定义变量
const link = `p${i}`;
// 插入到XPath中
const klik2 = await page.$x(`//a[contains(@href, '${link}')]`);

手动拼接字符串的正确写法 #

你之前的写法错误点在于给整个XPath外层多套了一层多余的双引号，正确拼接方式如下：

const link = 'p' + i;
const xpath = "//a[contains(@href, '" + link + "')]";
const klik2 = await page.$x(xpath);

注意事项 #

如果你的变量内容可能包含单引号，需要提前转义避免XPath语法错误，转义方法如下：

const safeLink = link.replace(/'/g, ''');
// 再把safeLink插入到XPath中即可

修改后的完整可运行代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setDefaultNavigationTimeout(0);
  await page.goto("http://mypage.test/");
  for (let i = 1; i < 100; i++) {
    const link = `p${i}`;
    try {
      const klik2 = await page.$x(`//a[contains(@href, '${link}')]`);
      // 加非空判断避免找不到元素时报错
      if (klik2.length > 0) {
        await klik2[0].click();
      }
    } catch (e) {
      console.log(e);    
    }
    await page.goto("http://mypage.test/");
  }
  await browser.close();
})();

内容的提问来源于stack exchange，提问作者maya5510