تايبسكريبت - لماذا لا تعمل ميزة الإكمال التلقائي (IntelliSense) في VS Code ل CodeceptJS باستخدام Playwright؟

أحاول إنشاء بيئة تدريبية لـ CodeceptJS باستخدام TypeScript و Playwright، لكن لسبب ما يرفض IntelliSense في VSCode عرض أي اقتراحات. يمكنني كتابة الكود يدويًا وهذا جيد ويعمل، لكني أود الحصول على 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"]
}

خطوات.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 {}
  }
}

ملفات_الخطوات.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 لإظهار الطرق الممكنة. لقد بحثت في كل مكان على جوجل ولا أستطيع العثور على سبب لحدوث ذلك، أي مساعدة ستكون موضع تقدير.

الإجابة رقم 1

هذا المنشور يحتوي على إجابة حلت المشكلة بالنسبة لي.

استبدل: interface I extends ReturnType<steps_file> {}

مع: interface I extends ReturnType<steps_file>, WithTranslation<Methods> {}

ميزة IntelliSense لا تعمل مع Playwright وREST