Flutter自动化控制插件puppeteer的使用

Puppeteer in Dart简介

Puppeteer in Dart 是一个用于通过 DevTools 协议自动控制 Chrome 浏览器的 Dart 库。它是基于Node.JS版本的Puppeteer库移植到Dart语言上的。

Buy Me A Coffee

功能介绍

你可以使用 Puppeteer 实现大多数在浏览器中手动完成的任务，例如：

• 生成页面的截图和 PDF。
• 爬取单页应用（SPA）并生成预渲染内容（即“SSR”（服务器端渲染））。
• 自动化表单提交、UI 测试、键盘输入等操作。
• 创建一个最新的测试环境。直接在最新版本的 Chrome 中运行测试，利用最新的 JavaScript 和浏览器特性。

API 文档

• 完整的API文档
• Dart Doc 包文档
• Dart 版本的 Puppeteer 与原始的 Javascript 代码非常相似，几乎所有 Node.JS 的 Puppeteer 示例都可以轻松转换为 Dart。

示例代码

以下是几个简单的示例，展示了如何使用 Puppeteer in Dart 来执行各种任务：

启动Chrome

import 'package:puppeteer/puppeteer.dart';

void main() async {
  // 下载Chrome二进制文件，启动它并连接到"DevTools"
  var browser = await puppeteer.launch();

  // 打开一个新标签页
  var myPage = await browser.newPage();

  // 跳转到一个网页并等待完全加载
  await myPage.goto('https://dart.dev', wait: Until.networkIdle);

  // 截图
  await myPage.screenshot();
  
  // 获取PDF
  await myPage.pdf();
  
  // 执行JavaScript获取标题
  await myPage.evaluate<String>('() => document.title');

  // 平滑关闭浏览器进程
  await browser.close();
}

生成页面的PDF

import 'dart:io';
import 'package:puppeteer/puppeteer.dart';

void main() async {
  // 启动浏览器并跳转到一个网页
  var browser = await puppeteer.launch();
  var page = await browser.newPage();
  await page.goto('https://dart.dev', wait: Until.networkAlmostIdle);

  // 强制设置屏幕媒体类型
  await page.emulateMediaType(MediaType.screen);

  // 捕获PDF并保存到文件
  await page.pdf(
    format: PaperFormat.a4,
    printBackground: true,
    pageRanges: '1',
    output: File('example/_dart.pdf').openWrite(),
  );
  await browser.close();
}

截取整个HTML页面的截图

import 'dart:io';
import 'package:puppeteer/puppeteer.dart';

void main() async {
  // 启动浏览器并跳转到一个网页
  var browser = await puppeteer.launch();
  var page = await browser.newPage();

  // 设置特定手机的尺寸和用户代理
  await page.emulate(puppeteer.devices.pixel2XL);

  await page.goto('https://dart.dev', wait: Until.networkIdle);

  // 截取页面的截图
  var screenshot = await page.screenshot();

  // 保存到文件
  await File('example/_github.png').writeAsBytes(screenshot);

  await browser.close();
}

截取页面中特定节点的截图

import 'dart:io';
import 'package:puppeteer/puppeteer.dart';

void main() async {
  // 启动浏览器并跳转到一个网页
  var browser = await puppeteer.launch();
  var page = await browser.newPage();
  await page.goto(
    'https://pub.dev/documentation/puppeteer/latest/',
    wait: Until.networkIdle,
  );

  // 选择页面中的元素
  var form = await page.$('input[id="search-box"]');

  // 截取元素的截图
  var screenshot = await form.screenshot();

  // 保存到文件
  await File('example/_element.png').writeAsBytes(screenshot);

  await browser.close();
}

交互页面并抓取内容

import 'package:puppeteer/puppeteer.dart';

void main() async {
  var browser = await puppeteer.launch();
  var page = await browser.newPage();

  await page.goto(
    'https://developers.google.com/web/',
    wait: Until.networkIdle,
  );

  // 在搜索框中输入文本
  await page.type('.devsite-search-field', 'Headless Chrome');

  // 等待建议层出现并点击"显示所有结果"
  var allResultsSelector = '.devsite-suggest-all-results';
  await page.waitForSelector(allResultsSelector);
  await page.click(allResultsSelector);

  // 等待结果页面加载并显示结果
  const resultsSelector = '.gsc-results .gsc-thumbnail-inside a.gs-title';
  await page.waitForSelector(resultsSelector);

  // 从页面中提取结果
  var links = await page.evaluate<List<dynamic>>(
    r'''resultsSelector => {
      const anchors = Array.from(document.querySelectorAll(resultsSelector));
      return anchors.map(anchor => {
        const title = anchor.textContent.split('|')[0].trim();
        return `${title} - ${anchor.href}`;
      });
    }''',
    args: [resultsSelector],
  );
  print(links.join('\n'));

  await browser.close();
}

