跳到主要內容

參數化測試

簡介​

您可以選擇在測試層級或專案層級參數化測試。

參數化測試​

example.spec.ts
[
  { name: 'Alice', expected: 'Hello, Alice!' },
  { name: 'Bob', expected: 'Hello, Bob!' },
  { name: 'Charlie', expected: 'Hello, Charlie!' },
].forEach(({ name, expected }) => {
  // You can also do it with test.describe() or with multiple tests as long the test name is unique.
  test(`testing with ${name}`, async ({ page }) => {
    await page.goto(`https://example.com/greet?name=${name}`);
    await expect(page.getByRole('heading')).toHaveText(expected);
  });
});

Before 和 after 鉤子​

大多數時候，您應該將 beforeEach、beforeAll、afterEach 和 afterAll 鉤子放在 forEach 之外，以便鉤子僅執行一次

example.spec.ts
test.beforeEach(async ({ page }) => {
  // ...
});

test.afterEach(async ({ page }) => {
  // ...
});

[
  { name: 'Alice', expected: 'Hello, Alice!' },
  { name: 'Bob', expected: 'Hello, Bob!' },
  { name: 'Charlie', expected: 'Hello, Charlie!' },
].forEach(({ name, expected }) => {
  test(`testing with ${name}`, async ({ page }) => {
    await page.goto(`https://example.com/greet?name=${name}`);
    await expect(page.getByRole('heading')).toHaveText(expected);
  });
});

如果您希望每個測試都有鉤子，您可以將它們放在 describe() 內 - 這樣它們就會為每次迭代/每個單獨的測試執行

example.spec.ts
[
  { name: 'Alice', expected: 'Hello, Alice!' },
  { name: 'Bob', expected: 'Hello, Bob!' },
  { name: 'Charlie', expected: 'Hello, Charlie!' },
].forEach(({ name, expected }) => {
  test.describe(() => {
    test.beforeEach(async ({ page }) => {
      await page.goto(`https://example.com/greet?name=${name}`);
    });
    test(`testing with ${expected}`, async ({ page }) => {
      await expect(page.getByRole('heading')).toHaveText(expected);
    });
  });
});

參數化專案​

Playwright Test 支援同時執行多個測試專案。在以下範例中，我們將執行兩個具有不同選項的專案。

我們宣告選項 person 並在配置中設定值。第一個專案使用值 Alice 執行，第二個專案使用值 Bob 執行。

my-test.ts
import { test as base } from '@playwright/test';

export type TestOptions = {
  person: string;
};

export const test = base.extend<TestOptions>({
  // Define an option and provide a default value.
  // We can later override it in the config.
  person: ['John', { option: true }],
});

我們可以在測試中使用此選項，類似於 夾具 (fixtures)。

example.spec.ts
import { test } from './my-test';

test('test 1', async ({ page, person }) => {
  await page.goto(`/index.html`);
  await expect(page.locator('#node')).toContainText(person);
  // ...
});

現在，我們可以通過使用專案在多個配置中執行測試。

playwright.config.ts
import { defineConfig } from '@playwright/test';
import type { TestOptions } from './my-test';

export default defineConfig<TestOptions>({
  projects: [
    {
      name: 'alice',
      use: { person: 'Alice' },
    },
    {
      name: 'bob',
      use: { person: 'Bob' },
    },
  ]
});

我們也可以在夾具 (fixture) 中使用此選項。了解更多關於夾具 (fixtures)的資訊。

my-test.ts
import { test as base } from '@playwright/test';

export type TestOptions = {
  person: string;
};

export const test = base.extend<TestOptions>({
  // Define an option and provide a default value.
  // We can later override it in the config.
  person: ['John', { option: true }],

  // Override default "page" fixture.
  page: async ({ page, person }, use) => {
    await page.goto('/chat');
    // We use "person" parameter as a "name" for the chat room.
    await page.getByLabel('User Name').fill(person);
    await page.getByText('Enter chat room').click();
    // Each test will get a "page" that already has the person name.
    await use(page);
  },
});
注意

參數化專案行為在 1.18 版本中已變更。了解更多。

傳遞環境變數​

您可以使用環境變數從命令列配置測試。

例如，考慮以下需要使用者名稱和密碼的測試檔案。通常最好不要將您的密碼儲存在原始碼中，因此我們需要一種從外部傳遞密碼的方法。

example.spec.ts
test(`example test`, async ({ page }) => {
  // ...
  await page.getByLabel('User Name').fill(process.env.USER_NAME);
  await page.getByLabel('Password').fill(process.env.PASSWORD);
});

您可以使用在命令列中設定的秘密使用者名稱和密碼來執行此測試。

USER_NAME=me PASSWORD=secret npx playwright test

同樣地，配置文件也可以讀取通過命令列傳遞的環境變數。

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

export default defineConfig({
  use: {
    baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
  }
});

現在，您可以針對預備或生產環境執行測試

STAGING=1 npx playwright test

.env 檔案​

為了更輕鬆地管理環境變數，請考慮使用類似 .env 檔案的東西。以下範例使用 dotenv 套件直接在配置文件中讀取環境變數。

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

// Read from ".env" file.
dotenv.config({ path: path.resolve(__dirname, '.env') });

// Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve(__dirname, '..', 'my.env') });

export default defineConfig({
  use: {
    baseURL: process.env.STAGING === '1' ? 'http://staging.example.test/' : 'http://example.test/',
  }
});

現在，您只需編輯 .env 檔案即可設定您想要的任何變數。

# .env file
STAGING=0
USER_NAME=me
PASSWORD=secret

像往常一樣執行測試，您的環境變數應該會被讀取。

npx playwright test

通過 CSV 檔案建立測試​

Playwright 測試執行器在 Node.js 中執行，這表示您可以直接從檔案系統讀取檔案，並使用您偏好的 CSV 函式庫解析它們。

例如，請參閱此 CSV 檔案，在我們的範例中為 input.csv

"test_case","some_value","some_other_value"
"value 1","value 11","foobar1"
"value 2","value 22","foobar21"
"value 3","value 33","foobar321"
"value 4","value 44","foobar4321"

基於此，我們將通過使用來自 NPM 的 csv-parse 函式庫來產生一些測試

test.spec.ts
import fs from 'fs';
import path from 'path';
import { test } from '@playwright/test';
import { parse } from 'csv-parse/sync';

const records = parse(fs.readFileSync(path.join(__dirname, 'input.csv')), {
  columns: true,
  skip_empty_lines: true
});

for (const record of records) {
  test(`foo: ${record.test_case}`, async ({ page }) => {
    console.log(record.test_case, record.some_value, record.some_other_value);
  });
}