-
-
Notifications
You must be signed in to change notification settings - Fork 3
Setup
Mark edited this page May 13, 2023
·
30 revisions
Table of Contents
Dependencies:
- cypress
- @badeball/cypress-cucumber-preprocessor
- @bahmutov/cypress-esbuild-preprocessor
- cypress-cucumber-steps
Install with NPM:
npm install --save-dev cypress @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor cypress-cucumber-steps
Or with Yarn:
yarn add --dev cypress @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor cypress-cucumber-steps
npx cypress open
Click E2E Testing:
Create cypress/tsconfig.json
:
touch cypress/tsconfig.json
Update the config:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"target": "es2021",
"types": ["cypress"]
},
"include": ["../node_modules/cypress", "./**/*.ts"],
"exclude": ["node_modules"]
}
Follow cypress-cucumber-preprocessor's quick start.
If you're using TypeScript, update cypress.config.ts
:
import { defineConfig } from 'cypress';
import createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild';
export default defineConfig({
e2e: {
specPattern: 'cypress/e2e/**/*.feature',
async setupNodeEvents(on, config) {
await addCucumberPreprocessorPlugin(on, config);
on(
'file:preprocessor',
createBundler({ plugins: [createEsbuildPlugin(config)] })
);
return config;
},
},
// defaultCommandTimeout: 5000,
// retries: {
// runMode: 3,
// },
});
Or if you're using JavaScript, update cypress.config.js
:
const { defineConfig } = require('cypress');
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor');
const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild');
export default defineConfig({
e2e: {
specPattern: '**/*.feature',
async setupNodeEvents(on, config) {
await addCucumberPreprocessorPlugin(on, config);
on(
'file:preprocessor',
createBundler({ plugins: [createEsbuildPlugin(config)] })
);
return config;
},
},
// defaultCommandTimeout: 5000,
// retries: {
// runMode: 3,
// },
});
Create a directory for the common step definitions:
mkdir -p cypress/support/step_definitions/
If you're using TypeScript, create cypress/support/step_definitions/index.ts
:
echo "import 'cypress-cucumber-steps';" > cypress/support/step_definitions/index.ts
If you're using JavaScript, create cypress/support/step_definitions/index.js
:
echo "require('cypress-cucumber-steps');" > cypress/support/step_definitions/index.js
Now you can use cypress-cucumber-steps in your feature files:
touch cypress/e2e/example.feature
# cypress/e2e/example.feature
When I visit "https://example.com/"
Then I see text "Example Domain"