如何实现Playwright所有spec文件的测试用例前全局执行登录前置逻辑

方案1：自定义Playwright Fixture（官方推荐，无需重复写beforeEach） #

这是Playwright原生支持的逻辑复用方式，你可以扩展内置的test对象，添加自动执行的登录逻辑，所有使用该自定义test的测试文件都会自动触发登录前置，不需要手动调用。

首先新建自定义test文件 tests/custom-test.ts：

import { test as base } from '@playwright/test';
import { LoginAutomationCredentials } from './你的凭证配置文件路径';
import authenticator from '你的otp库路径';

// 扩展内置test的fixture
export const test = base.extend<{}, { autoLogin: void }>({
  // scope设为test代表每个测试用例都执行一次登录，设为worker代表每个测试进程只登录一次
  autoLogin: [async ({ page }, use) => {
    // 这里放你的登录逻辑
    await page.goto('/login');
    await page.click('text=Log in with Google account');
    await page.fill('id=identifierId', LoginAutomationCredentials.USER);
    await page.click('button[jsname="LgbsSe"]');
    await page.fill('input[type="password"]', LoginAutomationCredentials.PASSWORD);
    await page.click('button[jsname="LgbsSe"]');
    const otp = authenticator.generateToken(LoginAutomationCredentials.TOKEN);
    await page.fill('id=totpPin', otp);
    await page.click('button[jsname="LgbsSe"]');
    await use();
  }, { auto: true, scope: 'test' }] // auto设为true会自动执行，不需要在测试里手动引用
});

export { expect } from '@playwright/test';

之后所有需要登录的spec文件，不要导入默认的@playwright/test，而是导入上面的自定义test即可：

// 某个测试spec文件
import { test, expect } from './custom-test';

test.describe('Test', () => {
  // 不需要再写beforeEach，登录逻辑会自动执行
  it('Some description', async ({ page }) => {
    await page.goto('/foo');
    const dateFilter = await page.inputValue('input[placeholder="2011/03/02"]');
    expect(dateFilter).toBe('2021/12/07');
  });
});

方案2：封装独立登录函数，手动调用 #

如果你需要更灵活的控制（比如部分spec不需要登录），可以把登录逻辑封装为接收page参数的公共函数：

新建工具文件 utils/login.ts：

import { Page } from '@playwright/test';
import { LoginAutomationCredentials } from '../你的凭证配置文件路径';
import authenticator from '你的otp库路径';

export async function login(page: Page) {
  await page.goto('/login');
  await page.click('text=Log in with Google account');
  await page.fill('id=identifierId', LoginAutomationCredentials.USER);
  await page.click('button[jsname="LgbsSe"]');
  await page.fill('input[type="password"]', LoginAutomationCredentials.PASSWORD);
  await page.click('button[jsname="LgbsSe"]');
  const otp = authenticator.generateToken(LoginAutomationCredentials.TOKEN);
  await page.fill('id=totpPin', otp);
  await page.click('button[jsname="LgbsSe"]');
}

在需要登录的spec文件中直接导入调用即可：

import { test, expect } from '@playwright/test';
import { login } from '../utils/login';

test.describe('Test', () => {
  test.beforeEach(async ({ page }) => {
    await login(page);
  });

  it('Some description', async ({ page }) => {
    await page.goto('/foo');
    const dateFilter = await page.inputValue('input[placeholder="2011/03/02"]');
    expect(dateFilter).toBe('2021/12/07');
  });
});

优化提示：如果登录状态不需要每次测试都重新生成，可以使用Playwright的storageState功能，全局执行一次登录后把身份凭证缓存到本地，所有测试直接复用缓存的登录状态，大幅降低测试执行耗时。

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