如何在Playwright中创建可复用命令？（以日历操作为例）

你可以通过几种方式实现日历操作逻辑的复用，满足不同测试用例传入不同日期/年份的需求：

1. 封装为独立工具函数（最直接的方式） #

把日历操作的核心逻辑抽成单独的函数，放在工具文件里，各个测试文件直接导入调用即可。

示例工具文件（比如calendar-helpers.js）：

// calendar-helpers.js
export async function pickDate(page, targetDate) {
  // 点击打开日历组件
  await page.click('#calendar-btn');
  
  // 解析目标日期的年、月、日（注意JS的Date月份是0基）
  const year = targetDate.getFullYear();
  const month = targetDate.getMonth() + 1;
  const day = targetDate.getDate();

  // 选择年份（假设日历用下拉框选年份）
  await page.selectOption('[data-testid="year-select"]', year.toString());
  // 选择月份
  await page.selectOption('[data-testid="month-select"]', month.toString());
  // 点击对应日期
  await page.click(`[data-day="${day}"]`);
}

在测试文件中调用：

// order-test.spec.js
import { test } from '@playwright/test';
import { pickDate } from './calendar-helpers';

test('选择下单日期2024年6月10日', async ({ page }) => {
  await page.goto('/order-page');
  await pickDate(page, new Date(2024, 5, 10)); // 5对应6月
});

test('选择预约日期2025年1月1日', async ({ page }) => {
  await page.goto('/booking-page');
  await pickDate(page, new Date(2025, 0, 1)); // 0对应1月
});

2. 扩展Playwright上下文添加自定义命令 #

如果想让代码更贴合Playwright的使用习惯，可以给page对象添加自定义命令，这样测试里直接用page.pickDate(...)调用。

先创建扩展测试上下文的文件（比如test-extend.js）：

// test-extend.js
import { test as base } from '@playwright/test';

export const test = base.extend({
  page: async ({ page }, use) => {
    // 给page对象添加自定义日历选择命令
    page.pickDate = async (targetDate) => {
      await page.click('#calendar-btn');
      const year = targetDate.getFullYear();
      const month = targetDate.getMonth() + 1;
      const day = targetDate.getDate();
      
      await page.selectOption('[data-testid="year-select"]', year.toString());
      await page.selectOption('[data-testid="month-select"]', month.toString());
      await page.click(`[data-day="${day}"]`);
    };
    await use(page);
  },
});
export { expect } from '@playwright/test';

在测试文件中使用扩展后的测试对象：

// booking-test.spec.js
import { test } from './test-extend';

test('使用自定义命令选择预约日期', async ({ page }) => {
  await page.goto('/booking-page');
  await page.pickDate(new Date(2024, 11, 25)); // 11对应12月
});

注意事项 #

• 上述示例是基于常见的下拉选择年月+点击日期的日历结构，实际需要根据你项目里的日历DOM结构调整操作逻辑（比如弹窗式日历、左右切换月份的按钮等）
• 可以给工具函数添加参数，支持更多自定义场景（比如是否确认日期选择、处理禁用日期的逻辑）

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