Puppeteer 事件元素更改 - Javascript

Puppeteer 是一个 Node.js 库，用于通过 Headless Chrome 或 Chromium 浏览器控制 Chrome 或 Chromium 浏览器的 API 。

本文将介绍如何使用 Puppeteer 来直接更改页面的元素。

安装 Puppeteer

Puppeteer 需要 Node.js 6.4.0 或更高版本。

使用 npm 安装 Puppeteer。

npm i puppeteer

代码示例

下面的代码将打开 Google 搜索页面并更改搜索框中的关键字。

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.type('input[name=q]', 'puppeteer events');
  await page.waitForSelector('input[name=btnK]');
  await page.click('input[name=btnK]');
  await page.waitForNavigation();
  const pageTitle = await page.title();
  console.log(pageTitle);
  await browser.close();
})();

这段代码使用 page.type() 方法将 "puppeteer events" 输入到 Google 搜索框中，然后使用 page.waitForSelector() 等待提交按钮加载并使用 page.click() 方法单击它。然后使用 page.waitForNavigation() 等待页面加载完成，然后获取页面标题并输出。

Puppeteer 事件

Puppeteer 提供了一组事件，可用于在 DOM 元素更改时自动执行相关操作。以下是 Puppeteer 常用的事件：

'dialog':

当弹出框出现时触发

page.on('dialog', async dialog => {
  await dialog.accept();
});

'console':

页面上的 console.log() 调用将触发此事件

page.on('console', msg => {
  for (let i = 0; i < msg.args.length; ++i)
    console.log(`${i}: ${msg.args[i]}`);
});

'error':

在页面中运行的脚本出错时触发

page.on('error', err => {
  console.error('Page error:', err);
});

'pageerror':

页面 JavaScript 发生错误时触发

page.on('pageerror', err => {
  console.error('Page error:', err);
});

'request':

当页面发出请求时触发

page.on('request', request => {
  console.log('Intercepting request:', request.url());
  request.continue();
});

'response':

当页面收到响应时触发

page.on('response', response => {
  console.log('Intercepting response:', response.url());
});

'requestfailed':

当请求失败时触发

page.on('requestfailed', request => {
  console.log('Request failed:', request.url());
});

'requestfinished':

当请求结束时触发

page.on('requestfinished', request => {
  console.log('Request finished:', request.url());
});

结论

使用 Puppeteer 更改页面元素的功能强大而灵活。本文介绍了如何使用 Puppeteer 事件来自动响应页面更改。

在您的下一个项目中，尝试使用 Puppeteer 事件来创建令人惊叹的自动化流程！