thebrainfamily / cypress-cucumber-typescript-example Goto Github PK
View Code? Open in Web Editor NEWExample of using Cypress with Cucumber and Typescript
Example of using Cypress with Cucumber and Typescript
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.
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)
Thanks in advance
Jeff
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 :)
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.