Playwright提取test.beforeEach()到外部文件报错的解决咨询

报错原因 #

Playwright 的 test.beforeEach() 只能在测试文件（.test.ts）或通过配置指定的全局钩子文件中调用，直接在普通工具文件（比如你之前的 login.ts）里调用会触发该错误——因为测试运行时仅在特定文件上下文里处理这类钩子。

正确实现方案 #

方案1：封装可复用的登录函数（局部测试用例复用） #

适合仅部分测试用例需要登录的场景，无需修改配置文件：

1. 编写工具文件 login.ts，封装纯登录逻辑：

// login.ts
import { Page } from '@playwright/test';

export async function login(page: Page) {
  await page.goto('/login');
  await page.fill('#username', '你的用户名');
  await page.fill('#password', '你的密码');
  await page.click('#submit-btn');
  // 等待登录跳转完成，确保状态生效
  await page.waitForURL('/home');
}

2. 在测试文件中调用：

// mytest.test.ts
import { test } from '@playwright/test';
import { login } from './login';

// 在当前测试文件的前置钩子中调用登录函数
test.beforeEach(async ({ page }) => {
  await login(page);
});

test('已登录状态下的功能测试', async ({ page }) => {
  // 直接使用已登录的page对象编写测试逻辑
  await page.click('#user-center');
  // ...其他测试步骤
});

方案2：扩展测试上下文（推荐，更优雅的复用） #

通过 test.extend() 创建带登录状态的测试上下文，适合多测试文件复用：

1. 创建扩展文件 login.setup.ts：

// login.setup.ts
import { test as base } from '@playwright/test';

// 扩展base测试对象，添加已登录的page上下文
export const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // 执行登录逻辑
    await page.goto('/login');
    await page.fill('#username', '你的用户名');
    await page.fill('#password', '你的密码');
    await page.click('#submit-btn');
    await page.waitForURL('/home');
    
    // 将已登录的page传递给测试用例
    await use(page);
  },
});

2. 在测试文件中使用扩展后的测试对象：

// mytest.test.ts
import { test } from './login.setup';

test('已登录状态测试', async ({ authenticatedPage }) => {
  // authenticatedPage 已经是登录后的页面实例
  await authenticatedPage.click('#some-authed-button');
});

方案3：全局前置钩子（所有测试用例都需要登录） #

如果所有测试都依赖登录状态，可配置全局前置钩子，需要修改 playwright.config.ts：

1. 创建全局钩子文件 global.setup.ts：

// global.setup.ts
import { test as base } from '@playwright/test';

base.beforeEach(async ({ page }) => {
  await page.goto('/login');
  await page.fill('#username', '你的用户名');
  await page.fill('#password', '你的密码');
  await page.click('#submit-btn');
  await page.waitForURL('/home');
});

2. 修改 playwright.config.ts 配置路径：

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // ...其他配置项
  globalSetup: './global.setup.ts', // 指定全局前置钩子文件
});

内容的提问来源于stack exchange，提问作者1449