Puppeteer 简介和使用-技术鸭(jishuya.cn)

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();

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章

Puppeteer 简介和使用

Evaluating JavaScript

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

请登录后发表评论