CodeceptJS+TypeScript中Playwright与REST模块智能提示失效问题

问题描述 #

在TypeScript环境下使用CodeceptJS编写自动化测试，添加额外模块并执行npx codeceptjs def命令后，JSONResponse、DbHelper、ChaiWrapper等第三方模块的Intellisense智能提示正常工作，但已安装的Playwright和REST核心模块的智能提示完全失效，重装相关模块也无法解决问题。项目配置文件如下：

codecept.conf.ts #

import { setHeadlessWhen, setCommonPlugins } from '@codeceptjs/configure';
// turn on headless mode when running with HEADLESS=true environment variable
// export HEADLESS=true && npx codeceptjs run
setHeadlessWhen(process.env.HEADLESS);
const env = require('dotenv').config({
path: '.env.test'
})

if (env.error && env.error.code === 'ENOENT') {
throw new Error('Please, recreate env.test file')
}

const base_url = process.env.URL
const currentBrowser = process.env.profile ?? 'chromium'; // 'firefox', 'webkit'

// enable all common plugins https://github.com/codeceptjs/configure#setcommonplugins
setCommonPlugins();

export const config: CodeceptJS.MainConfig = {
tests: './tests/*_test.ts',
output: './output',
helpers: {
ChaiWrapper: {
require: "codeceptjs-chai"
},
Playwright: {
url: base_url,
show: true,
browser: currentBrowser
},
REST: {
endpoint: base_url,
},
JSONResponse: {},
DbHelper: {
"require": "codeceptjs-dbhelper"
}
},
include: {
"I": "./common/custom_steps",
},
plugins: {
tryTo: {
enabled: true
}
},
name: 'test',
fullPromiseBased: false
}

package.json #

{
"name": "codeceptjs-tests",
"version": "0.1.0",
"private": true,
"scripts": {
"codeceptjs": "codeceptjs run --steps",
"codeceptjs:headless": "HEADLESS=true codeceptjs run --steps",
"codeceptjs:ui": "codecept-ui --app",
"codeceptjs:demo": "codeceptjs run --steps -c node_modules/@codeceptjs/examples",
"codeceptjs:demo:headless": "HEADLESS=true codeceptjs run --steps -c node_modules/@codeceptjs/examples",
"codeceptjs:demo:ui": "codecept-ui --app  -c node_modules/@codeceptjs/examples"
},
"devDependencies": {
"@codeceptjs/configure": "^0.10.0",
"@codeceptjs/examples": "^1.2.1",
"@codeceptjs/ui": "^0.4.7",
"@types/node": "^18.11.12",
"codeceptjs": "^3.3.7",
"playwright": "^1.28.1",
"ts-node": "^10.9.1",
"typescript": "^4.9.4"
},
"dependencies": {
"codeceptjs-chai": "^2.3.3",
"codeceptjs-dbhelper": "^1.2.2",
"database-js-mssql": "^0.3.0",
"database-js-mysql": "^1.1.3",
"dateformat": "^5.0.3",
"dotenv": "^16.0.3",
"faker": "^6.6.6",
"object-hash": "^3.0.0",
"randexp": "^0.5.3",
"random-date-generator": "^1.0.2",
"random-mobile-numbers": "^1.0.1",
"underscore": "^1.13.6",
"unique-names-generator": "^4.7.1"
}
}

解决方案 #

1. 检查自动生成的类型定义文件 #

执行npx codeceptjs def会生成codeceptjs.conf.d.ts文件，核心模块的类型可能未被正确注入：

• 打开项目根目录下的codeceptjs.conf.d.ts，确认Methods接口中包含Playwright和REST：

  declare namespace CodeceptJS {
    interface SupportObject { I: I }
    interface Methods extends Playwright, REST, JSONResponse, DbHelper, ChaiWrapper {}
    interface I extends WithTranslation<Methods> {}
    namespace Translation {
      interface Actions {}
    }
  }
  

• 如果缺少Playwright或REST，手动添加后重启IDE。

2. 调整TypeScript配置 #

确保TypeScript正确识别CodeceptJS的类型：

• 在项目根目录创建/修改tsconfig.json，确保配置包含以下内容：

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "commonjs",
      "esModuleInterop": true,
      "skipLibCheck": true,
      "strict": true,
      "types": ["codeceptjs", "node"]
    },
    "include": ["./**/*.ts", "./codeceptjs.conf.d.ts"]
  }
  

• 重点确认types字段包含codeceptjs，include字段覆盖自动生成的类型文件。

3. 重新生成类型定义并清理缓存 #

自动生成的文件可能存在缓存问题：

• 删除旧的codeceptjs.conf.d.ts文件
• 执行npx codeceptjs def --override强制重新生成类型定义
• 清理IDE缓存（比如VSCode按Ctrl+Shift+P选择"Reload Window"）

4. 验证版本兼容性 #

当前使用的CodeceptJS 3.3.7与Playwright 1.28.1可能存在兼容问题：

• 升级CodeceptJS到最新稳定版：npm install codeceptjs@latest --save-dev
• 同步升级Playwright依赖：npx playwright install --with-deps

5. 检查自定义步骤的类型声明 #

如果common/custom_steps.ts扩展了I对象，确保正确继承核心模块方法：

import { I as BaseI } from '../codeceptjs.conf';

declare module '../codeceptjs.conf' {
  export interface I extends BaseI {
    // 自定义方法声明
    customTestStep(): void;
  }
}

export const I: I = actor();

I.customTestStep = function() {
  // 自定义方法实现
};

避免覆盖或丢失Playwright/REST的方法类型。

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