TypeScript-konfiguration

Du kan skriva tester med TypeScript för att få automatisk komplettering och typsäkerhet.

Du behöver ha tsx installerat i devDependencies, via:

npm

$ npm install tsx --save-dev

Yarn

$ yarn add tsx --dev

pnpm

$ pnpm add tsx --save-dev

WebdriverIO kommer automatiskt att upptäcka om dessa beroenden är installerade och kommer att kompilera din konfiguration och tester åt dig. Se till att ha en tsconfig.json i samma katalog som din WDIO-konfiguration.

Anpassad TSConfig

Om du behöver ange en annan sökväg för tsconfig.json, ställ in miljövariabeln TSCONFIG_PATH med din önskade sökväg, eller använd wdio-konfigurationens tsConfigPath-inställning.

Alternativt kan du använda miljövariabeln för tsx.

Typkontroll

Observera att tsx inte stöder typkontroll - om du vill kontrollera dina typer måste du göra detta i ett separat steg med tsc.

Ramverkskonfiguration

Din tsconfig.json behöver följande:

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types"]
    }
}

Undvik att importera webdriverio eller @wdio/sync explicit. WebdriverIO och WebDriver-typer är tillgängliga från var som helst när de har lagts till i types i tsconfig.json. Om du använder ytterligare WebdriverIO-tjänster, plugins eller devtools-automatiseringspaket, lägg även till dem i types-listan eftersom många tillhandahåller ytterligare typningar.

Ramverkstyper

Beroende på vilket ramverk du använder behöver du lägga till typerna för det ramverket i din tsconfig.json types-egenskap, samt installera dess typdefinitioner. Detta är särskilt viktigt om du vill ha typstöd för det inbyggda verifieringsbiblioteket expect-webdriverio.

Om du till exempel bestämmer dig för att använda Mocha-ramverket måste du installera @types/mocha och lägga till det på följande sätt för att ha alla typer globalt tillgängliga:

Mocha

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/mocha-framework"]
    }
}

Jasmine

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/jasmine-framework"]
    }
}

Cucumber

tsconfig.json

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/cucumber-framework"]
    }
}

Tjänster

Om du använder tjänster som lägger till kommandon i webbläsaromfånget måste du också inkludera dessa i din tsconfig.json. Om du till exempel använder @wdio/lighthouse-service, se till att lägga till det i types också, t.ex.:

tsconfig.json

{
    "compilerOptions": {
        "types": [
            "node",
            "@wdio/globals/types",
            "@wdio/mocha-framework",
            "@wdio/lighthouse-service"
        ]
    }
}

Att lägga till tjänster och rapporterare till din TypeScript-konfiguration stärker också typsäkerheten i din WebdriverIO-konfigurationsfil.

Typdefinitioner

När du kör WebdriverIO-kommandon är alla egenskaper vanligtvis typade så att du inte behöver hantera import av ytterligare typer. Det finns dock fall där du vill definiera variabler i förväg. För att säkerställa att dessa är typsäkra kan du använda alla typer som definieras i paketet @wdio/types. Om du till exempel vill definiera fjärralternativet för webdriverio kan du göra:

import type { Options } from '@wdio/types'

// Here is an example where you might want to import the types directly
const remoteConfig: Options.WebdriverIO = {
    hostname: 'http://localhost',
    port: '4444' // Error: Type 'string' is not assignable to type 'number'.ts(2322)
    capabilities: {
        browserName: 'chrome'
    }
}

// For other cases, you can use the `WebdriverIO` namespace
export const config: WebdriverIO.Config = {
  ...remoteConfig
  // Other configs options
}

Tips och råd

Kompilera & Lint

För att vara helt säker kan du överväga att följa bästa praxis: kompilera din kod med TypeScript-kompilatorn (kör tsc eller npx tsc) och ha eslint som körs på pre-commit hook.