如何声明一次 Playwright 测试并多次使用它？

Question

我有许多常见的测试，我希望能够定义一次并以各种组合多次使用它们，以便测试不同的工作流程。理想情况下，我会将它们放入库中并将它们导入到我想要使用它们的地方。

// library.js

test('test1', async(){   
  await test.step('1', async()=>{});
  await test.step('2', async()=>{});
  await test.step('3', async()=>{});
})

test('test2', async(){   
  await test.step('1', async()=>{});
  await test.step('2', async()=>{});
})

test('test3', async(){
  await test.step('1', async()=>{});
  await test.step('2', async()=>{});
  await test.step('3', async()=>{});
  await test.step('4', async()=>{});

})

export test1, test2, test3;

然后我想导入并以各种组合使用它们......

// workflow.js

import {test1, test3} from 'library'

test.describe.serial('workflow1', ()=>{  

  test.beforeAll('', async({browser})=>{
    page = await browser.newPage();
    await page.goto('/');   })

  test1();

  test3();

})

有没有一种方法可以做到这一点而不依赖于自定义装置或页面对象？我最接近的是这个......

// library.js
const {expect,test} = require('@playwright/test')

export const homepage = async(page)=>{

  await test.step('1', async()=>{
    // do something with/on/in page
  });

  await test.step('2', async()=>{
    // do something with/on/in page
  });

  await test.step('3', async()=>{
    // do something with/on/in page
  });

}

// workflow.js

const {homepage] = require('library/library')

test.describe.serial('', ()=>{

  let page;

  test.beforeAll('', async({browser})=>{
    page = await browser.newPage();
    await page.goto('/');  // base URL as defined in config
  })

  test('', async()=>{
    await homepage(page);
  })
})

Answer 1

掌握您的确切用例有点困难。可能有一种非常明确的方法来概括您想要做的任何事情，但取而代之的是，这是您清理并工作的测试：

// workflows.test.js
import {expect, test} from "@playwright/test"; // ^1.42.1
import {test1, test2, test3} from "./library";

test.describe("workflow1", async () => {
  test("block 1", async ({page}) => {
    await test1(page);
    await test3(page);
  });
});

test.describe("workflow2", async () => {
  test("block 1", async ({page}) => {
    await test2(page);
    await test3(page);
  });
});

// library.js
import {expect, test} from "@playwright/test";

const p = console.log;

const test1 = async page => {
  await test.step("1", async () => {
    await page.goto("https://www.example.com", {
      waitUntil: "commit",
    });
    const h1 = page.getByRole("heading", {level: 1});
    await expect(h1).toHaveText("Example Domain");
  });
  await test.step("2", () => p("test 1 step 2"));
  await test.step("3", () => p("test 1 step 3"));
};

const test2 = async page => {
  await test.step("1", () => p("test 2 step 1"));
  await test.step("2", () => p("test 2 step 2"));
};

const test3 = async page => {
  await test.step("1", () => p("test 3 step 1"));
  await test.step("2", () => p("test 3 step 2"));
};

export {test1, test2, test3};

输出：

Running 2 tests using 1 worker

  ✓  1 pw.test.js:5:3 › workflow 1 › block 1 (60ms)
test 1 step 1
test 1 step 2
test 1 step 3
test 3 step 1
test 3 step 2
  ✓  2 pw.test.js:12:3 › workflow 2 › block 1 (27ms)
test 2 step 1
test 2 step 2
test 3 step 1
test 3 step 2

  2 passed (627ms)