如何使用Playwright Fixture自定义page.gotoDOM命令？

需求说明 #

需要封装Playwright的page.goto方法为page.gotoDOM，自动携带waitUntil: 'domcontentloaded'参数，避免每个测试重复编写该配置。当前尝试Fixture配置后报错，提示testDOM参数不足，无法运行，需先实现单文件可用，再扩展到全局。

原错误代码 #

// @ts-check
const base = require('@playwright/test');
const { test, expect } = require('@playwright/test');
const describe = test.describe;

const testDOM = base.test.extend({
    pageDOM: async ({ host, page }, use) => {
    await page.goto(host, { waitUntil: 'domcontentloaded'});
    await use(page);
  },
})
describe('Google', () => {
  test('Search box', async ({ page }) => {
    await page.goto('https://google.com/', { waitUntil: 'domcontentloaded'});
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });
  testDOM('Search box using testDOM', async ({ page }) => {
    await testDOM('https://google.com/'); //  <-- 此处调用方式错误
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });
})

错误原因 #

1. Fixture定义逻辑错误：尝试创建pageDOM Fixture时，错误地直接执行了page.goto，且host并非Playwright默认内置Fixture，同时未实现给page挂载自定义方法的核心需求。
2. 调用方式错误：将扩展后的testDOM测试函数当作goto方法调用，混淆了测试函数与页面方法的用途。

正确实现方案 #

1. 单文件内实现 #

通过扩展原生page Fixture，给page对象挂载自定义的gotoDOM方法：

// @ts-check
const { test: baseTest, expect } = require('@playwright/test');

// 扩展page Fixture，添加gotoDOM方法
const test = baseTest.extend({
  page: async ({ page }, use) => {
    // 封装自定义gotoDOM，默认带上domcontentloaded
    page.gotoDOM = async (url, options = {}) => {
      return page.goto(url, {
        waitUntil: 'domcontentloaded',
        ...options // 允许传入额外参数覆盖或补充配置
      });
    };
    await use(page);
  },
});

test.describe('Google 测试', () => {
  test('原生goto验证', async ({ page }) => {
    await page.goto('https://google.com/', { waitUntil: 'domcontentloaded' });
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });

  test('使用gotoDOM验证', async ({ page }) => {
    await page.gotoDOM('https://google.com/'); // 无需手动传入waitUntil
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });

  // 支持传入额外参数，比如超时时间
  test('gotoDOM带额外配置', async ({ page }) => {
    await page.gotoDOM('https://google.com/', { timeout: 10000 });
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });
});

2. 全局可用实现 #

在项目根目录创建fixtures.js文件，统一扩展Fixture：

// fixtures.js
const { test: baseTest } = require('@playwright/test');

exports.test = baseTest.extend({
  page: async ({ page }, use) => {
    page.gotoDOM = async (url, options = {}) => {
      return page.goto(url, {
        waitUntil: 'domcontentloaded',
        ...options
      });
    };
    await use(page);
  },
});
exports.expect = baseTest.expect;

在所有测试文件中，引入自定义的test和expect即可全局使用page.gotoDOM：

// 任意测试文件
const { test, expect } = require('./fixtures');

test.describe('全局gotoDOM测试', () => {
  test('访问Google', async ({ page }) => {
    await page.gotoDOM('https://google.com/');
    await expect(page.getByRole('combobox', { name: 'Search' })).toBeVisible();
  });
});

内容的提问来源于stack exchange，提问作者Michael Durrant