使用Puppeteer和jQuery来控制JavaScript网页

如果你曾经尝试过使用Node.js来自动化测试或爬取网页，那么你可能已经了解了Puppeteer这个神奇的库。Puppeteer是一个基于Google Chrome的自动化库，它提供了一系列API来访问和控制Chrome的实例。通过它，我们可以很简单的完成一些自动化操作，例如截屏、表单提交、页面跳转等等。

但是，对于那些对于网页开发不熟悉的程序员来说，使用原生的Puppeteer API可能有点不够友好。这时候，jQuery这个著名的JavaScript库就派上用场了。在这篇文章中，我们将介绍如何使用Puppeteer和jQuery来控制JavaScript网页。

安装Puppeteer和jQuery

首先，让我们先安装必要的依赖。使用以下命令来安装Puppeteer和jQuery：

npm install puppeteer jquery

在Puppeteer中使用jQuery

在Node.js中，我们不能直接使用浏览器中的全局变量，例如$和jQuery。但是，我们可以通过注入自定义的代码来在页面中加载jQuery，并在Puppeteer中使用它。

const puppeteer = require('puppeteer');
const $ = require('jquery');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 注入jQuery
  await page.evaluate(() => {
    const script = document.createElement('script');
    script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
    document.head.appendChild(script);
  });

  // 使用jQuery选择器来查询元素
  const elem = await page.$('input[name="username"]');
  await elem.type('example');

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

点击和填写表单

如果你已经了解了如何使用jQuery来操作页面元素，那么使用Puppeteer来完成一些典型的自动化操作就很简单了。例如，下面的代码将实现输入用户名和密码来登录某个网站：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com/login');

  // 输入用户名和密码
  await page.type('input[name="username"]', 'example');
  await page.type('input[name="password"]', '123456');

  // 点击登录按钮
  await page.click('.login-btn');

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

这里，我们使用了page.type()方法来输入文本内容，page.click()方法来点击按钮。这些方法的参数是可选的，如果需要更高级的操作，例如等待特定的元素或等待异步操作完成，可以使用page.waitFor()系列方法。

截图和PDF导出

Puppeteer还提供了一些快捷的方法来截图或导出PDF文件。

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await page.pdf({ path: 'example.pdf' });

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

此外，Puppeteer还提供了许多其他的API，例如控制鼠标和键盘、模拟浏览器滚动条等等。通过与jQuery的结合，我们可以使用Puppeteer更方便、更高效的完成一系列的自动化操作。

参考资料：

• Puppeteer官方文档
• jQuery官方文档