Puppeteer 简介和使用

发布于 2022-08-27 12:21:44 字数 4288 浏览 195 评论 0

Puppeteer 是 Google 官方支持的用于从 Node.js 控制 Chrome 的库。您可以从 Node.js 打开 Chrome，导航到 Google，搜索内容并查看结果。运行 Puppeteer 无请求头模式下并使其在后台运行。

例如，以下是使用 Puppeteer 和 Node.js 让 Chrome 加载 Google 主页的方法：

const puppeteer = require('puppeteer');

run().then(() => console.log('Done')).catch(error => console.log(error));

async function run() {
  // Setting `headless: false` opens up a browser
  // window so you can watch what happens.
  const browser = await puppeteer.launch({ headless: false });

  // Open a new page and navigate to google.com
  const page = await browser.newPage();
  await page.goto('https://google.com');

  // Wait 5 seconds
  await new Promise(resolve => setTimeout(resolve, 5000));

  // Close the browser and exit the script
  await browser.close();
}

输出如下所示：

Evaluating JavaScript

Puppeteer 页面有一个方便的 evaluate() 允许您在 Chrome 窗口中执行 JavaScript 的函数。 evaluate() 函数是与 Puppeteer 交互的最灵活的方式，因为它允许您使用浏览器 API 来控制 Chrome，例如 document.querySelector()。

例如以下脚本在 Google 上搜索 JavaScript，并获得前 10 个结果。

const puppeteer = require('puppeteer');

// Run in the background (headless mode)
const browser = await puppeteer.launch({ headless: true });

// Navigate to Google
const page = await browser.newPage();
await page.goto('https://google.com');

// Type "JavaScript" into the search bar
await page.evaluate(() => {
  document.querySelector('input[name="q"]').value = 'JavaScript';
});

// Click on the "Google Search" button and wait for the page to load
await Promise.all([
  page.waitForNavigation(),
  page.evaluate(() => {
    document.querySelector('input[value="Google Search"]').click();
  })
]);

// Get all the search result URLs
const links = await page.evaluate(function getUrls() {
  return Array.from(document.querySelectorAll('a cite').values()).
    map(el => el.innerHTML);
});

await browser.close();

将 Puppeteer 与本地 Web 服务器一起使用

因为 Node.js 使用事件循环，所以很容易在同一个脚本中启动 Express 服务器并将 Puppeteer 连接到您的 Express 服务器。很容易使用 Puppeteer 测试 Vue 应用程序。

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

// Start an Express app that renders a Vue app with a counter
const app = express();
app.get('/', function(req, res) {
  res.send(`
  <html>
    <body>
      <script src="https://unpkg.com/vue/dist/vue.js"></script>

      <div></div>

      <script type="text/javascript">      
        const app = new Vue({
          data: () => ({ count: 0 }),
          template: \`
            <div>
              <div>
                Count: {{count}}
              </div>
              <button v-on:click="++count">Increment</button>
            </div>
          \`
        });
        app.$mount('#content');
      </script>
    </body>
  </html>
  `);
});
const server = await app.listen(3000);

// Run in the background (headless mode)
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('http://localhost:3000');

// Load the current count
let count = await page.evaluate(() => {
  return document.querySelector('#count').innerHTML.trim();
});
count; // 'Count: 0'

// Increment the count and check that the counter was incremented
await page.evaluate(() => {
  document.querySelector('button').click();
});

count = await page.evaluate(() => {
  return document.querySelector('#count').innerHTML.trim();
});
count; // 'Count: 1'

await browser.close();
await server.close();

分享到QQ

分享到微博