ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Playwright安装教程:从 Node.js 环境到第一个自动化脚本

Playwright安装教程:从 Node.js 环境到第一个自动化脚本 交流讨论欢迎加入我们一起学习 资源分享软件测试学习提升资料包 教程推荐自动化测试从入门到精通全套保姆级教程欢迎点赞 收藏 ⭐留言laywright 安装Playwright 是一个 Node.js 库所以需要我们本地安装 Node.js如果你已经安装了可以跳过。1、安装 Node.jsPlaywright 官方推荐使用 Node.js。打开 Node.js 官网下载并安装LTS长期支持版验证是否安装成功node -v npm -v能看到版本号即可。2、新建项目目录如果成功安装 node我们就可以开始 Playwright 的安装与使用。在命令行执行mkdir runoob-playwright-demo cd runoob-playwright-demo3、初始化并安装 Playwright执行npm init playwrightlatest安装过程会提示选择语言JavaScript或TypeScript熟悉哪个选哪个是否要安装测试示例推荐选Yes方便学习是否下载浏览器选YesPlaywright 会下载 Chromium、Firefox、WebKit 三大引擎安装完成后你的项目目录大概长这样playwright-demo/ ├─ tests/ # 示例测试用例 ├─ playwright.config.js # 配置文件 ├─ package.json └─ node_modules/4、使用 yarn 初始化yarn create playwright5、使用 pnpm 初始化pnpm create playwright三种包管理器的初始化效果完全相同选择你熟悉的一个即可。手动安装如果你已有项目想手动添加 Playwright可以分两步完成。第一步安装 npm 包# 安装 Playwright Test 作为开发依赖 npm i -D playwright/test # 如果只需要浏览器自动化库不用测试运行器 npm i playwright第二步安装浏览器# 安装所有浏览器Chromium、Firefox、WebKit npx playwright install # 或者只安装特定浏览器 npx playwright install chromium npx playwright install firefox npx playwright install webkit浏览器二进制文件默认下载到操作系统缓存目录如 macOS 的 ~/Library/Caches/ms-playwright/不会占用你的项目空间。安装的浏览器说明Playwright 安装的是浏览器的测试版本而非你日常使用的浏览器Playwright 中的名称对应浏览器说明ChromiumGoogle Chrome 的开源基础Chrome 的核心引擎行为几乎一致FirefoxMozilla Firefox官方 Firefox 的测试构建版本WebKitApple Safari 的引擎Safari 的底层渲染引擎这些测试版本与用户日常使用的浏览器存在微小差异但在绝大多数测试场景中表现一致。验证安装安装完成后运行以下命令验证是否成功# 查看已安装的 Playwright 版本和浏览器 npx playwright --version预期输出大致如下Version 1.52.0运行示例测试来验证一切正常npx playwright test如果看到测试运行的输出包括通过和失败的测试说明安装成功。常见安装问题下载浏览器很慢浏览器二进制文件较大约 400-500 MB下载速度取决于网络环境。可以通过设置环境变量使用国内镜像# 设置下载源为国内镜像 export PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ npx playwright installLinux 系统缺少系统依赖在 Linux 上运行 Playwright 需要安装额外的系统库。# 安装 Playwright 所需的系统依赖 npx playwright install-deps # 如果只需要某个浏览器对应的依赖 npx playwright install-deps chromium在 Docker 容器中使用 Playwright 时请使用微软官方 Docker 镜像mcr.microsoft.com/playwright它已预装所有依赖。第一个脚本Hello World新建一个test.js文件写入以下内容实例// test.js const { chromium } require(playwright); (async () { // 1. 启动浏览器 const browser await chromium.launch({ headless: false }); // 设置 false 可以看到浏览器 const page await browser.newPage(); // 2. 打开网页 await page.goto(https://www.baidu.com); // 3. 截图保存 await page.screenshot({ path: baidu.png }); // 4. 关闭浏览器 await browser.close(); console.log(截图已保存到 example.png); })();运行node test.js以上是一个 Playwright 的简单实例可以截图百度的首页。
返回列表