使用 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"]');
    });
});

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

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

Answer 1

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

Answer 2

如果您有一堆具有通用设置步骤的测试，那么 Playwright Test Runner 具有一些预先设置好的功能，您可以使用它们在所有测试之前运行一次 (test.beforeAll) 或在每次测试之前运行一次 (test.beforeEach )。

相关文档在这里：https://playwright.dev/docs/test-intro#use-test-hooks

有类似的拆卸选项，所以它们可能是简单的，比如进入登录页面并登录（然后在最后退出？），或者更复杂的东西，比如设置数据并在测试后将其清除.

Answer 3

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

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 Article 了解。

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