Typescript

[AdaskoTheBeAsT]

Hi,

do gherkin-testcafe support somewhat running tests written in typescript?
If it is possible do you have some sample configuration how it can be done?
Thanks

[Lukas-Kullmann]

Hi @AdaskoTheBeAsT,

unfortunately, it is not possible to use this package with Typescript. This is mainly due to the custom behavior of the cucumber functions (Given, When, Then, ...) that would need custom typings.

It seems to me, that it is not a big problem to add these and to get this package running with Typescript. I think I will add this in the future.

[AdaskoTheBeAsT]

Thanks - it really will be killer feature. I use testcafe with angular 6 and typescript is natural there ;) probably much more people use such combination.

[DennisJaamann]

@AdaskoTheBeAsT we are doing this at the moment and it's quite simple really.

The workaround is to just run tsc manually to compile your .ts into .js files and then provide them to gherkin-testcafe ;)

You will even have full code completion whenever you do npm install cucumber.

The problem is just that testcafe has its own built-in TypeScript compiler which you can't (yet) invoke with gherkin-tescafe.

[AdaskoTheBeAsT]

@DennisJaamann I try to setup that on CI env - do you have maybe some small sample?

[DennisJaamann]

@AdaskoTheBeAsT of course

Here you go:

package.json

{
  ...
  "scripts": {
    ...
    // Automatically invoke the typescript compiler before each cucumber run, specifying which config to use
    "precucumber": "tsc -p tsconfig.e2e.json",

    // The trick here is to instruct gherkin-testcafe to use the transpiled .js files straigh from dist/out-tsc
    "cucumber": "gherkin-testcafe --specs ./e2e/cucumber/**/*.feature --steps dist/out-tsc/e2e/cucumber/**/*.steps.js -b chrome -e",
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@types/node": "10.12.0",
    "gherkin-testcafe": "1.3.0",

    // The cucumber package contains .d.ts files for cucumber code completion in TypeScript
    "cucumber": "4.2.1",

    // Because we all want prettier code, right?
    "prettier": "1.14.3",
    "testcafe": "0.22.0",
    "testcafe-browser-provider-browserstack": "1.5.0",
    "testcafe-live": "0.1.3",
    "testcafe-reporter-html": "1.3.0",
    "typescript": "2.9.2"
  }
}

tsconfig.e2e.json (could be that this needs to be slightly altered with different params, but dont remember exacly which ones)

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "target": "es6",
    "lib": ["es2017", "dom"],
    "baseUrl": ".",
    "outDir": "dist/out-tsc/e2e",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "types": [
      "node"
    ]
  },
  "include": [
    "e2e/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "tmp"
  ]
}

e2e/cucumber/features
Add your feature files under this folder

e2e/cucumber/steps/some-page.ts

import { Given, When, Then } from 'cucumber';

import SomePageObject from '../po/some-page';

// Note: in here you are then just using 't' as a reference to the testcafe singleton
// Code completion on 't' is currently missing though :(
Given(/The user opens some page/, async t => {
    await SomePageObject.gotoPage();
});

When(/The user does something/, async t => {
    await SomePageObject.doSomething();
});

Then(/The user sees epic stuff/, async t => {
    await SomePageObject.isCorrect();
});

Works like a charm!

[AdaskoTheBeAsT]

@DennisJaamann Thanks a lot! : )

[Matju-M]

If you want typings I think you can add something of this sort in environment.ts file for example. This will eventually call the given in cucumber. Maybe it adds a bit of complexity, but you'll have all the typings, while also be able to do some custom logic, such as transformations.

import { Given as given } from "cucumber";

export function Given(pattern: RegExp | string, action: (t: TestController, args: string[]) => Promise<void>) {
	return given.call(this, pattern, action);
}

[eddiegroves]

Hi all

I see that this project now has a type definition which is great that augments cucumber. I am wondering how folks are using it?

Steps I've taken:

1. Installed @types/cucmber as the cucumber package no longer bundles types
2. Set "types": [ "gherkin-testcafe" ] in tsconfig.json to override the compiler finding cucumber's types and use the alternative typings instead.

The only issue I've found is in the typings file:

../../node_modules/gherkin-testcafe/index.d.ts:1:10 - error TS2305: Module '"cucumber"' has no exported member 'DataTable'.

import { DataTable } from "cucumber";

Updating this to import { TableDefinition } from "cucumber"; works

[Lukas-Kullmann]

Hey @eddiegroves,

thanks for letting us know. I published v2.3.2 with a fix.

Internally, we do not use typescript for writing e2e tests (yet). Until then, this is more of an unofficial feature.

[maximkoev]

Hi guys, I don't want create new issue, could u please help me debug my problem. I got typeError when try run tests. I use Ubuntu bionic.

here is my e2e json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "target": "es6",
    "lib": ["es2017", "dom"],
    "baseUrl": ".",
    "outDir": "./src/.dist/",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "types": [
      "node",
      "gherkin-testcafe"
    ]
  },
  "include": [
    "src/BDD/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "tmp"
  ]
}

[eddiegroves]

@maximkoev the error is not related to TypeScript - You've come across issue #36, there are suggested workarounds in that issue until the upstream issue is resolved (a new release of package c21e e.g v1.2.2)