Node.js Playwright安装与环境配置 - 知识铺
Playwright安装与环境配置
1. 前提条件
-
• Node.js 14.17+ 环境
-
• npm 或 yarn 包管理器
2. 安装步骤
方法一：快速初始化项目（推荐）
<span><span leaf=""># 创建并初始化Playwright项目</span></span><br><span leaf="">npm init playwright@latest my-playwright-project</span><br><span><span leaf="">cd</span></span><span leaf=""> my-playwright-project</span><br><br><span><span leaf=""># 安装依赖</span></span><br><span leaf="">npm install</span><br><br><span><span leaf=""># 安装浏览器（Chromium、Firefox、WebKit）</span></span><br><span leaf="">npx playwright install</span>
方法二：手动安装到现有项目
<span><span leaf=""># 安装Playwright核心库</span></span><br><span leaf="">npm install playwright --save-dev</span><br><br><span><span leaf=""># 安装浏览器</span></span><br><span leaf="">npx playwright install</span>
3. 验证安装
<span><span leaf=""># 查看版本</span></span><br><span leaf="">npx playwright --version</span><br><br><span><span leaf=""># 运行示例测试</span></span><br><span leaf="">npx playwright </span><span><span leaf="">test</span></span>
4. 第一个完整示例（包含安装后运行）
步骤1：创建测试文件
在项目根目录创建 tests/first-test.spec.ts
<span><span leaf="">import</span></span><span leaf=""> { test, expect } </span><span><span leaf="">from</span></span><span leaf=""> </span><span><span leaf="">'@playwright/test'</span></span><span leaf="">;</span><br><br><span><span leaf="">test</span></span><span leaf="">(</span><span><span leaf="">'基本页面导航测试'</span></span><span leaf="">, </span><span><span leaf="">async</span></span><span leaf=""> ({ page }) => {</span><br><span leaf=""> </span><span><span leaf="">// 导航到Playwright官网</span></span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">goto</span></span><span leaf="">(</span><span><span leaf="">'https://playwright.dev/'</span></span><span leaf="">);</span><br><span leaf=""> </span><br><span leaf=""> </span><span><span leaf="">// 验证标题包含"Playwright"</span></span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> </span><span><span leaf="">expect</span></span><span leaf="">(page).</span><span><span leaf="">toHaveTitle</span></span><span leaf="">(</span><span><span leaf="">/Playwright/</span></span><span leaf="">);</span><br><span leaf=""> </span><br><span leaf=""> </span><span><span leaf="">// 点击"Get Started"链接</span></span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">getByRole</span></span><span leaf="">(</span><span><span leaf="">'link'</span></span><span leaf="">, { </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'Get Started'</span></span><span leaf=""> }).</span><span><span leaf="">click</span></span><span leaf="">();</span><br><span leaf=""> </span><br><span leaf=""> </span><span><span leaf="">// 验证导航后的页面包含"Installation"标题</span></span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> </span><span><span leaf="">expect</span></span><span leaf="">(page.</span><span><span leaf="">getByRole</span></span><span leaf="">(</span><span><span leaf="">'heading'</span></span><span leaf="">, { </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'Installation'</span></span><span leaf=""> })).</span><span><span leaf="">toBeVisible</span></span><span leaf="">();</span><br><span leaf="">});</span>
步骤2：运行测试
<span><span leaf=""># 执行测试</span></span><br><span leaf="">npx playwright </span><span><span leaf="">test</span></span><span leaf=""> first-test.spec.ts</span><br><br><span><span leaf=""># 查看测试报告</span></span><br><span leaf="">npx playwright show-report</span>
步骤3：生成HTML测试报告
测试完成后会在playwright-report目录生成交互式报告，可通过浏览器打开查看详细测试结果。
5. 配置文件说明
项目根目录的playwright.config.ts文件可配置测试参数：
<span><span leaf="">import</span></span><span leaf=""> { defineConfig } </span><span><span leaf="">from</span></span><span leaf=""> </span><span><span leaf="">'@playwright/test'</span></span><span leaf="">;</span><br><br><span><span leaf="">export</span></span><span leaf=""> </span><span><span leaf="">default</span></span><span leaf=""> </span><span><span leaf="">defineConfig</span></span><span leaf="">({</span><br><span leaf=""> </span><span><span leaf="">testDir</span></span><span leaf="">: </span><span><span leaf="">'./tests'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">timeout</span></span><span leaf="">: </span><span><span leaf="">30</span></span><span leaf=""> * </span><span><span leaf="">1000</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">expect</span></span><span leaf="">: {</span><br><span leaf=""> </span><span><span leaf="">timeout</span></span><span leaf="">: </span><span><span leaf="">5000</span></span><br><span leaf=""> },</span><br><span leaf=""> </span><span><span leaf="">fullyParallel</span></span><span leaf="">: </span><span><span leaf="">true</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">forbidOnly</span></span><span leaf="">: !!process.</span><span><span leaf="">env</span></span><span leaf="">.</span><span><span leaf="">CI</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">retries</span></span><span leaf="">: process.</span><span><span leaf="">env</span></span><span leaf="">.</span><span><span leaf="">CI</span></span><span leaf=""> ? </span><span><span leaf="">2</span></span><span leaf=""> : </span><span><span leaf="">0</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">workers</span></span><span leaf="">: process.</span><span><span leaf="">env</span></span><span leaf="">.</span><span><span leaf="">CI</span></span><span leaf=""> ? </span><span><span leaf="">1</span></span><span leaf=""> : </span><span><span leaf="">undefined</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">reporter</span></span><span leaf="">: </span><span><span leaf="">'html'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">use</span></span><span leaf="">: {</span><br><span leaf=""> </span><span><span leaf="">actionTimeout</span></span><span leaf="">: </span><span><span leaf="">0</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">baseURL</span></span><span leaf="">: </span><span><span leaf="">'http://localhost:3000'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">trace</span></span><span leaf="">: </span><span><span leaf="">'on-first-retry'</span></span><span leaf="">,</span><br><span leaf=""> },</span><br><span leaf=""> </span><span><span leaf="">projects</span></span><span leaf="">: [</span><br><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'chromium'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">use</span></span><span leaf="">: { ...devices[</span><span><span leaf="">'Desktop Chrome'</span></span><span leaf="">] },</span><br><span leaf=""> },</span><br><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'firefox'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">use</span></span><span leaf="">: { ...devices[</span><span><span leaf="">'Desktop Firefox'</span></span><span leaf="">] },</span><br><span leaf=""> },</span><br><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'webkit'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">use</span></span><span leaf="">: { ...devices[</span><span><span leaf="">'Desktop Safari'</span></span><span leaf="">] },</span><br><span leaf=""> },</span><br><span leaf=""> ],</span><br><span leaf="">});</span>
6. 常用命令速查表
| 命令
|
说明
npx playwright codegen |
启动代码生成器，录制用户操作并生成测试代码
|
| npx playwright test |
运行所有测试
|
| npx playwright test --project=chromium |
指定浏览器运行测试
|
| npx playwright test --debug |
调试模式运行测试
|
| npx playwright show-trace trace.zip |
查看跟踪报告
|
- 原文作者：知识铺
- 原文链接：https://index.zshipu.com/ai/post/202510/Node.js-Playwright%E5%AE%89%E8%A3%85%E4%B8%8E%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/
- 版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。
- 免责声明：本页面内容均来源于站内编辑发布，部分信息来源互联网，并不意味着本站赞同其观点或者证实其内容的真实性，如涉及版权等问题，请立即联系客服进行更改或删除，保证您的合法权益。转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com
