HoRain云--Playwright 项目结构

HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐初始化的项目结构一览playwright.config.ts —— 配置文件实例package.json —— 依赖与脚本实例实例tests/ 目录 —— 测试文件实例tests-examples/ 目录 —— 更多示例.github/workflows/ —— CI 配置浏览器存放位置node_modules/ —— 依赖包成功初始化 Playwright 项目后你的项目目录中会生成一系列文件和文件夹本章详细解读每个部分的用途。初始化的项目结构一览运行npm init playwrightlatest后项目目录中会生成以下结构your-project/ ├── playwright.config.ts # Playwright 配置文件 ├── package.json # 项目依赖与脚本 ├── package-lock.json # 依赖锁定文件 ├── tests/ # 测试文件目录 │ └── example.spec.ts # 示例测试文件 ├── tests-examples/ # 更多示例测试可选 │ └── demo-todo-app.spec.ts ├── .github/ # GitHub Actions 配置可选 │ └── workflows/ │ └── playwright.yml └── node_modules/ # npm 依赖包playwright.config.ts —— 配置文件这是 Playwright 的核心配置文件控制测试运行的所有方面。实例// 文件路径playwright.config.tsimport { defineConfig, devices } from playwright/test;export default defineConfig({// 测试文件目录相对于此配置文件的路径testDir: ./tests,// 完全并行运行所有测试fullyParallel: true,// 如果源码中遗留了 test.only在 CI 上则构建失败forbidOnly: !!process.env.CI,// CI 环境下失败后重试 2 次本地不重试retries: process.env.CI ? 2 : 0,// CI 环境下使用单线程本地使用默认多线程workers: process.env.CI ? 1 : undefined,// 使用 HTML 报告器reporter: html,// 所有测试共享的配置use: {// 基础 URL测试中使用相对路径即可baseURL: http://localhost:3000,// 失败重试时收集 Tracetrace: on-first-retry,},// 多浏览器/多设备项目配置projects: [{name: chromium,use: { ...devices[Desktop Chrome] },},{name: firefox,use: { ...devices[Desktop Firefox] },},{name: webkit,use: { ...devices[Desktop Safari] },},],// 在测试开始前启动本地开发服务器可选// webServer: {// command: npm run start,// url: http://localhost:3000,// reuseExistingServer: !process.env.CI,// },});playwright.config.ts 是控制 Playwright 行为的核心入口第 15 篇会对每个配置项做详细说明。package.json —— 依赖与脚本初始化后package.json中会新增 Playwright 相关的内容实例{devDependencies: {playwright/test: ^1.52.0 // Playwright Test 作为开发依赖},scripts: {test: playwright test // 可直接运行 npm test}}你也可以添加更多自定义脚本实例{scripts: {test: playwright test,test:ui: playwright test --ui,test:headed: playwright test --headed,test:chromium: playwright test --projectchromium,test:debug: playwright test --debug,codegen: playwright codegen}}tests/ 目录 —— 测试文件tests/目录是默认的测试文件存放位置由testDir配置指定。初始化的示例测试文件内容如下实例// 文件路径tests/example.spec.tsimport { test, expect } from playwright/test;test(has title, async ({ page }) {// 导航到 Playwright 官网await page.goto(https://playwright.dev/);// 断言页面标题包含 Playwrightawait expect(page).toHaveTitle(/Playwright/);});test(get started link, async ({ page }) {// 导航到 Playwright 官网await page.goto(https://playwright.dev/);// 点击 Get started 链接await page.getByRole(link, { name: Get started }).click();// 断言页面上出现了 Installation 标题await expect(page.getByRole(heading, { name: Installation })).toBeVisible();});测试文件命名建议使用.spec.tsTypeScript或.spec.jsJavaScript后缀。tests-examples/ 目录 —— 更多示例如果你在初始化时选择了包含示例测试tests-examples/目录中会有一个更完整的测试示例demo-todo-app.spec.ts演示了真实 Todo 应用的完整测试场景包括添加任务、完成状态切换、过滤功能等。这是一个很好的学习参考你可以运行来看看效果npx playwright test tests-examples/.github/workflows/ —— CI 配置如果你在初始化时选择了添加 GitHub Actions.github/workflows/playwright.yml文件会被自动生成。这个工作流会在每次推送代码或创建 PR 时自动运行 Playwright 测试。浏览器存放位置Playwright 安装的浏览器二进制文件不在项目目录中而是存放在操作系统缓存目录操作系统浏览器存放路径macOS~/Library/Caches/ms-playwright/Windows%USERPROFILE%\AppData\Local\ms-playwright\Linux~/.cache/ms-playwright/你也可以设置自定义存放路径# 设置浏览器安装路径 export PLAYWRIGHT_BROWSERS_PATH/your/custom/path npx playwright installnode_modules/ —— 依赖包Playwright 的核心依赖playwright/test安装在node_modules/中。依赖内部包含了 Playwright 的完整运行时包括与浏览器通信的协议层。除了通过 npm 安装的 Node.js 包外Playwright 还依赖浏览器二进制文件存放在系统缓存中两者缺一不可。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