网站搜索

typescript - 为什么我在 VS Code 中使用 Playwright 的 CodeceptJS 时,智能感知不起作用?


我正在尝试使用 TS 和 Playwright 为 CodeceptJS 创建一个练习环境,但出于某种原因,VSCodes 的智能感知拒绝显示任何建议。我可以手动输入代码,这没问题,也能正常工作,但我希望智能感知能够正常工作。

我严格按照 CodeceptJS 网站上的快速入门指南进行了以下步骤:

  1. 打开目录并执行命令 npx create-codeceptjs .,这会执行一个 npm init,然后安装 Codecept 和 Playwright 所需的所有包,最后执行 npx codeceptjs init 创建模板 TS 项目。
  2. 在这个项目中,我有以下文件:

tsconfig.json

{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "es2018",
    "lib": ["es2018", "DOM"],
    "esModuleInterop": true,
    "module": "commonjs",
    "strictNullChecks": false,
    "types": ["codeceptjs", "node"],
    "declaration": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules"]
}

steps.d.ts

/// <reference types='codeceptjs' />
type steps_file = typeof import('./steps_file');

declare namespace CodeceptJS {
  interface SupportObject { I: I, current: any }
  interface Methods extends Playwright {}
  interface I extends ReturnType<steps_file> {}
  namespace Translation {
    interface Actions {}
  }
}

steps_files.ts

// in this file you can append custom step methods to 'I' object

module.exports = function() {
  return actor({

    // Define custom steps here, use 'this' to access default methods of I.
    // It is recommended to place a general 'login' function here.
    
  });
}

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.5.0",
        "@types/node": "^20.0.0",
        "codeceptjs": "^3.4.1",
        "playwright": "^1.33.0",
        "ts-node": "^10.9.1",
        "typescript": "^5.0.4"
    }
}

登录测试.ts

Feature('login');

Scenario('test something',  ({ I }) => {

});

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);

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

export const config: CodeceptJS.MainConfig = {
  tests: './*_test.ts',
  output: './output',
  helpers: {
    Playwright: {
      url: 'https://www.saucedemo.com',
      show: true,
      browser: 'chromium'
    }
  },
  include: {
    I: './steps_file'
  },
  name: 'CodeceptJS'
}

在尝试从我的 login_test.ts 文件中 codeceptjs 的 I 对象调用 Playwright 的标准方法 amOnPage(); 时,所有这些都是从安装中获得的标准文件,我没有看到任何智能提示显示可能的方法。我在谷歌上查遍了,也找不到导致这种情况的原因,任何帮助都将不胜感激。

答案#1

这篇帖子有一个答案解决了我的问题。

替换: interface I extends ReturnType<steps_file> {}

使用:interface I extends ReturnType<steps_file>, WithTranslation<Methods> {}

Intellisense 在 Playwright、REST 中无法使用