如何在Playwright同个spec文件中复用已有测试用例？

在test.spec.ts文件中，我定义了一个describe块，其中包含一个测试用例。同一文件内的另一个describe块中，有一个测试用例需要先调用第一个describe块中的测试用例，再执行后续步骤。

代码示例（test.spec.ts） #

test.describe("Describe block 1", async () => {
 test("创建指定类型图表并验证正确性", async()=>{
  // step1: 创建图表（类型从环境变量获取）
  // step2: 验证图表创建正确
  // ...其他步骤
 })
})

test.describe("Describe block 2", async () => {
 test("基于新创建的图表执行后续验证", async()=> {
  // 先调用第一个describe块中的测试用例创建图表，再执行后续步骤
  // step2: 基于图表的其他验证操作
  // step3: ...
 })
})

需求背景 #

第一个describe块中的测试用例负责创建指定类型的图表（可通过环境变量传入类型）并验证其创建是否正确。第二个describe块中的该测试用例需要先创建新图表，再基于图表类型执行其他验证操作，确保不影响现有图表，拥有有效的测试样本。

现咨询：是否有高效的方法在Playwright中实现该需求？还有哪些可选方案？

在Playwright里，不建议直接调用另一个describe块的测试用例——测试用例设计的核心原则是独立、可重复执行。更合理的思路是把图表创建的核心逻辑抽离成可复用模块，以下是几种可行方案：

方案1：抽离公共函数（最推荐） #

把创建并验证图表的逻辑单独写成异步函数，两个测试用例按需调用即可：

// 抽离公共逻辑：创建指定类型图表并验证
async function createAndValidateChart(page: Page) {
  // 从环境变量获取图表类型，默认值兜底
  const chartType = process.env.CHART_TYPE || "default";
  
  // 执行创建流程
  await page.goto("/chart-creator");
  await page.selectOption("#chart-type", chartType);
  await page.click("#create-chart");
  
  // 验证图表创建成功
  await expect(page.locator("#chart-container")).toBeVisible();
}

test.describe("Describe block 1", async () => {
 test("创建指定类型图表并验证正确性", async({ page })=>{
  await createAndValidateChart(page);
 })
})

test.describe("Describe block 2", async () => {
 test("基于新创建的图表执行后续验证", async({ page })=> {
  // 先调用公共函数完成图表创建与验证
  await createAndValidateChart(page);
  
  // 执行后续专属验证步骤
  await expect(page.locator("#chart-export-btn")).toBeEnabled();
  await page.click("#chart-export-btn");
  await expect(page.locator("#export-success-modal")).toBeVisible();
  // ...其他步骤
 })
})

这种方式复用性强，测试用例保持独立，后续修改创建逻辑只需要维护这一个函数，维护成本极低。

方案2：使用测试前置钩子（beforeEach） #

如果第二个describe块下的所有测试用例都需要依赖已创建的图表，可以把创建逻辑放到该块的beforeEach钩子中：

async function createAndValidateChart(page: Page) {
  const chartType = process.env.CHART_TYPE || "default";
  await page.goto("/chart-creator");
  await page.selectOption("#chart-type", chartType);
  await page.click("#create-chart");
  await expect(page.locator("#chart-container")).toBeVisible();
}

test.describe("Describe block 1", async () => {
 test("创建指定类型图表并验证正确性", async({ page })=>{
  await createAndValidateChart(page);
 })
})

test.describe("Describe block 2", async () => {
 // 该块下所有测试用例执行前，都会自动创建并验证图表
 test.beforeEach(async({ page }) => {
  await createAndValidateChart(page);
 });

 test("验证图表导出功能", async({ page })=> {
  await expect(page.locator("#chart-export-btn")).toBeEnabled();
  // ...其他步骤
 })

 test("验证图表编辑功能", async({ page })=> {
  await page.click("#edit-chart-btn");
  await expect(page.locator("#chart-editor")).toBeVisible();
  // ...其他步骤
 })
})

适合第二个describe块有多个测试用例都依赖图表的场景，能大幅减少重复代码。

方案3：标记测试依赖（不推荐） #

Playwright本身没有原生的测试依赖机制，虽然可以通过变量标记或控制执行顺序模拟，但这种方式会让测试耦合性变强——一旦第一个测试失败，第二个测试也会受影响，而且会干扰Playwright的并行执行逻辑：

let chartCreated = false;

test.describe("Describe block 1", async () => {
 test("创建指定类型图表并验证正确性", async({ page })=>{
  // 创建并验证逻辑
  chartCreated = true;
 })
})

test.describe("Describe block 2", async () => {
 test("基于新创建的图表执行后续验证", async({ page })=> {
  // 跳过测试，直到第一个测试执行成功
  test.skip(!chartCreated, "需先执行创建图表的测试");
  // 后续步骤
 })
})

这种方式不推荐，完全违背了测试用例独立的原则，仅作为极端场景下的临时方案。

内容的提问来源于stack exchange，提问作者utkarsh-k