使用 Playwright 按顺序运行分组测试

Question

我将 Playwright 与 Nodejs 一起使用，并且将几个测试分组在一起，如下所示

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

test.describe('Add a simple invoice test', () => {
    test('01.Login & add an invoice', async ({ page }) => {
        await page.goto("https://someUrl.com");
        await page.fill('input[id="email"]', "someEmailAddress");
        await page.fill('input[ng-model="ctrl.user.password"]', "somePassword");
        await page.click('button[id="login-btn"]');
    });

    test('02.Add an invoice', async ({ page }) => {
        await page.click('[name="invoice"]');
        await page.click('button[id="addInvoiceButton"]');
        await page.click('a[ng-click="ctrl.goToAddInvoice()"]');
        await page.fill('#invoiceTitle', Math.random().toString(36).substring(7));
        await page.fill('#exampleInputAmount', "120");
        await page.click("#invoiceCategory")
        await page.fill("#invoiceCategory > input", "Car")
        await page.keyboard.press("Enter");
        await page.click('button[id="submitInvoiceButton"]');
    });
});

问题是这两个测试并行运行，而 02 依赖于 01，因为需要登录。

如何使 2 个分组测试在同一上下文中运行？

Answer 1

解决方案非常简单。它作为一个独立的测试执行，因为您在每个测试中传递 {page} ，因此如果您想对两个测试使用相同的上下文，您需要像下面这样修改测试。

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

test.describe('Add a simple invoice test', () => {
  let page: Page;
  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
  });

    test('01.Login & add an invoice', async () => { // do not pass page
        await page.goto("https://someUrl.com");
        await page.fill('input[id="email"]', "someEmailAddress");
        await page.fill('input[ng-model="ctrl.user.password"]', "somePassword");
        await page.click('button[id="login-btn"]');
    });

    test('02.Add an invoice', async () => { //do not pass page 
        await page.click('[name="invoice"]');
        await page.click('button[id="addInvoiceButton"]');
        await page.click('a[ng-click="ctrl.goToAddInvoice()"]');
        await page.fill('#invoiceTitle', Math.random().toString(36).substring(7));
        await page.fill('#exampleInputAmount', "120");
        await page.click("#invoiceCategory")
        await page.fill("#invoiceCategory > input", "Car")
        await page.keyboard.press("Enter");
        await page.click('button[id="submitInvoiceButton"]');
    });
});

这应该如您所期望的那样工作，您也可以参考Dzone 的相关文章。

注意：剧作家不推荐这种方法，但这个答案应该可以满足您的需求。

Answer 2

不幸的是，浏览器/操作系统具有全局状态，例如剪贴板内容，因此如果并行测试这些功能，您将遇到竞争条件。

如果所有测试都并行运行，您可能已经在 playwright 配置中启用了并行性：

const config: PlaywrightTestConfig = {
  fullyParallel: true,
  ...

这很好 - 您应该更快地执行测试，然后通过添加如下内容fullyParallel: true来选择退出在单个文件（或单个describe块）中连续运行测试：test.describe.configure({ mode: 'serial' });

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

test.describe('Add a simple invoice test', () => {
  test.describe.configure({ mode: 'serial' });

  test('01.Login & add an invoice', async ({ page }) => {
    await page.goto("https://someUrl.com");
    await page.fill('input[id="email"]', "someEmailAddress");
    await page.fill('input[ng-model="ctrl.user.password"]', "somePassword");
    await page.click('button[id="login-btn"]');
  });

  test('02.Add an invoice', async ({ page }) => {
    await page.click('[name="invoice"]');
    await page.click('button[id="addInvoiceButton"]');
    await page.click('a[ng-click="ctrl.goToAddInvoice()"]');
    await page.fill('#invoiceTitle', Math.random().toString(36).substring(7));
    await page.fill('#exampleInputAmount', "120");
    await page.click("#invoiceCategory")
    await page.fill("#invoiceCategory > input", "Car")
    await page.keyboard.press("Enter");
    await page.click('button[id="submitInvoiceButton"]');
  });
});

在剧作家文档中阅读更多内容：https://playwright.dev/docs/next/test-parallel#parallelize-tests-in-a-single-file

Answer 3

你不应该让你的测试相互依赖。例如，我会将公共登录提取到一个函数，并从两个测试中调用该函数。您甚至可以在第一个测试中添加一些断言来检查登录是否有效。但你不会在第二次这样做。