For this purpose, we will use https:\/\/the-internet.herokuapp.com<\/a> as the target of our tests, as it offers a number of typical functionalities in the world of automation.<\/p>\n\n\n\n To carry out this project, we will need the following:<\/p>\n\n\n\n Our first step is to log into our GitHub account and create a new repository. We’ll give it a representative name, a short description, add a README and specify “Node” as the .gitignore template.<\/p>\n\n\n With our project created, it’s time to clone it in our IDE. To do this, we will deploy the “<> Code” menu of the repository and copy the repository address. <\/p>\n\n\n After doing this, we open a console and go to the directory where we want to locally host the repository and run the following (changing the repository address to the one we just created):<\/p>\n\n\n\n If the repository visibility is public, this will work fine. However, if we want to communicate with GitHub effectively and upload our local changes to the remote repository, we will need to use an ssh key.<\/p>\n\n\n\n To create a private key, run the following in a terminal:<\/p>\n\n\n\n This will generate a private key and a public key:<\/p>\n\n\n\n Now, copy the public key content:<\/p>\n\n\n\n In GitHub, click on our Avatar, select “Settings” and go to the “SSH and GPG keys” section. Once there, click on “New SSH Key”.<\/p>\n\n\n Paste the content of the public key into the text box and save the changes.<\/p>\n\n\n With this we will now be able to use our private key to connect to our GitHub account. To do this, we’ll configure our git client. We open a terminal and type the following (if we haven’t already done so):<\/p>\n\n\n\n Finally, we run the SSH Agent and add the private key by passing the path to the file where we have generated it:<\/p>\n\n\n\n With this, we have communication between our remote repository and our local repository.<\/p>\n\n\n\n In our local repository, we initialize a new NPM project.<\/p>\n\n\n\n Now install the necessary packages for our project:<\/p>\n\n\n\n Our Cypress generates a default configuration during the first run. Therefore, let’s open the Cypress interface:<\/p>\n\n\n\n Click on “Continue >” and select the “E2E Testing” option, which is set to “Not Configured”.<\/p>\n\n\n This should generate the default configuration files:<\/p>\n\n\n Now, or project files should look like this:<\/p>\n\n\n Done this, we define the place where we will store the step definition (Typescript code). We add the following to our So the file should now look like this:<\/p>\n\n\n\n We will now configure Typescript by creating the With these options we will tell typescript to transpile the Javascript code in the ES2021 version of ECMAScript, allowing us to use APIs such as It’s time to configure Cypress. Although it is not mandatory, we will start by creating a file to define the Cypress tasks. This way we will avoid declaring them directly in the configuration file and their modification will be much easier. For example, we will create a “dummy” task which we will call “stdout” and which will display a message on the console:<\/p>\n\n\n\n We now edit the configuration file We separately define the Now add, the esbuild bundler preprocessor:<\/p>\n\n\n\n We define the tasks. As we have created them in an external file, we import them and add them to the Finally, we add the following configuration to Instead of defining the environment variables in the configuration file, it is advisable to generate a Now it’s time to create our first test. Let’s start by creating the following folder structure:<\/p>\n\n\n\n Inside The next step is, as we can imagine, to implement the steps. <\/p>\n\n\n\n We create the The first step makes us visit the login URL:<\/p>\n\n\n\n The second step retrieves the environment variables The last step is to perform a couple of checks to make sure that the page is displayed correctly.<\/p>\n\n\n\n The complete file would be as follows:<\/p>\n\n\n\n If you use Visual Studio Code as an editor, it is highly recommended to support Cucumber with the CucumberAutoComplete extension. This extension allows, among other things, to navigate from step definition to implementation, so it can save a significant amount of time during development. You can get the extension here<\/a>.<\/p>\n\n\n Once installed, edit the . Everything should be ready to run our first test using Cypress, Typescript and Cucumber. Let’s see the result. Open a terminal and run the following:<\/p>\n\n\n\n Select the option “E2E Testing”.<\/p>\n\n\n Choose a browser (e.g. Chrome)<\/p>\n\n\n Click on login-form.feature to run the test and wait for the result.<\/p>\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
Creating the project on GitHub<\/h2>\n\n\n\n
![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_create_project_git.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_clone_repository-1.png\")
<\/figure>\n<\/div>\n\n\ngit clone git@github.com:GarciaDan\/cypress-ts-bdd.git<\/code><\/pre>\n\n\n\nssh-keygen -t ed25519 -C \"your_email@example.com\"<\/code><\/pre>\n\n\n\nGenerating public\/private ed25519 key pair.\nEnter file in which to save the key (\/home\/daniel\/.ssh\/id_ed25519):\nEnter passphrase (empty for no passphrase):\nEnter same passphrase again:\nYour identification has been saved in \/home\/daniel\/.ssh\/id_ed25519\nYour public key has been saved in \/home\/daniel\/.ssh\/id_ed25519.pub\nThe key fingerprint is:\nSHA256:+Fss5a3UMmvRY+t6EjbDJC9kVCnWtP0NxsToFsZAZFY your_email@example.com\nThe key's randomart image is:\n+--[ED25519 256]--+\n| *O=Eo. |\n| +ooo=o. |\n| o ..o..+ |\n| .+ . oo o |\n| .oS=.o . .|\n| ..+Oo+ |\n| ooB*oo |\n| =o=o |\n| ..+=. |\n+----[SHA256]-----+<\/code><\/pre>\n\n\n\ncat ~\/.ssh\/id_ed25519.pub\nssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIMkFnvZBzPiSscOcew1THpzm0URhwmNvP1Tfhlld\/KWQ your_email@example.com<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_save_ssh_key_in_github.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_save_ssh_key_in_github_2.png\")
<\/figure>\n<\/div>\n\n\ngit config --global user.name \"FIRST_NAME LAST_NAME\"\ngit config --global user.email \"your_email@example.com\"<\/code><\/pre>\n\n\n\neval \"$(ssh-agent -s)\"\n> Agent pid 59566\nssh-add ~\/.ssh\/id_ed25519<\/code><\/pre>\n\n\n\nCreating the node project<\/h2>\n\n\n\n
npm init<\/code><\/pre>\n\n\n\n\n
npm i -D cypress\nnpm i -D @badeball\/cypress-cucumber-preprocessor\nnpm i -D @bahmutov\/cypress-esbuild-preprocessor\nnpm i -D typescript\nnpm i -D @types\/node @types\/cypress-cucumber-preprocessor<\/code><\/pre>\n\n\n\npackage.json<\/code> file will now look like this:<\/p>\n\n\n\n{\n \"name\": \"cypress-ts-bdd\",\n \"version\": \"1.0.0\",\n \"description\": \"A simple Cypress+Typescript+BDD scaffolding project\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https:\/\/github.com\/GarciaDan\/cypress-ts-bdd.git\"\n },\n \"author\": \"Daniel Garcia\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https:\/\/github.com\/GarciaDan\/cypress-ts-bdd\/issues\"\n },\n \"homepage\": \"https:\/\/github.com\/GarciaDan\/cypress-ts-bdd#readme\",\n \"devDependencies\": {\n \"@badeball\/cypress-cucumber-preprocessor\": \"^17.1.1\",\n \"@bahmutov\/cypress-esbuild-preprocessor\": \"^2.2.0\",\n \"@types\/cypress-cucumber-preprocessor\": \"^4.0.1\",\n \"@types\/node\": \"^20.2.3\",\n \"cypress\": \"^12.12.0\",\n \"typescript\": \"^5.0.4\"\n }\n}<\/code><\/pre>\n\n\n\nCypress default configuration generation<\/h2>\n\n\n\n
npx cypress open<\/code><\/pre>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_first_execution-1024x720.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_main-1024x720.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_configuration_files-1024x720.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_new_files.png\")
<\/figure>\n<\/div>\n\n\npackage.json<\/code>:<\/p>\n\n\n\n \"cypress-cucumber-preprocessor\": {\n \"stepDefinitions\": [\n \"cypress\/e2e\/**\/*.ts\"\n ]\n }<\/code><\/pre>\n\n\n\n{\n \"name\": \"cypress-ts-bdd\",\n \"version\": \"1.0.0\",\n \"description\": \"A simple Cypress+Typescript+BDD scaffolding project\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https:\/\/github.com\/GarciaDan\/cypress-ts-bdd.git\"\n },\n \"author\": \"Daniel Garcia\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https:\/\/github.com\/GarciaDan\/cypress-ts-bdd\/issues\"\n },\n \"homepage\": \"https:\/\/github.com\/GarciaDan\/cypress-ts-bdd#readme\",\n \"devDependencies\": {\n \"@badeball\/cypress-cucumber-preprocessor\": \"^17.1.1\",\n \"@bahmutov\/cypress-esbuild-preprocessor\": \"^2.2.0\",\n \"@types\/cypress-cucumber-preprocessor\": \"^4.0.1\",\n \"@types\/node\": \"^20.2.3\",\n \"cypress\": \"^12.12.0\",\n \"typescript\": \"^5.0.4\"\n },\n \"cypress-cucumber-preprocessor\": {\n \"stepDefinitions\": [\n \"cypress\/e2e\/**\/*.ts\"\n ]\n }\n}<\/code><\/pre>\n\n\n\nTypescript configuration<\/h2>\n\n\n\n
tsconfig.json<\/code> file in the root directory of the project. In it we will include the following:<\/p>\n\n\n\n{\n \"compilerOptions\": {\n \"target\": \"ES2021\",\n \"lib\": [\"ES2021\", \"DOM\"],\n \"types\": [\"cypress\", \"node\"],\n \"moduleResolution\": \"node16\",\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true\n },\n \"include\": [\"**\/*.ts\"]\n}<\/code><\/pre>\n\n\n\narray.include()<\/code>, Object.entries()<\/code>, string.trimEnd()<\/code>, promise.any()<\/code>, \u2026.<\/p>\n\n\n\n\n
window<\/code> or document<\/code>.<\/li>\n\n\n\nnode16<\/code>” modules to support the latest versions of Typescript (from version 4.7 onwards).<\/li>\n\n\n\nesModuleInterop<\/code> and allowSyntheticDefaultImports<\/code> to avoid errors when importing certain modules (such as those that do not have a default export).<\/li>\n<\/ul>\n\n\n\nCypress Configuration<\/h2>\n\n\n\n
const tasks = {\n stdout: (...data: Array<any>) => {\n console.log(data)\n }\n};\n\nexport default tasks;<\/code><\/pre>\n\n\n\ncypress.config.ts<\/code>, which looks like this:<\/p>\n\n\n\nimport { defineConfig } from \"cypress\";\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents(on, config) {\n \/\/ implement node event listeners here\n },\n },\n});<\/code><\/pre>\n\n\n\nsetupNodeEvents<\/code> function and add the Cucumber preprocessor to it:<\/p>\n\n\n\nimport { defineConfig } from \"cypress\";\nimport { addCucumberPreprocessorPlugin } from \"@badeball\/cypress-cucumber-preprocessor\";\n\nasync function setupNodeEvents(\n on: Cypress.PluginEvents,\n config: Cypress.PluginConfigOptions\n): Promise<Cypress.PluginConfigOptions> {\n await addCucumberPreprocessorPlugin(on, config);\n return config;\n}\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents,\n },\n});<\/code><\/pre>\n\n\n\nimport { defineConfig } from \"cypress\";\nimport { addCucumberPreprocessorPlugin } from \"@badeball\/cypress-cucumber-preprocessor\";\nimport createEsbuildPlugin from \"@badeball\/cypress-cucumber-preprocessor\/esbuild\";\nimport createBundler from \"@bahmutov\/cypress-esbuild-preprocessor\/src\";\n\nasync function setupNodeEvents(\n on: Cypress.PluginEvents,\n config: Cypress.PluginConfigOptions\n): Promise<Cypress.PluginConfigOptions> {\n await addCucumberPreprocessorPlugin(on, config);\n on(\n \"file:preprocessor\",\n createBundler({ plugins: [createEsbuildPlugin(config)] })\n );\n return config;\n}\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents,\n },\n});<\/code><\/pre>\n\n\n\nsetupNodeEvents()<\/code> function:<\/p>\n\n\n\nimport { defineConfig } from \"cypress\";\nimport { addCucumberPreprocessorPlugin } from \"@badeball\/cypress-cucumber-preprocessor\";\nimport createEsbuildPlugin from \"@badeball\/cypress-cucumber-preprocessor\/esbuild\";\nimport createBundler from \"@bahmutov\/cypress-esbuild-preprocessor\/src\";\nimport tasks from \".\/cypress\/support\/tasks\";\n\nasync function setupNodeEvents(\n on: Cypress.PluginEvents,\n config: Cypress.PluginConfigOptions\n): Promise<Cypress.PluginConfigOptions> {\n await addCucumberPreprocessorPlugin(on, config);\n on(\n \"file:preprocessor\",\n createBundler({ plugins: [createEsbuildPlugin(config)] })\n );\n on(\"task\", tasks);\n return config;\n}\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents,\n },\n});<\/code><\/pre>\n\n\n\ndefineConfig.e2e<\/code> in cypress.config.ts<\/code>:<\/p>\n\n\n\n\n
specPattern<\/code>: tells Cypress where to look for (and with which pattern) the Gherkin language features.<\/li>\n\n\n\nsupportFile<\/code>: tells Cypress where to find the support file (e2e.ts).<\/li>\n\n\n\nbaseUrl<\/code>: sets the base URL of the project.<\/li>\n<\/ul>\n\n\n\nimport { defineConfig } from \"cypress\";\nimport { addCucumberPreprocessorPlugin } from \"@badeball\/cypress-cucumber-preprocessor\";\nimport createEsbuildPlugin from \"@badeball\/cypress-cucumber-preprocessor\/esbuild\";\nimport createBundler from \"@bahmutov\/cypress-esbuild-preprocessor\/src\";\nimport tasks from \".\/cypress\/support\/tasks\";\n\nasync function setupNodeEvents(\n on: Cypress.PluginEvents,\n config: Cypress.PluginConfigOptions\n): Promise<Cypress.PluginConfigOptions> {\n await addCucumberPreprocessorPlugin(on, config);\n on(\n \"file:preprocessor\",\n createBundler({ plugins: [createEsbuildPlugin(config)] })\n );\n on(\"task\", tasks);\n return config;\n}\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents,\n specPattern: \".\/cypress\/e2e\/**\/*.{feature,features}\",\n supportFile: \".\/cypress\/support\/e2e.ts\",\n\tbaseUrl: \"https:\/\/the-internet.herokuapp.com\"\n },\n});<\/code><\/pre>\n\n\n\nEnvironment variables<\/h2>\n\n\n\n
cypress.env.json<\/code> file and define them inside it. For example, we will define the username and password:<\/p>\n\n\n\n{\n \"USERNAME\": \"tomsmith\",\n \"PASSWORD\": \"SuperSecretPassword!\"\n}<\/code><\/pre>\n\n\n\nCreating a feature<\/h2>\n\n\n\n
\n
cypress\/e2e\/login\/features<\/code>, we create the login-form.feature file and add the following test:<\/p>\n\n\n\nFeature: User is able to sign in the web application\n Scenario: User logs in successfully\n Given the user navigates to login page\n When the user provides valid credentials\n Then the main page is displayed to the authenticated user<\/code><\/pre>\n\n\n\nlogin-form.cy.ts<\/code> file inside the cypress\/e2e\/login\/steps\/ folder<\/code> and implement the three steps we just used in the feature.<\/p>\n\n\n\nimport { Given, When, Then } from \"@badeball\/cypress-cucumber-preprocessor\";\n\nconst LOGIN_PAGE_URL = \"login\";\n\nGiven(\"the user navigates to login page\", () => {\n cy.visit(LOGIN_PAGE_URL);\n});<\/code><\/pre>\n\n\n\nUSERNAME <\/code>and PASSWORD <\/code>from cypress.env.json and uses them to fill in the login form, to press the login button afterwards:<\/p>\n\n\n\nWhen(\"the user provides valid credentials\", () => {\n const userName = Cypress.env(\"USERNAME\");\n const password = Cypress.env(\"PASSWORD\");\n\n cy.get(\"#username\").clear().type(userName);\n cy.get(\"#password\").clear().type(password);\n\n cy.get(\"button\").click();\n});<\/code><\/pre>\n\n\n\nThen(\"the main page is displayed to the authenticated user\", () => {\n cy.get('[class=\"flash success\"]').should(\"exist\").and(\"be.visible\");\n cy.get('a[href=\"\/logout\"]').should(\"exist\").and(\"be.visible\");\n});<\/code><\/pre>\n\n\n\nimport { Given, When, Then } from \"@badeball\/cypress-cucumber-preprocessor\";\n\nconst LOGIN_PAGE_URL = \"login\";\n\nGiven(\"the user navigates to login page\", () => {\n cy.visit(LOGIN_PAGE_URL);\n});\n\nWhen(\"the user provides valid credentials\", () => {\n const userName = Cypress.env(\"USERNAME\");\n const password = Cypress.env(\"PASSWORD\");\n\n cy.get(\"#username\").clear().type(userName);\n cy.get(\"#password\").clear().type(password);\n\n cy.get(\"button\").click();\n});\n\nThen(\"the main page is displayed to the authenticated user\", () => {\n cy.get('[class=\"flash success\"]').should(\"exist\").and(\"be.visible\");\n cy.get('a[href=\"\/logout\"]').should(\"exist\").and(\"be.visible\");\n});<\/code><\/pre>\n\n\n\nVSCode configuration with Cucumber support<\/h2>\n\n\n\n
![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_cucumber_autocomplete.png\")
<\/figure>\n<\/div>\n\n\nvscode\/settings.json<\/code> file and add the following:<\/p>\n\n\n\n{\n \"cucumberautocomplete.steps\": [\n \"cypress\/e2e\/*\/**\/steps\/*.ts\"\n ],\n \"cucumberautocomplete.strictGherkinCompletion\": false,\n \"cucumberautocomplete.smartSnippets\": true\n}<\/code><\/pre>\n\n\n\nTest Execution<\/h2>\n\n\n\n
npx cypress open<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_choose_test_type.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_browser_selection-1024x674.png\")
<\/figure>\n<\/div>\n\n\n
![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_select_feature-1024x553.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/danigarcia.org\/wp-content\/uploads\/2023\/05\/230522_cypress_success-1024x553.png\")
<\/figure>\n<\/div>\n\n\n