├── .gitignore ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ ├── passWithTypescript.feature │ └── passWithTypescript │ │ ├── google.ts │ │ └── someFile.ts ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | cypress/videos 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cypress-cucumber-typescript-example 2 | Example of using Cypress with Cucumber and TypeScript 3 | 4 | All the configuration is in [cypress/plugins/index.js](cypress/plugins/index.js) 5 | 6 | TypeScript step definitions are in [cypress/integration/passWithTypescript](cypress/integration/passWithTypescript) 7 | 8 | (I'm using the nonGlobalStepDefinitions configuration in the [package.json](package.json) ) 9 | 10 | You can also use our Cucumber plugin with TypeScript and webpack: [https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/](https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/) 11 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignoreTestFiles": "*.ts" 3 | } 4 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /cypress/integration/passWithTypescript.feature: -------------------------------------------------------------------------------- 1 | Feature: Passing with TypeScript 2 | Scenario: Hello again 3 | Given I pass 4 | -------------------------------------------------------------------------------- /cypress/integration/passWithTypescript/google.ts: -------------------------------------------------------------------------------- 1 | import { Given } from "cypress-cucumber-preprocessor/steps"; 2 | import { pass } from "./someFile"; 3 | 4 | const localFunctionWithTypes = (a: number, b: number): number => a + b; 5 | 6 | Given(/I pass/, () => { 7 | 8 | pass("hello world"); 9 | console.log(localFunctionWithTypes(1,2) === 2) 10 | }); 11 | -------------------------------------------------------------------------------- /cypress/integration/passWithTypescript/someFile.ts: -------------------------------------------------------------------------------- 1 | export const pass = (somethingToSay: String): void => { 2 | console.log("HELLO", somethingToSay) 3 | } 4 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | const cucumber = require("cypress-cucumber-preprocessor").default; 2 | const browserify = require("@cypress/browserify-preprocessor"); 3 | 4 | module.exports = (on) => { 5 | const options = { 6 | ...browserify.defaultOptions, 7 | typescript: require.resolve("typescript"), 8 | }; 9 | 10 | on("file:preprocessor", cucumber(options)); 11 | }; 12 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-cucumber-typescript-example", 3 | "version": "1.0.0", 4 | "description": "Example of how to use Cypress with Cucumber and TypeScript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "cypress run" 8 | }, 9 | "author": "Lukasz Gandecki", 10 | "license": "ISC", 11 | "dependencies": { 12 | "cypress": "^8.7.0", 13 | "cypress-cucumber-preprocessor": "^4.3.0", 14 | "typescript": "^4.4.4" 15 | }, 16 | "cypress-cucumber-preprocessor": { 17 | "nonGlobalStepDefinitions": true 18 | } 19 | } 20 | --------------------------------------------------------------------------------