如何在 playwright 中始终首先运行测试用例

Question

在我的剧作家框架中，我目前正在使用 storagestate，它将我的应用程序的登录详细信息存储在 json 文件中，之后所有其他测试用例都会使用此存储的信息。

我想知道我是否可以让这个登录测试用例在运行其他测试用例之前始终首先运行？

Answer 1

是的，您可以确保生成 storageState 的登录测试用例先于 Playwright 测试套件中的任何其他测试用例运行。这可以通过使用 Playwright 的配置和测试生命周期功能来完成。 以下是如何在 TypeScript 中实现前面提到的解决方案。

1。在 TypeScript 中使用

globalSetup

文件：

创建

global-setup.ts

文件：

import { chromium, FullConfig } from '@playwright/test';

const globalSetup = async (config: FullConfig) => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Perform your login steps here
  await page.goto('https://your-app-url.com/login');
  await page.fill('input[name="username"]', 'your-username');
  await page.fill('input[name="password"]', 'your-password');
  await page.click('text="Login"');
  
  // Save storage state to a file
  await context.storageState({ path: 'storageState.json' });
  
  await browser.close();
};

export default globalSetup;

更新您的

playwright.config.ts

：

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  // Other configuration options...
  globalSetup: require.resolve('./global-setup'),
  use: {
    storageState: 'storageState.json',
  },
};

export default config;

通过此设置，

globalSetup

脚本将在所有测试之前运行，确保在执行任何其他测试用例之前生成并保存存储状态。

2。在 TypeScript 测试文件中使用

beforeAll

挂钩：

示例：

import { test, BrowserContext } from '@playwright/test';
import * as fs from 'fs';

test.beforeAll(async ({ browser }) => {
  if (!fs.existsSync('storageState.json')) {
    const context: BrowserContext = await browser.newContext();
    const page = await context.newPage();
    
    // Perform your login steps here
    await page.goto('https://your-app-url.com/login');
    await page.fill('input[name="username"]', 'your-username');
    await page.fill('input[name="password"]', 'your-password');
    await page.click('text="Login"');
    
    // Save storage state to a file
    await context.storageState({ path: 'storageState.json' });
    
    await context.close();
  }
});

test.use({ storageState: 'storageState.json' });

test('Your actual test', async ({ page }) => {
  // Your test code here
  await page.goto('https://your-app-url.com/dashboard');
  // Assertions...
});

3.在 TypeScript 中使用带有

test.describe.serial

的专用测试文件：

创建

login.test.ts

文件：

import { test } from '@playwright/test';

test.describe.serial('Login and setup', () => {
  test('Login and save storage state', async ({ browser }) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    
    // Perform your login steps here
    await page.goto('https://your-app-url.com/login');
    await page.fill('input[name="username"]', 'your-username');
    await page.fill('input[name="password"]', 'your-password');
    await page.click('text="Login"');
    
    // Save storage state to a file
    await context.storageState({ path: 'storageState.json' });
    
    await context.close();
  });
});

在您的其他测试文件中，使用存储状态：

import { test } from '@playwright/test';

test.use({ storageState: 'storageState.json' });

test('Your actual test', async ({ page }) => {
  // Your test code here
  await page.goto('https://your-app-url.com/dashboard');
  // Assertions...
});

TypeScript 配置

确保您的 TypeScript 配置 (

tsconfig.json

) 已设置为正确编译 TypeScript 文件。通常，您的剧作家

tsconfig.json

可能如下所示：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "dist"
  },
  "include": ["**/*.ts"]
}

运行测试

确保您的 TypeScript 文件已编译，或者如果您使用的是 Playwright 的

playwright/test

包等设置，您可以使用 Playwright 的 CLI 直接运行测试，它将为您处理 TypeScript 编译：

npx playwright test

结论

在 TypeScript 中，您可以使用与 JavaScript 中相同的方法，只需进行少量语法调整。您可以使用

globalSetup

文件、

beforeAll

挂钩，或者组织测试以确保登录进程首先运行并在执行任何其他测试之前保存存储状态。