提升Web爬虫效率的秘密武器：Puppeteer选择器全攻略

引言

Puppeteer是一个强大的Node.js库，用于控制无头Chrome浏览器。它提供了丰富的API来进行网页自动化测试、抓取数据等操作。在使用Puppeteer时，选择器的使用至关重要，因为它们帮助我们定位和操作网页元素。本文将从基础到进阶，详细介绍Puppeteer中的选择器定位方法。

---

1. 基础选择器：page.$() 和 page.$$()

1.1 page.$() - 查询单个元素

• 基本格式：

const element = await page.$(selector);

• 用法示例：

// 选择第一个按钮
const button = await page.$('button');
if (button) {
  await button.click();
}

• 说明： 返回一个 ElementHandle，若没有找到则返回 null。

1.2 page.$$() - 查询多个元素

• 基本格式：

const elements = await page.$$(selector);

• 用法示例：

// 获取所有列表项
const items = await page.$$('.list-item');
for (const item of items) {
  const text = await page.evaluate(el => el.innerText, item);
  console.log(text);
}

• 说明： 返回一个元素数组（ElementHandle[]）。

---

2. 样式选择器：CSS Selector

2.1 介绍

CSS选择器是最常用的定位方式，兼容性广，表达能力强。

2.2 常用格式

/* ID选择器 */
#id
/* 类名选择器 */
.className
/* 标签选择器 */
tag
/* 属性选择器 */
[attribute='value']
/* 后代选择器 */
parent descendant
/* 子选择器 */
parent > child

2.3 举例

// 选择id为main的div
await page.click('#main');

// 选择所有class为button的元素
const buttons = await page.$$('.button');

// 选择表单中name为email的输入框
const emailInput = await page.$('input[name="email"]');

// 选择所有带data-*属性的元素
const dataAttrs = await page.$$('div[data-test]');

---

3. 使用 XPath：page.$x()

3.1 介绍

XPath 是一种路径表达式，擅长复杂结构的定位，特别适合含有动态内容或层级复杂的元素。

3.2 格式

const [element] = await page.$x(xpathExpression);

3.3 举例

// 通过文本内容定位某个按钮
const [button] = await page.$x("//button[contains(text(), '提交')]");
if (button) {
  await button.click();
}

// 定位第一个li元素
const [firstLi] = await page.$x("//ul/li[1]");

3.4 注意事项

• 对于较新版本的Puppeteer,page.$x()已经移除，应该使用 page.locator() 或 page.$() 替代 page.$x()

---

5. 高级技巧：等待元素、复合选择器和动态定位

5.1 等待元素出现

await page.waitForSelector('.dynamic-element');
const dynamicEl = await page.$('.dynamic-element');

5.2 复合选择器

// 选择某个父元素下的特定子元素
await page.$('.parent > .child');

5.3 动态选择

结合 page.waitForFunction()，等待满足条件的元素出现

await page.waitForFunction(() => {
  return document.querySelectorAll('div.loaded').length > 0;
});

---

6. 实战案例：自动登录新浪

const puppeteer = require('puppeteer');

async function start() {
  // 启动浏览器
  const browser = await puppeteer.launch({
    executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',  // 如果安装的时候跳过了下载浏览器，就需要指定本地已经下载的浏览器路径
    headless: false, // 不使用无头模式
    slowMo: 50, // 慢速模式，便于观察
    args: ['--window-size=1200,800'] // 设置窗口大小
  });

  // 打开新标签页
  const page = await browser.newPage();
  await page.goto('https://login.sina.com.cn/sso/signin?entry=wapsso&source=wapssosina&url=https%3A%2F%2Fmy.sina.cn%2F%3Fvt%3D4%26pos%3D108%26his%3D0%26m%3D31f000ddf803c79c1e40f7ddafbef70e');

  // 通过 css 定位
  const inputText = await page.$('input[type="text"]');
  await inputText.type('15010302001');
  const inputPwd = await page.$('input[type="password"]');
  await inputPwd.type('15010302001');

  const button = await page.$("button");
  await button.click();
  // setTimeout(async () => {
  //   await page.close();
  // }, 2000);
}

start();

---

结语

更多实用的功能和API请参考官方文档

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。