# 剧作家固定装置和挂钩掌握 Playwright 的固定系统和生命周期挂钩，以创建可重用的测试基础架构、管理测试状态并构建可维护的测试套件。该技能涵盖内置夹具、自定义夹具以及测试设置和拆卸的最佳实践。 ## 内置灯具 ### 核心赛程从“@playwright/test”导入{测试，期望}； test('使用内置装置', async ({ page, // 页面实例 context, // 浏览器上下文 browser, // 浏览器实例 request, // API 请求上下文 }) => { // 每个测试都会获取新的页面和上下文等待 page.goto('https://example.com'); 等待期望（页面）.toHaveTitle（/示例/）； }); ### 页面固定装置 test('页面固定示例', async ({ page }) => { // 导航等待 page.goto('https://example.com'); // 交互 wait page.getByRole('button', { name: '点击我' }).click(); // 等待等待 page.waitForLoadState('networkidle'); // 评估 const title = 等待 page.title(); Expect(title).toBe('示例域'); }); ### 上下文夹具 test('上下文夹具示例', async ({ context, page }) => { // 添加cookie 等待 context.addCookies([ { 名称：'会话'，值：'abc123'，域名：'example.com'，路径：'/'， }, ]); // 设置权限等待 context.grantPermissions(['地理位置']); // 在相同的上下文中创建附加页面 const page2 = 等待 context.newPage(); 等待 page2.goto('https://example.com'); // 两个页面共享 cookie 和存储等待 page.goto('https://example.com'); }); ### 浏览器固定装置 test('浏览器设备示例', async ({ browser }) => { // 使用选项创建自定义上下文 const context = 等待 browser.newContext({ 视口：{宽度：1920，高度：1080}，区域设置：“en-US”， timezoneId: '美国/纽约', 权限：['地理位置']， }); const page =等待context.newPage(); 等待 page.goto('https://example.com'); 等待上下文.close(); }); ### 请求夹具 test('使用请求装置进行 API 测试', async ({ request }) => { // 发出 GET 请求 const response = wait request.get('https://api.example.com/users'); 期望(response.ok()).toBeTruthy(); 期望(response.status()).toBe(200); const users =等待response.json(); 期望（用户）.toHaveLength（10）； // 发出 POST 请求 const createResponse =等待request.post('https://api.example.com/users', { 数据：{ 名称：“约翰·多伊”，电子邮件：'john@example.com'， }, }); 期望(createResponse.ok()).toBeTruthy(); }); ## 定制夹具 ### 基本定制夹具 // 固定装置/base-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型我的夹具= { 时间戳：字符串； }; 导出 const test = base.extend({ 时间戳：异步（{}，使用）=> { const 时间戳 = new Date().toISOString(); 等待使用（时间戳）； }, }); 从“@playwright/test”导出{期望}； // 测试/example.spec.ts 从'../fixtures/base-fixtures'导入{测试，期望}； test('使用自定义时间戳固定装置', async ({ 时间戳, 页 }) => { console.log(`测试开始于：${timestamp}`); 等待 page.goto('https://example.com'); }); ### 具有安装和拆卸功能的夹具从'@playwright/test'导入{测试作为基础}；类型数据库夹具 = { 数据库：数据库； }; 导出 const test = base.extend({ 数据库：异步（{}，使用）=> { // 设置：创建数据库连接 const db = 等待 createDatabaseConnection(); console.log('数据库已连接'); // 提供测试夹具等待使用（db）； // Teardown：关闭数据库连接等待 db.close(); console.log('数据库关闭'); }, }); ### 夹具范围：测试与工作人员从'@playwright/test'导入{测试作为基础}；类型 TestScopedFixtures = { 唯一ID：字符串； }; 类型 WorkerScopedFixtures = { apiToken：字符串； }; 导出 const test = base.extend({ // 测试范围：为每个测试创建 uniqueId: async ({}, use) => { const id = `test-${Date.now()}-${Math.random()}`; 等待使用（id）； }, // Worker-scoped：每个worker创建一次 api令牌：[ 异步（{}，使用）=> { const token = 等待generateApiToken(); 等待使用（令牌）；等待 revokeApiToken(令牌); }, {范围：'工人'}， ], }); ## 身份验证装置 ### 经过身份验证的用户装置 // 固定装置/auth-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型 AuthFixtures = { 已验证页面：页面； }; 导出 const test = base.extend({ authentiatedPage: async ({ browser }, use) => { // 创建带有身份验证的新上下文 const context = 等待 browser.newContext({ 存储状态：'auth.json'， }); const page =等待context.newPage(); 等待使用（页面）；等待上下文.close(); }, }); 从“@playwright/test”导出{期望}； ### 多个用户角色 // 固定装置/多用户固定装置.ts 从'@playwright/test'导入{测试作为基础}；类型用户夹具 = { 管理页面：页面；用户页面：页面； guestPage：页面； }; 导出 const test = base.extend({ adminPage: async ({ 浏览器 }, 使用) => { const context = 等待 browser.newContext({ storageState: 'auth/admin.json', }); const page =等待context.newPage(); 等待使用（页面）；等待上下文.close(); }, userPage: async ({ 浏览器 }, use) => { const context = 等待 browser.newContext({ storageState: 'auth/user.json', }); const page =等待context.newPage(); 等待使用（页面）；等待上下文.close(); }, guestPage: async ({ 浏览器 }, 使用) => { const context = 等待 browser.newContext(); const page =等待context.newPage(); 等待使用（页面）；等待上下文.close(); }, }); ### 身份验证设置 // 验证/setup.ts 从“@playwright/test”导入{测试作为设置}； setup('以管理员身份验证', async ({ page }) => { 等待 page.goto('https://example.com/login'); 等待 page.getByLabel('Email').fill('admin@example.com'); 等待 page.getByLabel('密码').fill('admin123'); wait page.getByRole('button', { name: '登录' }).click(); 等待 page.waitForURL('**/dashboard'); 等待 page.context().storageState({ path: 'auth/admin.json' }); }); setup('以用户身份验证', async ({ page }) => { 等待 page.goto('https://example.com/login'); 等待 page.getByLabel('Email').fill('user@example.com'); 等待 page.getByLabel('密码').fill('user123'); wait page.getByRole('button', { name: '登录' }).click(); 等待 page.waitForURL('**/dashboard'); 等待 page.context().storageState({ path: 'auth/user.json' }); }); ## 数据库装置 ### 测试数据库夹具 // 灯具/database-fixtures.ts 从'@playwright/test'导入{测试作为基础}；从 '@prisma/client' 导入 { PrismaClient }；类型数据库夹具 = { 数据库：PrismaClient； cleanDb：无效； }; 导出 const test = base.extend({ 数据库：[ 异步（{}，使用）=> { const db = new PrismaClient(); 等待使用（db）；等待 db.$disconnect(); }, {范围：'工人'}， ], cleanDb: async ({ db }, use) => { // 测试前清理数据库等待 db.user.deleteMany(); 等待 db.product.deleteMany(); 等待 db.order.deleteMany(); 等待使用（）； // 测试后清理数据库等待 db.user.deleteMany(); 等待 db.product.deleteMany(); 等待 db.order.deleteMany(); }, }); ### 种子数据夹具 // 固定装置/seed-fixtures.ts 从'./database-fixtures'导入{测试作为基础}；输入 SeedFixtures = { 测试用户：用户；测试产品：产品[]； }; 导出 const test = base.extend({ testUser: async ({ db, cleanDb }, use) => { const 用户 = 等待 db.user.create({ 数据：{ 电子邮件：'test@example.com'， name: '测试用户', 密码：'哈希密码'， }, }); 等待使用（用户）； }, testProducts: async ({ db, cleanDb }, use) => { const 产品 = 等待 db.product.createMany({ 数据：[ { 名称：'产品 1'，价格：10.99 }, { 名称：'产品 2'，价格：20.99 }, { name: '产品 3', 价格: 30.99 }, ], }); const allProducts = wait db.product.findMany(); 等待使用（所有产品）； }, }); ## API 模拟装置 ### 模拟 API 夹具 // 固定装置/mock-api-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型 MockApiFixtures = { 模拟API：无效； }; 导出 const test = base.extend({ mockApi: async ({ page }, use) => { // 模拟 API 响应等待 page.route('**/api/users', async (route) => { 等待路线.fulfill({ 状态：200，内容类型：'应用程序/json'，正文：JSON.stringify([ { id: 1, name: '用户1' }, { id: 2, name: '用户2' }, ]), }); }); 等待 page.route('**/api/products', async (route) => { 等待路线.fulfill({ 状态：200，内容类型：'应用程序/json'，正文：JSON.stringify([ { id: 1, 名称: '产品1', 价格: 10 }, { id: 2, 名称: '产品 2', 价格: 20 }, ]), }); }); 等待使用（）； // 清理：取消所有路由等待 page.unrouteAll(); }, }); ### 条件模拟 // 固定装置/conditional-mock-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型 ConditionalMockFixtures = { 模拟失败API：无效；模拟SlowApi：无效； }; 导出 const test = base.extend({ mockFailedApi: async ({ page }, use) => { 等待 page.route('**/api/**', async (route) => { 等待路线.fulfill({ 状态：500，内容类型：'应用程序/json'， body: JSON.stringify({ error: '内部服务器错误' }), }); }); 等待使用（）；等待 page.unrouteAll(); }, mockSlowApi: async ({ page }, use) => { 等待 page.route('**/api/**', async (route) => { // 模拟慢速网络等待新的 Promise((resolve) => setTimeout(resolve, 3000)); 等待路线.继续(); }); 等待使用（）；等待 page.unrouteAll(); }, }); ## 生命周期挂钩 ### 测试挂钩从“@playwright/test”导入{测试，期望}； test.describe('用户管理', () => { test.beforeAll(async () => { // 在该描述块中的所有测试之前运行一次 console.log('设置测试套件'); }); test.beforeEach(async ({ page }) => { // 在每次测试之前运行等待 page.goto('https://example.com'); console.log('测试开始'); }); test.afterEach(async ({ page }, testInfo) => { // 每次测试后运行 console.log(`测试 ${testInfo.status}: ${testInfo.title}`); if (testInfo.status !== testInfo.expectedStatus) { // 测试失败 - 捕获额外的调试信息 const 屏幕截图 = 等待 page.screenshot(); 等待 testInfo.attach('失败屏幕截图', { 正文：截图，内容类型：'图像/png'， }); } }); test.afterAll(async () => { // 在该描述块中的所有测试之后运行一次 console.log('清理测试套件'); }); 测试（'测试1'，异步（{页面}）=> { // 测试实现 }); 测试（'测试2'，异步（{页面}）=> { // 测试实现 }); }); ### 嵌套钩子 test.describe('家长套房', () => { test.beforeEach(async ({ page }) => { console.log('父 beforeEach'); 等待 page.goto('https://example.com'); }); test.describe('儿童套件 1', () => { test.beforeEach(async ({ page }) => { console.log('每个之前的子级 1'); wait page.getByRole('link', { name: '产品' }).click(); }); test('在子 1 中进行测试', async ({ page }) => { // 父 beforeEach 首先运行，然后是子 beforeEach }); }); test.describe('儿童套件 2', () => { test.beforeEach(async ({ page }) => { console.log('Child 2 beforeEach'); wait page.getByRole('link', { name: '关于' }).click(); }); test('在子 2 中进行测试', async ({ page }) => { // 父 beforeEach 首先运行，然后是子 beforeEach }); }); }); ### 条件挂钩 test.describe('功能测试', () => { test.beforeEach(async ({ page, browserName }) => { // 跳过 Firefox 的设置 if (浏览器名称 === 'firefox') { 测试.skip(); } 等待 page.goto('https://example.com'); }); test.afterEach(async ({ page }, testInfo) => { // 仅对失败的测试运行拆卸 if (testInfo.status === '失败') { 等待 page.screenshot({ 路径: `failure-${testInfo.title}.png` }); } }); test('功能测试', async ({ page }) => { // 测试实现 }); }); ## 夹具依赖性 ### 相关装置 // 固定装置/dependent-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型 DependentFixtures = { 配置：配置； apiClient: API客户端; 已验证客户端：ApiClient； }; 导出 const test = base.extend({ // 基础夹具配置：异步（{}，使用）=> { 常量配置= { apiUrl: process.env.API_URL || 'http://localhost:3000', 超时：30000， }; 等待使用（配置）； }, // 取决于配置 apiClient: async ({ config }, use) => { const client = new ApiClient(config.apiUrl, config.timeout); 等待使用（客户端）； }, // 取决于 apiClient authentiatedClient: async ({ apiClient }, use) => { const token = wait apiClient.login('user@example.com', '密码'); apiClient.setAuthToken(令牌); 等待使用（apiClient）； }, }); ### 组合多个装置 // 固定装置/combined-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型组合夹具 = { 设置完成：无效； }; 导出 const test = base.extend({ 设置完成：异步（ { 页面，db，mockApi，testUser }，使用 ) => { // 所有依赖的装置都被初始化等待 page.goto('https://example.com'); 等待 page.context().addCookies([ { name: '用户ID', 值：testUser.id.toString(), 域名：'example.com'，路径：'/'， }, ]); 等待使用（）； }, }); ## 高级夹具模式 ### 工厂固定装置 // 固定装置/factory-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型 FactoryFixtures = { createUser: (数据: Partial<用户>) => Promise<用户>; createProduct: (数据: Partial<产品>) => Promise<产品>; }; 导出 const test = base.extend({ createUser: async ({ db }, use) => { 常量用户：User[] = []； const createUser = async (数据: Partial) => { const 用户 = 等待 db.user.create({ 数据：{ 电子邮件：data.email || `用户-${Date.now()}@example.com`, 名称：数据.名称 || '测试用户', 密码：数据.密码 || '密码123', ...数据， }, }); 用户.push(用户); 返回用户； }; 等待使用（创建用户）； // Cleanup: 删除所有创建的用户 for (const user of users) { 等待 db.user.delete({ 其中：{ id: user.id } }); } }, createProduct: async ({ db }, use) => { 常量产品：Product[] = []； const createProduct = async (数据: Partial) => { const 产品 = 等待 db.product.create({ 数据：{ 名称：数据.名称 || `产品${Date.now()}`, 价格：数据.价格 || 9.99, 描述：数据.描述 || '测试产品', ...数据， }, }); 产品.push(产品); 退回产品； }; 等待使用（创建产品）； // Cleanup: 删除所有创建的产品 for（产品的常量产品）{ 等待 db.product.delete({ where: { id: Product.id } }); } }, }); ### 选项赛程 // 灯具/option-fixtures.ts 从'@playwright/test'导入{测试作为基础}；类型选项夹具 = { 慢网络：布尔值； }; 导出 const test = base.extend({ SlowNetwork: [false, { 选项: true }], 页面：异步（{页面，slowNetwork}，使用）=> { 如果（慢速网络）{ 等待 page.route('**/*', async (route) => { 等待新的 Promise((resolve) => setTimeout(resolve, 1000)); 等待路线.继续(); }); } 等待使用（页面）； }, }); // 测试/slow-network.spec.ts 从'../fixtures/option-fixtures'导入{测试，期望}； test('使用慢速网络进行测试', async ({ page }) => { test.use({ SlowNetwork: true }); 等待 page.goto('https://example.com'); // 由于网络限制，这会很慢 }); test('正常网络测试', async ({ page }) => { 等待 page.goto('https://example.com'); // 正常速度 }); ## 测试信息和附件 ### 使用测试信息 test('带有测试信息的示例', async ({ page }, testInfo) => { console.log(`测试标题：${testInfo.title}`); console.log(`项目：${testInfo.project.name}`); console.log(`重试：${testInfo.retry}`); 等待 page.goto('https://example.com'); // 附上截图 const 屏幕截图 = 等待 page.screenshot(); 等待 testInfo.attach('页面屏幕截图', { 正文：截图，内容类型：'图像/png'， }); // 附加 JSON 数据等待 testInfo.attach('测试数据', { body: JSON.stringify({ foo: 'bar' }), 内容类型：'应用程序/json'， }); // 附加文本等待 testInfo.attach('注释', { body: '测试成功完成', 内容类型：'文本/纯文本'， }); }); ### 条件测试执行 test('浏览器特定测试', async ({ page, browserName }) => { test.skip(browserName === 'webkit', 'Safari 不支持'); 等待 page.goto('https://example.com'); // 测试仅在 Chromium 和 Firefox 中运行 }); test('慢速测试', async ({ page }) => { 测试.慢(); // 此测试的三次超时等待 page.goto('https://slow-site.example.com'); // 长时间运行的操作 }); test('预计会失败', async ({ page }) => { 测试失败(); // 标记为预期失败等待 page.goto('https://example.com'); 等待期望（page.getByText（'不存在'））.toBeVisible（）; }); ## 夹具最佳实践 ### 组织赛程固定装置/ ├──index.ts # 导出所有灯具 ├── auth-fixtures.ts # 认证装置 ├──database-fixtures.ts # 数据库装置 ├── mock-api-fixtures.ts # API 模拟装置 └── page-fixtures.ts # 页面相关的装置 // 灯具/index.ts 从 './auth-fixtures' 导入 { test as authTest }；从 './database-fixtures' 导入 { test as dbTest }；从'./mock-api-fixtures'导入{测试为mockTest}；导出 const test = authTest.extend(dbTest.fixtures).extend(mockTest.fixtures); 从“@playwright/test”导出{期望}； ### 灯具命名约定 // 良好的命名导出 const 测试 = base.extend({ authentiatedPage: async ({}, use) => { /* ... */ }, testUser: async ({}, use) => { /* ... */ }, mockApi: async ({}, use) => { /* ... */ }, }); // 避免导出 const 测试 = base.extend({ page2: async ({}, use) => { /* ... */ }, // 非描述性 data: async ({}, use) => { /* ... */ }, // 太通用 Fixture1: async ({}, use) => { /* ... */ }, // 无意义的名称 }); ## 何时使用此技能 * 建立可重用的测试基础设施 * 管理跨测试的身份验证状态 * 创建数据库播种和清理逻辑 * 为测试实现 API 模拟 * 构建工厂夹具以生成测试数据 * 建立测试生命周期模式 * 创建工人范围内的固定装置以提高性能 * 组织复杂的测试设置和拆卸 * 实现条件测试行为 * 建筑类型安全的固定装置系统 ## 资源 *剧作家装置： *剧作家测试挂钩： * Playwright API 测试：

剧作家固定装置和挂钩

包含技能