雅荷心语博客之前一直使用 puppeteer 来进行一些业务操作, 但是近期因为需要将无头浏览器内部的操作录制为视频, 发现使用 puppeteer 来做有些 复杂, 要结合 ffmpeg 还要操作数据流之类的,
询问 chatGPT 发现有个更好用的自动化测试框架叫 playwright 有类似的能力,就浅浅尝试一下。
项目地址 : https://github.com/microsoft/playwright
首先我们安装一下: npm install playwright
随便写个 demo 试试
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import {chromium} from "playwright"; (async () => { const browser = await chromium.launch({ headless: false, // 非无头模式，方便观察录制效果 args: ['--start-fullscreen'], // 全屏模式 }); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://www.baidu.com/'); // 进行其他操作... })(); |
若是遇到异常:
node:internal/process/promises:279
triggerUncaughtException(err, true /* fromPromise */);
^
可能是依赖没安装全, 重新安装一下: npx playwright install
最终配置如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { chromium } from "playwright"; import { exec } from "child_process"; (async () => { const width = 1280; const height = 720; let browser = await chromium.launch({ executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", // 自动查找浏览器的可执行文件路径 headless: false, // 非无头模式，方便观察录制效果 args: ['--start-fullscreen'], // 全屏模式 }); const context = await browser.newContext({ viewport: { width, height }, // 设置浏览器的初始大小 recordVideo: { dir: 'recordings/', // 视频保存目录 frameRate: 60, // 视频帧率 size: { width, height }, // 视频分辨率 outputSize: { width, height }, // 输出视频大小 videoSize: { width: 1920, height:1080 }, // 视频大小 format: 'mp4' // 指定视频格式为 MP4 } }); const page = await context.newPage(); await page.goto('https://vr.he29.com/tour/index?id=65432d6218a3326&h=1'); setTimeout(async (_)=> { const video = await page.video(); // 获取录制的视频对象 const videoPath = await video.path(); // 获取录制的视频文件路径 console.log('录制的视频文件路径:', videoPath); const outMp4 = videoPath.replace('.webm', '.mp4'); const run = `/Applications/ffmpeg -i ${videoPath} ${outMp4}`; console.log(`run`, run) exec(run); await browser.close(); }, 5000) })(); |
可以正常录制到 webm 格式的视频, 后面使用 ffmpeg 转为 mp4 就可以了
不过目前录制的视频清晰度有些低,目前还没有找到好的办法
