From c5b68ae03ec57ec4de7dc240c19f133b796b28db Mon Sep 17 00:00:00 2001 From: mahula Date: Mon, 26 Feb 2024 22:46:36 +0100 Subject: [PATCH 1/6] use html reporter with typescript --- ...port.js => create-cucumber-html-report.ts} | 0 package-lock.json | 20 +++++++++++++++++++ package.json | 1 + 3 files changed, 21 insertions(+) rename cypress/{create-cucumber-html-report.js => create-cucumber-html-report.ts} (100%) diff --git a/cypress/create-cucumber-html-report.js b/cypress/create-cucumber-html-report.ts similarity index 100% rename from cypress/create-cucumber-html-report.js rename to cypress/create-cucumber-html-report.ts diff --git a/package-lock.json b/package-lock.json index 3e389b1..6c5a26b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "multiple-cucumber-html-reporter": "^3.6.2", "prettier": "^3.2.5", "ts-loader": "^9.5.1", + "tsx": "^4.7.1", "typescript": "^5.3.3", "vuepress": "^2.0.0-rc.8", "vuepress-plugin-search-pro": "^2.0.0-rc.26", @@ -14799,6 +14800,25 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true }, + "node_modules/tsx": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.1.tgz", + "integrity": "sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==", + "dev": true, + "dependencies": { + "esbuild": "~0.19.10", + "get-tsconfig": "^4.7.2" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, "node_modules/tty-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz", diff --git a/package.json b/package.json index d94eb54..5b7626a 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "multiple-cucumber-html-reporter": "^3.6.2", "prettier": "^3.2.5", "ts-loader": "^9.5.1", + "tsx": "^4.7.1", "typescript": "^5.3.3", "vuepress": "^2.0.0-rc.8", "vuepress-plugin-search-pro": "^2.0.0-rc.26", From 8635b48ead7ece988f2dafe10935aca1d6e8bfcb Mon Sep 17 00:00:00 2001 From: mahula Date: Mon, 26 Feb 2024 22:49:02 +0100 Subject: [PATCH 2/6] fix typo --- cypress/create-cucumber-html-report.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/create-cucumber-html-report.ts b/cypress/create-cucumber-html-report.ts index 1321172..05c0770 100644 --- a/cypress/create-cucumber-html-report.ts +++ b/cypress/create-cucumber-html-report.ts @@ -1,6 +1,6 @@ import report from 'multiple-cucumber-html-reporter' -const reportTitle = 'DreamMall End-to-End Test Report' +const reportTitle = 'End-to-End Test Report' report.generate({ jsonDir: './reports/json/', From da0e684f4d535a404656564b3e96c38ae7029362 Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Feb 2024 09:14:00 +0100 Subject: [PATCH 3/6] rename step definition directory --- cypress/e2e/features/Login.feature | 1 - cypress/e2e/{step_definitions => steps}/login.ts | 0 package.json | 2 +- 3 files changed, 1 insertion(+), 2 deletions(-) rename cypress/e2e/{step_definitions => steps}/login.ts (100%) diff --git a/cypress/e2e/features/Login.feature b/cypress/e2e/features/Login.feature index a991174..baafca7 100644 --- a/cypress/e2e/features/Login.feature +++ b/cypress/e2e/features/Login.feature @@ -1,7 +1,6 @@ Feature: Login As a user I want to sign in - I want to benoticed when sign in fails Background: Given The web browser is at the login page diff --git a/cypress/e2e/step_definitions/login.ts b/cypress/e2e/steps/login.ts similarity index 100% rename from cypress/e2e/step_definitions/login.ts rename to cypress/e2e/steps/login.ts diff --git a/package.json b/package.json index 5b7626a..153f0f4 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ }, "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true, - "stepDefinitions": "cypress/e2e/step_definitions/**/*.{js,ts}", + "stepDefinitions": "cypress/e2e/steps/**/*.{js,ts}", "json": { "enabled": true, "output": "cypress/reports/json/cucumber-report.json" From 91d607129e348b72e78e779559fd938e0035f56d Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Feb 2024 09:14:15 +0100 Subject: [PATCH 4/6] update readme file --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 76e986c..8c81e8b 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ IT4C Boilerplate for End-to-End Testing with Cypress utilizing Building this project requires `nodejs` (`>= v20`) and `npm`. -## Commands +### Commands | Command | Description | |----------------------------|-----------------------------------------------| @@ -41,6 +41,15 @@ npm install ``` +## Test Examples + +To showcase Cucumber feature tests, a simple login example on [the-internet](https://the-internet.herokuapp.com/) is written in the feature file [Login.feature](./cypress/e2e/features/Login.feature). +The `baseUrl` is set in [cypress.config.ts](https://github.com/IT4Change/boilerplate-e2e-cypress-cucumber/blob/8306614812c1011642c75ae34057ca66784cae4f/cypress.config.ts#L25) and the test steps are defined in [this step definition file](./cypress/e2e/ssteps/login.ts). + + +Testing against the demo website [the-internet](https://the-internet.herokuapp.com/) was chosen from the test practice recommendations of https://www.davidmello.com/best-websites-for-practicing-test-automation/. + + ## How to use as part of a project If you want to use this template as part of a larger project, e.g. in conjunction with a frontend also utilizing a boilerplate you cannot use the template mechanic provided by github for this repository. From e2315922b8c4866c21c4ec7b02dfc35ac66392f3 Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Feb 2024 09:17:55 +0100 Subject: [PATCH 5/6] use html reporter with typescript --- .github/workflows/e2e.run.tests.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/e2e.run.tests.yml b/.github/workflows/e2e.run.tests.yml index 08b51e4..ec38391 100644 --- a/.github/workflows/e2e.run.tests.yml +++ b/.github/workflows/e2e.run.tests.yml @@ -18,7 +18,7 @@ jobs: if: ${{ failure() && steps.e2e-run.conclusion == 'failure' }} run: | cd cypress/ - node create-cucumber-html-report.js + npx tsx create-cucumber-html-report.ts - name: Get PR number if: ${{ failure() && steps.e2e-run.conclusion == 'failure' }} From abb9ad61566655eb764ae8475880be807f580505 Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Feb 2024 09:22:22 +0100 Subject: [PATCH 6/6] use html reporter with typescript --- cypress/create-cucumber-html-report.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/create-cucumber-html-report.ts b/cypress/create-cucumber-html-report.ts index 05c0770..a2c0f7d 100644 --- a/cypress/create-cucumber-html-report.ts +++ b/cypress/create-cucumber-html-report.ts @@ -2,6 +2,7 @@ import report from 'multiple-cucumber-html-reporter' const reportTitle = 'End-to-End Test Report' +// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access report.generate({ jsonDir: './reports/json/', reportPath: './reports/e2e_html_report',