Sublime编写Puppeteer自动化测试脚本_模拟用户操作与页面截图

1次阅读

sublime Text 可作为高效编辑器编写 Puppeteer 脚本,需本地安装 node.js(v16+)和 Puppeteer,配置 node.js 构建系统后可快捷运行;关键在语法正确、环境就绪、时机与选择器匹配。

Sublime编写Puppeteer自动化测试脚本_模拟用户操作与页面截图

sublime text 本身不直接运行 Puppeteer,但它可以作为高效的代码编辑器来编写和管理 Puppeteer 自动化测试脚本。关键在于:写对语法、配好环境、用对 Node.js 执行方式,截图和模拟操作就能顺利跑起来。

确保 Node.js 和 Puppeteer 环境就绪

Sublime 不自带运行环境,必须本地装好 Node.js(建议 v16+),再通过终端安装 Puppeteer:

  • 在项目根目录执行:npm init -y && npm install puppeteer
  • 首次运行时 Puppeteer 会自动下载 Chromium,约 170MB,可加 –no-sandbox 参数适配某些系统
  • 检查 node_modules/puppeteer/.local-chromium/ 是否存在,确认浏览器已就位

在 Sublime 中编写标准 Puppeteer 脚本

新建 test.js,用 Sublime 编辑,内容示例(带注释):

const puppeteer = require('puppeteer');  (async () => {   const browser = await puppeteer.launch({ headless: true });   const page = await browser.newPage();    // 模拟用户访问与操作   await page.goto('https://example.com', { waitUntil: 'networkidle2' });   await page.type('#search-input', 'hello world');   await page.click('#search-btn');   await page.waitForSelector('.result-item', { timeout: 5000 });    // 截图保存到本地   await page.screenshot({ path: 'search-result.png', fullPage: true });    await browser.close(); })();

Sublime 支持 javaScript 语法高亮和 Emmet 补全,装上 nodejs 插件还能一键运行(需配置 build system)。

Sublime编写Puppeteer自动化测试脚本_模拟用户操作与页面截图

Avatar AI

AI成像模型,可以从你的照片中生成逼真的4K头像

Sublime编写Puppeteer自动化测试脚本_模拟用户操作与页面截图 92

查看详情 Sublime编写Puppeteer自动化测试脚本_模拟用户操作与页面截图

用 Sublime 快速运行脚本的小技巧

  • Ctrl+Shift+Bwindows/linux)或 Cmd+Shift+Bmacos),选择 Nodejs 构建系统
  • 若没安装插件,可手动配置:Tools → Build System → New Build System,填入:
{   "cmd": ["node", "$file"],   "selector": "source.js" }

保存为 Nodejs.sublime-build,之后就能快捷运行当前 JS 文件。

调试截图与交互问题的实用建议

常见失败点不是代码写错,而是时机或选择器不匹配:

  • 截图空白?试试加 await page.waitForTimeout(1000) 或换 fullPage: false 先截可视区
  • 点击无效?用 page.$(selector) 检查元素是否存在,或改用 page.click(selector, { delay: 100 }) 模拟真实鼠标
  • 想看页面行为?临时把 headless: true 改成 false,Puppeteer 会弹出真实浏览器窗口

基本上就这些。Sublime 轻量高效,配合 Puppeteer 写自动化测试完全够用——重点不在编辑器多强大,而在脚本逻辑是否贴合页面实际行为。

text=ZqhQzanResources