使用Deno与Puppeteer进行浏览器自动化：从入门到实践

郎轶诺

于 2024-09-15 08:20:57 发布

阅读量695

点赞数 20

本文链接：https://blog.csdn.net/gitblog_00084/article/details/142275800

版权

使用Deno与Puppeteer进行浏览器自动化：从入门到实践

deno-puppeteer A port of puppeteer running on Deno 项目地址: https://gitcode.com/gh_mirrors/de/deno-puppeteer

项目介绍

Deno下的Puppeteer 是一个针对Deno运行时设计的Puppeteer版本，允许开发者通过高级API操控Chrome、Chromium或Firefox Nightly浏览器，利用DevTools协议。该库使用户能在无头环境中执行复杂任务，例如生成网页截图、预渲染SPA页面（即服务器端渲染）、自动化UI测试等。Deno-puppeteer保留了Puppeteer的核心功能，并进行了适配，以便在Deno的TypeScript环境中无缝工作。

项目快速启动

安装

首先，你需要安装deno-puppeteer。在Deno中，你可以通过下面的命令来导入和准备所需的环境：

import { puppeteer } from "https://deno.land/x/puppeteer@latest/mod.ts";

// 初始化Puppeteer使用的特定浏览器版本（可选）
const产品 = "chrome"; // 或者 "firefox"
await Deno.run({
  cmd: [
    "deno",
    "run",
    "-A",
    "--unstable",
    `https://deno.land/x/puppeteer@latest/install.ts`,
    `--product=${产品}`,
  ],
});

示例：生成网页截图

以下示例展示如何使用deno-puppeteer快速启动一个脚本来访问一个网站并保存其截图：

import { puppeteer } from "https://deno.land/x/puppeteer@latest/mod.ts";

async function takeScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");
  await page.screenshot({ path: "example.png" });
  await browser.close();
}

await takeScreenshot();

记得替换example.com为你想要截图的网站地址，并确保脚本有足够的权限运行。

应用案例和最佳实践

自动化页面测试

自动化测试是Puppeteer的一大亮点。下面是如何使用它来进行简单的页面交互测试：

async function testPageInteraction() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://your-test-site.com");
  
  // 填写表单
  await page.fill("#username", "testUser");
  await page.press("#submit", "Enter");
  
  // 等待加载完成
  await page.waitForSelector(".success-message");
  
  await browser.close();
}

数据抓取

Puppeteer也能轻松用于抓取动态加载的内容：

async function scrapeData() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://data-source.com");

  const data = await page.evaluate(() =>
    Array.from(document.querySelectorAll('.data-item')).map(item => item.textContent)
  );
  console.log(data);
  
  await browser.close();
}