开放的编程资料库

当前位置：我爱分享网 > JavaScript教程 > 正文

Puppeteer tutorial

2023-02-13 分类：JavaScript教程 作者：5afxw 阅读（*）

Puppeteer 教程展示了如何使用 puppeteer 库自动化浏览器。

人偶师

Puppeteer 是一个 Node 库，它提供高级 API 以通过 DevTools 协议控制 Chromium 或 Chrome。

Puppeteer 允许在无界面模式（默认模式）下使用浏览器，无需 UI。这非常适合编写脚本。

$ npm i puppeteer

我们使用npm i puppeteer 命令安装 Puppeteer。

Puppeteer 获取内容

在第一个示例中，我们获取页面的内容。

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://webcode.me');

    const res = await page.content();
    console.log(res);

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

该示例以无头模式启动浏览器，转到webcode.me 网页并检索其内容。

const puppeteer = require('puppeteer');

我们加载puppeteer库。

const browser = await puppeteer.launch();

当 Puppeteer 通过 launch 或 connect 函数连接到 Chromium 实例时，将创建一个浏览器。 launch 函数采用一组可选参数。默认情况下，浏览器以无头模式启动。

const page = await browser.newPage();

newPage 函数在默认浏览器上下文中创建一个新页面。

await page.goto('http://webcode.me');

使用goto，我们导航到给定的 URL。

const res = await page.content();

content 函数获取页面的完整 HTML 内容，包括文档类型。

await browser.close();

最后，我们关闭浏览器。

Puppeteer 创建屏幕截图

在下一个示例中，我们创建网页的屏幕截图。 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://webcode.me');
  await page.screenshot({ path: 'webcode.png' });

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

屏幕截图是使用page.screenshot 函数创建的。

Puppeteer 创建 PDF 文件

在下面的示例中，我们从网页生成 PDF 文件。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://webcode.me');
  await page.pdf({ path: 'webcode.pdf', format: 'a5' });

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

例子生成一个PDF文件，使用page.pdf函数，我们选择a5格式。

Puppeteer 设备模拟

我们可以使用emulate 函数模拟特定设备。

const puppeteer = require('puppeteer');

(async () => {

  const options = {
    headless: false,
    slowMo: 100
  };

  const browser = await puppeteer.launch(options);
  const page = await browser.newPage();

  const device = puppeteer.devices['iPhone X'];
  await page.emulate(device);
  
  await page.goto('http://webcode.me');

  const res = await page.content()
  await page.waitForTimeout(5000);
  console.log(res);

  await browser.close()
})();

在示例中，我们模拟了 iPhone 设备。

const options = {
     headless: false,
     slowMo: 100
};

const browser = await puppeteer.launch(options);

我们将一些选项传递给launch 函数。我们关闭无头模式并稍微减慢自动化速度。

const device = puppeteer.devices['iPhone X'];
await page.emulate(device);

我们选择一个设备并模拟它。

const res = await page.content()
await page.waitForTimeout(5000);
console.log(res);

在我们输出网页内容之前，我们用waitForTimeout暂停脚本的执行；休眠时间以毫秒为单位。

Puppeteer 链接点击

click 函数使用给定的选择器获取元素，如果需要将其滚动到视图中，然后使用page.mouse 在元素的中心单击。

const puppeteer = require('puppeteer');

const run = async () => {

    const options = { headless: false };
    const browser = await puppeteer.launch(options);
    const page = await browser.newPage();

    await page.goto('http://example.com');
    await page.waitForTimeout(3000);
    
    console.log(`Current page: ${page.url()}`);

    await page.click('a');

    console.log(`Current page: ${page.url()}`);

    await page.waitForTimeout(3000);

    return browser.close();
};

const logErrorAndExit = err => {
    console.log(err);
    process.exit();
};

run().catch(logErrorAndExit);

在示例中，我们导航到example.com 页面，等待三秒钟，然后单击可用链接。

Puppeteer 帖子表单

