如何在Playwright多测试文件中避免重复代码：根据设备类型自动调用page.tap()或page.click()

嘿，这个重复写tapOrClick函数的问题确实挺闹心的——不仅违反了DRY原则，以后要修改逻辑（比如加个等待元素可见的前置操作），还得挨个改所有测试文件，想想都头大。我给你几个实用的优化方案，你可以根据项目情况选：

方案1：提取为公共工具函数（最简单直接） #

把这个跨设备点击逻辑单独抽成一个工具函数，放到项目的公共工具文件里，所有测试文件直接导入复用就行。

步骤： #

1. 创建一个工具文件，比如tests/utils/playwright-helpers.js：

// playwright-helpers.js
async function tapOrClick(page, isMobile, selector) {
  if (isMobile) {
    await page.tap(selector);
  } else {
    await page.click(selector);
  }
}

module.exports = { tapOrClick };

2. 在测试文件里导入并使用：

const { tapOrClick } = require('./utils/playwright-helpers');

test("Example test", async ({ page, isMobile }) => {
  await tapOrClick(page, isMobile, 'click on the DOM');
  await tapOrClick(page, isMobile, 'click on the DOM 1');
});

test("Example test 2", async ({ page, isMobile }) => {
  await tapOrClick(page, isMobile, 'another click on the DOM');
});

这个方案的好处是零学习成本，改起来最快，适合小型项目或者快速迭代的场景。

方案2：自定义Playwright Fixture（最贴合Playwright生态） #

Playwright的Fixture机制可以让我们扩展测试上下文，把tapOrClick直接挂载到page对象上，或者作为一个独立的fixture提供，这样测试用例里用起来更丝滑。

步骤： #

1. 在playwright.config.js或者单独的fixture文件（比如tests/fixtures.js）里定义自定义fixture：

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

exports.test = base.extend({
  // 扩展page对象，添加tapOrClick方法
  page: async ({ page, isMobile }, use) => {
    page.tapOrClick = async (selector) => {
      if (isMobile) {
        await page.tap(selector);
      } else {
        await page.click(selector);
      }
    };
    await use(page);
  },

  // 或者单独提供一个tapOrClick fixture（二选一即可）
  // tapOrClick: async ({ page, isMobile }, use) => {
  //   const func = async (selector) => {
  //     if (isMobile) await page.tap(selector);
  //     else await page.click(selector);
  //   };
  //   await use(func);
  // }
});
exports.expect = base.expect;

2. 在测试文件里使用自定义的test对象：

const { test } = require('./fixtures');

test("Example test", async ({ page }) => {
  // 直接用page.tapOrClick，不用再传isMobile和page了
  await page.tapOrClick('click on the DOM');
  await page.tapOrClick('click on the DOM 1');
});

test("Example test 2", async ({ page }) => {
  await page.tapOrClick('another click on the DOM');
});

这个方案的优势是更符合Playwright的设计思路，测试代码更简洁，而且如果以后要扩展更多公共操作（比如跨设备的输入、滚动），都可以通过fixture统一管理，适合中大型项目。

方案3：扩展Page类（TypeScript项目首选） #

如果你的项目用TypeScript，还可以通过扩展Page的类型定义，让tapOrClick成为Page的原生方法，同时获得完整的类型提示：

1. 创建类型声明文件tests/types/playwright.d.ts：

import { Page } from '@playwright/test';

declare module '@playwright/test' {
  interface Page {
    tapOrClick: (selector: string) => Promise<void>;
  }
}

2. 然后在fixture里扩展Page对象（和方案2类似，但类型更友好）：

// fixtures.ts
import { test as base } from '@playwright/test';

export const test = base.extend({
  page: async ({ page, isMobile }, use) => {
    page.tapOrClick = async (selector) => {
      isMobile ? await page.tap(selector) : await page.click(selector);
    };
    await use(page);
  },
});
export const expect = base.expect;

3. 测试文件里使用时就能获得完美的类型提示：

import { test } from './fixtures';

test("Example test", async ({ page }) => {
  await page.tapOrClick('click on the DOM');
});

这个方案适合TS项目，能保证类型安全，避免拼写错误。

总结 #

• 小型JS项目：选方案1，快速解决问题；
• 中大型项目或追求代码优雅：选方案2，统一管理公共操作；
• TypeScript项目：选方案3，兼顾类型安全和代码简洁。

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