ค้นหาเว็บไซต์

typescript - ทำไม intellisense ของฉันถึงไม่ทำงานใน VS Code สำหรับ CodeceptJS ที่ใช้ playwright?


ฉันกำลังพยายามสร้างสภาพแวดล้อมฝึกฝนสำหรับ CodeceptJS โดยใช้ TS และ Playwright แต่ด้วยเหตุผลบางอย่าง Intellisense ของ VSCodes ปฏิเสธที่จะแสดงคำแนะนำใด ๆ ฉันสามารถพิมพ์โค้ดด้วยตนเองได้และใช้งานได้ แต่ฉันต้องการให้ Intellisense ทำงานได้

ฉันได้ทำตามคู่มือเริ่มต้นอย่างรวดเร็วบนเว็บไซต์ 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"
    }
}

login_test.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'
}

ด้วยทั้งหมดนี้เป็นไฟล์มาตรฐานที่คุณได้รับจากการติดตั้ง เมื่อพยายามเรียกใช้เมธอดมาตรฐานจาก Playwright amOnPage(); จากอ็อบเจ็กต์ I ของ codeceptjs ในไฟล์ login_test.ts ของฉัน ฉันไม่ได้รับ intellisense ใด ๆ ที่จะแสดงเมธอดที่เป็นไปได้ ฉันได้ค้นหาทั่ว Google แล้วแต่ไม่สามารถหาสาเหตุที่เกิดเหตุการณ์นี้ได้ ความช่วยเหลือใด ๆ จะเป็นที่ชื่นชม

คำตอบ #1

โพสต์นี้มีคำตอบที่แก้ปัญหาให้ฉันได้

แทนที่: interface I extends ReturnType<steps_file> {}

ด้วย: interface I extends ReturnType<steps_file>, WithTranslation<Methods> {}

Intellisense ใช้งานไม่ได้สำหรับ Playwright, REST