在下面的示例中，我们发布了一个 HTMl 表单。我们使用 Express 库来创建一个简单的 Web 应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>

    <form action="message" method="post">

        <div>
            <label>Name:</label>
            <input type="text" name="name">
        </div>

        <div>
            <label>Message</label>
            <input type="text" name="message">
        </div>

        <button type="submit">Send</button>

    </form>

</body>
</html>

表单包含两个输入框：名称和消息。

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {

    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.post('/message', (req, res) => {

    res.set({ 'Content-Type': 'text/plain; charset=utf-8' });

    let name = req.body.name;
    let message = req.body.message;
    let output = `${name} says: ${message}`;

    res.send(output);
});


app.listen(3000, () => {

    console.log('Application started on port 3000');
})

此 Express 应用程序处理已发布的表单。它根据发送的参数构建消息。

const puppeteer = require('puppeteer');

(async () => {

    const options = {
        headless: false,
        slowMo: 40
    };

    const browser = await puppeteer.launch(options);
    const page = await browser.newPage();
    await page.goto('http://localhost:3000');

    await page.type('input[name="name"]', 'John Doe');
    await page.type('input[name="message"]', 'Hello there!');
    await page.click('button[type=submit]');

    const content = await page.content();

    if (content.includes('John Doe says: Hello there!')) {
        console.log('form submitted OK');
    } else {
        console.log('failed to submit form');
    }

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

在示例中，我们填写表单、发送表单并验证响应。

const options = {
     headless: false,
     slowMo: 40
};

我们在 UI 模式下运行示例；慢了一点。

await page.type('input[name="name"]', 'John Doe');
await page.type('input[name="message"]', 'Hello there!');

使用page.type 函数，我们将数据填充到输入标签中。

await page.click('button[type=submit]');

我们使用page.click 提交表单。

const content = await page.content();

if (content.includes('John Doe says: Hello there!')) {
     console.log('form submitted OK');
} else {
     console.log('failed to submit form');
}

我们验证来自 Express 应用程序的响应。

Puppeteer DuckDuckGo 搜索

在下面的示例中，我们将一个术语传递给 DuckDuckGo 搜索引擎并处理结果。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://duckduckgo.com/', { waitUntil: 'networkidle2' });

    await page.type("input[id=search_form_input_homepage]", "falcon");

    await Promise.all([
        page.click('input[type="submit"]'),
        page.waitForNavigation()
    ]);
    
    const res = await page.evaluate(() =>
        [...document.querySelectorAll(".result__snippet.js-result-snippet")].map(e => ({
            text: e.innerText
        })));

    for (let e of res) {

        console.log(e.text);
    }

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

该示例搜索猎鹰术语并返回 DuckDuckGo 的热门定义。

await page.goto('https://duckduckgo.com/', { waitUntil: 'networkidle2' });

我们导航到 DuckDuckGo；通过将waitUntil 选项设置为networkidle2，我们认为在至少 500 毫秒内不超过 2 个网络连接时导航完成。这是为了确保我们正确加载了页面，并且我们可以找到搜索框。

await page.type("input[id=search_form_input_homepage]", "falcon");

我们在 DuckDuckGo 的搜索框中输入猎鹰术语。

await Promise.all([
    page.click('input[type="submit"]'),
    page.waitForNavigation()
]);

我们提交表格并等待结果。

const res = await page.evaluate(() =>
    [...document.querySelectorAll(".result__snippet.js-result-snippet")].map(e => ({
        text: e.innerText
})));

我们在页面上下文中评估匿名函数。在函数中，我们选择所有同时具有result__snippet 和js-result-snippet 类的标签。这是 DuckDuckGo 存储其定义的地方。

for (let e of res) {

     console.log(e.text);
}

我们检查定义并将它们打印到控制台。

在本文中，我们使用了 puppeteer 库来自动化浏览器。

列出所有 JavaScript 教程。

未经允许不得转载：我爱分享网 » Puppeteer tutorial

感觉很棒！可以赞赏支持我哟~

赞(0) 打赏

相关推荐

近期文章