Typescript typings?

[inakianduaga]

I'm new to CodeceptJS, just went through the install and got a short test running. I noticed no typescript definitions available, which is a bummer since there is no IDE autocompletion (and no compiler check) when writing tests using Typescript.

I'm using webdriverio and noticed there is a webdriver.d.ts file (for version 3.3.0). The docs of CodeceptJS show a lot of methods that supposedly are based on webdriverio helper, but I can't find a lot of those in the type definition above, so not sure if they were added to later versions or if they are actually part of CodeceptJS and not WebdriverIO.

At any rate, I just quickly threw an incomplete type file based on the dump from codeceptjs list

/// <reference path="../../../typings/webdriverio/webdriverio.d.ts" />

type ICodeceptCallback = (i: CodeceptJS.I) => void;

declare const Feature: (string: string) => void;
declare const Scenario: (string: string, callback: ICodeceptCallback) => void;
declare const Before: (callback: ICodeceptCallback) => void;
declare const After: (callback: ICodeceptCallback) => void;
declare const within: (selector: string, callback: Function) => void;

declare namespace CodeceptJS {
  export interface I extends WebdriverIO.Client<void> {
    amOnPage: (url: string) => any;
    rightClick: (locator: string) => any;
    fillField: (field: string, value: string) => any;
    appendField: (field: string, value: string) => any;
    selectOption: (select, option) => any;
    attachFile: (locator: string, pathToFile) => any;
    checkOption: (field: string, context) => any;
    grabTextFrom: (locator: string) => any;
    grabHTMLFrom: (locator: string) => any;
    grabValueFrom: (locator: string) => any;
    grabAttributeFrom: (locator: string, attr) => any;
    seeInTitle: (text: string) => any;
    dontSeeInTitle: (text: string) => any;
    grabTitle: () => any;
    see: (text: string, context) => any;
    dontSee: (text: string, context) => any;
    seeInField: (field: string, value: string) => any;
    dontSeeInField: (field: string, value: string) => any;
    seeCheckboxIsChecked: (field) => any;
    dontSeeCheckboxIsChecked: (field) => any;
    seeElement: (locator: string) => any;
    dontSeeElement: (locator: string) => any;
    seeElementInDOM: (locator: string) => any;
    dontSeeElementInDOM: (locator: string) => any;
    seeInSource: (text: string) => any;
    dontSeeInSource: (text: string) => any;
    seeNumberOfElements: (selector, num) => any;
    seeInCurrentUrl: (url) => any;
    dontSeeInCurrentUrl: (url) => any;
    seeCurrentUrlEquals: (url) => any;
    dontSeeCurrentUrlEquals: (url) => any;
    executeScript: (fn) => any;
    executeAsyncScript: (fn) => any;
    scrollTo: (locator: string, offsetX: number, offsetY: number) => any;
    moveCursorTo: (locator: string, offsetX: number, offsetY: number) => any;
    saveScreenshot: (fileName) => any;
    setCookie: (cookie) => any;
    clearCookie: (cookie) => any;
    clearField: (locator: string) => any;
    seeCookie: (name) => any;
    dontSeeCookie: (name) => any;
    grabCookie: (name) => any;
    acceptPopup: () => any;
    cancelPopup: () => any;
    seeInPopup: (text: string) => any;
    pressKey: (key) => any;
    resizeWindow: (width: number | 'maximize', height: number) => any;
    waitForElement: (locator: string, seconds?: number) => void,
    wait: (seconds: number) => void
  }
}

declare module "codeceptjs" {
    export = CodeceptJS;
}

which on a quick glance gets the job done when assigning the CodeceptJS.I type to I:

/// <reference path="./codeceptjs.d.ts" />

Feature('My First Test');

Scenario('test something', (I: CodeceptJS.I) => {
  I.amOnPage(`/`);
  I.saveScreenshot('debug.png');
  I.resizeWindow(1900, 1080);
  I.saveScreenshot('desktop.png');
});

Would be nice to get proper types for the library since it provides type safety and saves from having to look up the documentation

[DavertMik]

Thanks. I'm new to typescript typings and this looks like a really important feature
Could you provide a script that generate such file? Based on codeceptjs list?

[inakianduaga]

Could you provide a script that generate such file? Based on codeceptjs list?

Sorry but I really don't have time for that, specially since I actually had problems with CodeceptJS using webdriverIO+phantomjs, it was crashing randomly without throwing any exceptions, plus I couldn't get the helpers working because of ES6 modules import/export differences and whatnot. So I ended up switching to nightmareJS + mocha (where I'm also having problems getting tests working with mocha and ES6 generators :( )

[DavertMik]

Thanks! Now it is implemented with def command

[inakianduaga]

nice!

Some method param types like

wait: (sec) => any; 

could be improved like

wait: (sec: number) => any; 

[DavertMik]

Yes, however they are auto-generated from ES6 code which doesn't provide any details on typing. Probably they can be set through JSDoc but as to me they are pretty hard to parse.

[inakianduaga]

ah ok, missed that part

[michahell]

This is a really nice feature!
might it also be possible to add some typings for Feature, Before, Scenario etc.?

type ICodeceptCallback = (i: CodeceptJS.I, ...pageObjects) => void;

declare const actor: () => CodeceptJS.I;
declare const Feature: (string: string) => void;
declare interface Scenario {
	(name: string, callback: ICodeceptCallback) : void;
	only: (name: string, callback: ICodeceptCallback) => void;
}
declare const Before: (callback: ICodeceptCallback) => void;
declare const After: (callback: ICodeceptCallback) => void;
declare const within: (selector: string, callback: Function) => void;

declare namespace CodeceptJS {
	export interface I {
		defineTimeout: (timeouts) => any;
		amOnPage: (url) => any;
		... etc etc.
	}
}

declare module 'codeceptjs' {
	export = CodeceptJS;
}

I've slightly modified the generated .d.ts file

[clementohNZ]

For Codecept 3, there were inconsistencies between projects for me. Sometimes the type definition file wouldn't be generated, and even when it was, the types weren't loaded properly for my IDE to detect it. I fixed it by adding the steps.d.ts file manually where required and updating my tsconfig.json file to include the definition and test files manually:

steps.d.ts

/* eslint-disable quotes */
/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/no-empty-interface */

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

declare namespace CodeceptJS {
  interface SupportObject {
    I: I;
  }
  interface Methods extends Puppeteer {}
  interface I extends ReturnType<steps_file> {}
  namespace Translation {
    interface Actions {}
  }
}

tsconfig.spec.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "files": ["src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts", "steps.d.ts", "e2e/**/*.spec.ts"]
}