创建单页应用的静态版本

import 'package:puppeteer/puppeteer.dart';

void main() async {
  var browser = await puppeteer.launch();
  var page = await browser.newPage();
  await page.goto('https://w3c.github.io/');

  // 使用辅助函数获取页面内容
  var pageContent = await page.content;
  print(pageContent);

  // 或者直接执行JavaScript获取页面内容
  var pageContent2 = await page.evaluate<String>(
    'document.documentElement.outerHTML',
  );
  print(pageContent2);

  await browser.close();
}

捕获页面的屏幕录制

import 'dart:convert';
import 'dart:io';
import 'package:image/image.dart' as image;
import 'package:puppeteer/puppeteer.dart';
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_static/shelf_static.dart';

void main() async {
  // 启动本地Web服务器并打开页面
  var server = await io.serve(
    createStaticHandler('example/html'),
    'localhost',
    0,
  );
  var browser = await puppeteer.launch();
  var page = await browser.newPage();
  await page.goto('http://localhost:${server.port}/rubiks_cube/index.html');

  // 每一帧解码图像并使用image包创建动画GIF
  image.Image? animation;
  page.devTools.page.onScreencastFrame.listen((event) {
    var frame = image.decodePng(base64.decode(event.data));
    if (frame != null) {
      if (animation == null) {
        animation = frame;
      } else {
        animation!.addFrame(frame);
      }
    }
  });

  // 改变CSS动画速度
  await page.devTools.animation.setPlaybackRate(240);

  // 开始屏幕录制
  await page.devTools.page.startScreencast(maxWidth: 150, maxHeight: 150);

  // 等几秒后停止屏幕录制
  await Future.delayed(Duration(seconds: 3));
  await page.devTools.page.stopScreencast();

  // 将所有帧编码为动画GIF文件
  File(
    'example/_rubkis_cube.gif',
  ).writeAsBytesSync(image.GifEncoder().encode(animation!));

  await browser.close();
  await server.close(force: true);
}

启动带有可见窗口的浏览器

import 'package:puppeteer/puppeteer.dart';

void main() async {
  var browser = await puppeteer.launch(headless: false);
  // 进行某些操作...
  await browser.newPage();
  await browser.close();
}

执行JavaScript代码

import 'package:puppeteer/puppeteer.dart';

void main() async {
  var browser = await puppeteer.launch();
  var page = await browser.newPage();

  // 函数声明语法
  await page.evaluate('function(x) { return x > 0; }', args: [7]);

  // 简写语法
  await page.evaluate('(x) => x > 0', args: [7]);

  // 多行简写语法
  await page.evaluate(
    '''(x) => {  
    return x > 0;
  }''',
    args: [7],
  );

  // 带有异步的简写语法
  await page.evaluate(
    '''async (x) => {
    return await x;
  }''',
    args: [7],
  );

  // 表达式
  await page.evaluate('document.body');

  await browser.close();
}

Flutter中的限制

此库的功能分为两部分：

1. 下载 Chrome 二进制文件并启动 Chrome 进程。
2. 通过 Websocket 连接到此进程，并发送 JSON 命令来控制浏览器。

由于移动平台（iOS 和 Android）的限制，在 iOS 和 Android 上无法启动外部 Chrome 进程。因此，第一步在移动设备上不可用。

你仍然可以在以下环境中使用 puppeteer-dart：

• Flutter 桌面版（macOS, Windows, Linux）
• Flutter 移动端，但实际的 Chrome 实例需要在服务器上运行，并通过 puppeteer.connect 从移动端应用程序访问

相关工作

• chrome-remote-interface
• puppeteer
• webkit_inspection_protocol
• dart webdriver

以上就是关于Flutter中使用Puppeteer进行自动化控制的相关内容，希望对你有所帮助！