如何使用 puppeteer 填充输入字段

Puppeteer 是一个 Node.js 库，它提供了对 Chrome 或 Chromium 浏览器的高级控制接口，可用于测试、爬虫和自动化等场景。在这篇文章中，我们将介绍如何使用 Puppeteer 填充输入字段。

步骤

1. 安装 Puppeteer

Puppeteer 可以通过 npm 来安装：

npm install puppeteer

2. 导入 Puppeteer

在你的脚本文件中，导入 Puppeteer：

const puppeteer = require('puppeteer');

3. 启动浏览器

要控制浏览器，我们需要启动一个浏览器实例。我们可以使用 Puppeteer 的 launch 方法来启动一个新的 Chromium 浏览器实例：

const browser = await puppeteer.launch();

4. 打开页面

一旦浏览器实例启动成功，我们就可以使用 browser.newPage() 方法来创建一个新的页面，并使用 page.goto() 方法导航到该页面：

const page = await browser.newPage();
await page.goto('https://example.com');

5. 填充输入字段

要填充输入字段，我们需要使用 Puppeteer 的 page.type() 方法：

await page.type('#search-input', 'puppeteer');

这将在 id 为 search-input 的元素上输入字符串 puppeteer。

如果你想清空输入字段，可以使用 page.$eval() 方法来获取输入字段元素，并调用其 value 属性的 setter 来清空它：

await page.$eval('#search-input', input => input.value = '');

6. 关闭浏览器

完成任务后，不要忘记关闭浏览器以释放资源：

await browser.close();

示例代码

下面是一个完整的示例代码，它将打开 Google 页面、在搜索栏中输入 puppeteer、等待 1 秒钟、清空输入字段并关闭浏览器：

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');
  await page.waitForTimeout(1000);
  await page.$eval('input[name="q"]', input => input.value = '');
  await browser.close();
})();

结论

以上就是使用 Puppeteer 填充输入字段的所有步骤。在实际项目中，你可能需要与更多的页面元素交互，例如单选框、复选框、下拉列表、按钮等。Puppeteer 提供了丰富的 API，使你能够轻松地控制这些元素。祝你好运！