thebrainfamily / cypress-cucumber-typescript-example

Example of using Cypress with Cucumber and Typescript

cypress-cucumber-typescript-example

Example of using Cypress with Cucumber and TypeScript

All the configuration is in cypress/plugins/index.js

TypeScript step definitions are in cypress/integration/passWithTypescript

(I'm using the nonGlobalStepDefinitions configuration in the package.json )

You can also use our Cucumber plugin with TypeScript and webpack: https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/

cypress-cucumber-typescript-example's Issues

No type definitions, Webstorm support not working

Hi, not sure which repo is correct to report this to but giving a shot here!

According to https://www.npmjs.com/package/cypress-cucumber-preprocessor under Webstorm, there is an example of how to enable step navigation by using a specific regex pattern.

Using this repo as an example and modifying google.ts to read Given(/^I pass?/, () => { as per the instructions does not work though, as well as
import { Given } from "cypress-cucumber-preprocessor/steps"; results in TS7016 (no declaration found for module).

I'm not quite sure what setup the example on npmjs is using to get Webstorm working, so it'd be super interesting to see a working example of this perhaps in this typescript-example repo :)

Cypress detected that you returned a promise in a test, but also invoked one or more cy commands inside of that promise.

Seems to be caused by the inclusion of common/globalBefore.ts.
This warning occurs in the browser console when running tests (even if the test actually doesn't do an awful lot).

The issue can be seen in this PR: #8

Run

npm run test:open

Run the only feature test available. Look at the browser console output to see numerous examples

cypress_runner.js:179344 Cypress Warning: Cypress detected that you returned a promise in a test, but also invoked one or more cy commands inside of that promise.

The test title was:

  > Passing with TypeScript "before each" hook

While this works in practice, it's often indicative of an anti-pattern. You almost never need to return both a promise and also invoke cy commands.

Cy commands themselves are already promise like, and you can likely avoid the use of the separate Promise.

If your remove the common/globalBefore.ts file the warnings go away.

@focus not working as expected

I logged this issue before but did not provide enough detail about how to replicate it.

Firstly my understanding of the @Focus tag is that only that scenario will run and all other scenarios in all other features will not.

Taking this repo as an example is not ideal as it does not have enough features/scenarios. So I deleted the features in this repo and copied in the features from the original repo: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor

So I now have:

common
news
socialNetworks
All.features

I then renamed all the .js files to .ts.

I then included a tsconfig.json file in the root like this:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "types": ["node", "cypress"],
        "moduleResolution": "node",
        "lib": ["es2016", "dom", "dom.iterable"],
        "downlevelIteration": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noImplicitReturns": true,
        "esModuleInterop": true,
        "strict": false
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "cypress/**/*.ts"
    ]
}

I then added a cypress/support/index.d.ts file like this:

// in cypress/support/index.d.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

My package.json file ensured that we have the latest stuff:

{
  "name": "cypress-cucumber-typescript-example",
  "version": "1.0.0",
  "description": "Example of how to use Cypress with Cucumber and TypeScript",
  "main": "index.js",
  "scripts": {
    "test": "npx cypress run --spec \"**/*.features\""
  },
  "author": "Lukasz Gandecki",
  "license": "ISC",
  "dependencies": {
    "cypress": "^4.9.0",
    "cypress-cucumber-preprocessor": "^2.5.2",
    "tsify": "^4.0.1",
    "typescript": "^3.4.5"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

I then added this line to the top of cypress/integration/common/globalBefore.ts

/// <reference path="../../support/index.d.ts" />

Ran npm i to install everything.

I want to focus only on the first Google test like this:

Feature: The Google

  I want to open Google page

  @focus
  Scenario: Opening a Google network page
    Given I open Google page
    Then I see "Google" in the title

  Scenario: Different kind of opening
    Given I kinda open Google page
    Then I am very happy

When I run npm run test I find that
Scenario: Opening a Google network page runs
Scenario: Different kind of opening is pending
so far so good....however, all the other tests in news and socialNetworks also run

This seems wrong to me. I would only expect one scenario to run.

Cypress Failed to Start

Hi,

I cloned the repo, Installed the dependencies and when i run test, i'm getting an error Cypress failed to start. I have installed cypress globally, also tried running the test from ./node_modules/.bin/cypress open but no luck. Attached the screenshot for reference

Using the cucumber "World" object to maintain state

Are there are examples of the World object being used in conjunction with this package?

https://github.com/cucumber/cucumber-js/blob/master/docs/nodejs_example.md

Trying to run the sample code but stuck

Hello,

I'm new to Cypress and trying to run your example in order to work with Cypress-cucumber-typescript. I use IntelliJ Ultimate and configured/installed cucumber.js and cypress-cucumber-preprocessor.

When running 'cypress open' from node-module/.bin I get this
cypress-cucumber-preprocessor

Message: ENOTDIR invalid cwd /Users/radomj/cypress-cucumber-typescript-example-master/node_modules/.bin/cypress/integration

Stack trace:

Error: ENOTDIR invalid cwd /Users/radomj/cypress-cucumber-typescript-example-master/node_modules/.bin/cypress/integration
    at Glob._readdirError (/Users/radomj/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/glob/glob.js:592:21)
    at /Users/radomj/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/glob/glob.js:553:12
    at go$readdir$cb (/Users/radomj/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:162:14)
    at FSReqCallback.oncomplete (fs.js:159:23)

Please, help

Thanks in advance

Jeff

@focus ignored

One of the documented "out of the box" features of https://github.com/TheBrainFamily/cypress-cucumber-example is the use of the @focus smart tag. That just works without any configuration etc.

When I expanded my repo to use typescript (as per this example) then the @focus tags get ignored.