使用CommonJS时Playwright Fixture无IntelliSense自动补全问题

VS Code无法识别Playwright Fixture中settingsPage的类型，导致没有自动补全和类型提示，核心原因是JavaScript的弱类型特性让语言服务无法自动推断类型。以下是两种可行的解决方法：

方法一：用JSDoc增强JavaScript类型提示 #

不需要切换到TypeScript，通过添加JSDoc注解让VS Code识别类型：

1. 给SettingsPage类添加类型注解 #

在settings-page.js中补充JSDoc，明确类和方法的类型：

/**
 * @typedef {import('@playwright/test').Page} Page
 * @typedef {import('@playwright/test').Locator} Locator
 */

class SettingsPage {
  /**
   * @param {Page} page
   */
  constructor(page) {
    this.page = page;
  }

  /**
   * 设置指定选项
   * @param {string} settingName - 选项名称
   * @returns {Promise<Locator>} 返回选项对应的定位器
   */
  async setSetting(settingName) {
    const locator = this.page.locator(`#${settingName}`);
    await locator.check();
    return locator;
  }
}

module.exports = SettingsPage;

2. 给Fixture指定类型 #

修改fixture.js，用JSDoc声明扩展后的Test类型：

const base = require('@playwright/test');
const SettingsPage = require('./settings-page');

/**
 * @type {import('@playwright/test').TestType<{
 *   settingsPage: SettingsPage;
 * }>}
 */
exports.test = base.test.extend({
  settingsPage: async ({ page }, use) => {
    await use(new SettingsPage(page));
  },
});
exports.expect = base.expect;

3. 测试文件中指定参数类型 #

在test.js的测试函数参数上添加JSDoc：

const { test, expect } = require('./fixture');

test('basic test', async ({ /** @type {SettingsPage} */ settingsPage }) => {
  const settingToEnable = await settingsPage.setSetting('enabled');
  await expect(settingToEnable).toBeEnabled();
});

方法二：改用TypeScript（推荐） #

TypeScript的静态类型系统能彻底解决类型推断问题，步骤如下：

1. 转换SettingsPage为TypeScript #

settings-page.ts：

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

export default class SettingsPage {
  private page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async setSetting(settingName: string): Promise<Locator> {
    const locator = this.page.locator(`#${settingName}`);
    await locator.check();
    return locator;
  }
}

2. 定义Fixture的类型泛型 #

fixture.ts：

import { test as base, expect } from '@playwright/test';
import SettingsPage from './settings-page';

// 声明自定义Fixture的类型
type TestFixtures = {
  settingsPage: SettingsPage;
};

// 扩展基础Test类型
export const test = base.extend<TestFixtures>({
  settingsPage: async ({ page }, use) => {
    await use(new SettingsPage(page));
  },
});

export { expect };

3. 编写TypeScript测试文件 #

test.ts：

import { test, expect } from './fixture';

test('basic test', async ({ settingsPage }) => {
  const settingToEnable = await settingsPage.setSetting('enabled');
  await expect(settingToEnable).toBeEnabled();
});

完成以上修改后，VS Code就能自动识别settingsPage的类型，提供完整的方法补全和悬停类型提示。

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