From 1a01c7df83f92c826c2378bba9d64023d770db1a Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Sep 2022 15:22:08 +0200 Subject: [PATCH 01/10] change cypress command in package.json to make "cypress open" available for local testing --- e2e-tests/cypress/tests/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e-tests/cypress/tests/package.json b/e2e-tests/cypress/tests/package.json index a9979725e..a6f817503 100644 --- a/e2e-tests/cypress/tests/package.json +++ b/e2e-tests/cypress/tests/package.json @@ -14,7 +14,7 @@ } }, "scripts": { - "cypress": "cypress run", + "cypress-e2e": "cypress run", "lint": "eslint --max-warnings=0 --ext .js,.ts ." }, "dependencies": { From bb7e8d2b3de11c590a16800af83142fc48aaa264 Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 27 Sep 2022 15:51:05 +0200 Subject: [PATCH 02/10] set default command wait timout higher in cypress configuration --- e2e-tests/cypress/tests/cypress.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/e2e-tests/cypress/tests/cypress.config.ts b/e2e-tests/cypress/tests/cypress.config.ts index 815394c5e..ad6a8d7de 100644 --- a/e2e-tests/cypress/tests/cypress.config.ts +++ b/e2e-tests/cypress/tests/cypress.config.ts @@ -32,6 +32,7 @@ export default defineConfig({ excludeSpecPattern: "*.js", baseUrl: "http://localhost:3000", chromeWebSecurity: false, + defaultCommandTimeout: 10000, supportFile: "cypress/support/index.ts", viewportHeight: 720, viewportWidth: 1280, From 480378a18267b6a026e7cebcb38d11e23417291c Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 28 Sep 2022 10:38:46 +0200 Subject: [PATCH 03/10] fix language dependency of some selectors in login and user profile tests --- e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.ts | 4 ++-- e2e-tests/cypress/tests/cypress/e2e/models/ProfilePage.ts | 8 ++++---- .../src/components/Inputs/InputPasswordConfirmation.vue | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.ts b/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.ts index a16b93a11..9a0df62ee 100644 --- a/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.ts +++ b/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.ts @@ -2,8 +2,8 @@ export class LoginPage { // selectors - emailInput = "#Email-input-field"; - passwordInput = "#Password-input-field"; + emailInput = "input[type=email]"; + passwordInput = "input[type=password]"; submitBtn = "[type=submit]"; emailHint = "#vee_Email"; passwordHint = "#vee_Password"; diff --git a/e2e-tests/cypress/tests/cypress/e2e/models/ProfilePage.ts b/e2e-tests/cypress/tests/cypress/e2e/models/ProfilePage.ts index b280a0b2a..0532a7ff8 100644 --- a/e2e-tests/cypress/tests/cypress/e2e/models/ProfilePage.ts +++ b/e2e-tests/cypress/tests/cypress/e2e/models/ProfilePage.ts @@ -4,8 +4,8 @@ export class ProfilePage { // selectors openChangePassword = "[data-test=open-password-change-form]"; oldPasswordInput = "#password-input-field"; - newPasswordInput = "#New-password-input-field"; - newPasswordRepeatInput = "#Repeat-new-password-input-field"; + newPasswordInput = "#new-password-input-field"; + newPasswordRepeatInput = "#repeat-new-password-input-field"; submitNewPasswordBtn = "[data-test=submit-new-password-btn]"; goto() { @@ -19,12 +19,12 @@ export class ProfilePage { } enterNewPassword(password: string) { - cy.get(this.newPasswordInput).clear().type(password); + cy.get(this.newPasswordInput).find("input").clear().type(password); return this; } enterRepeatPassword(password: string) { - cy.get(this.newPasswordRepeatInput).clear().type(password); + cy.get(this.newPasswordRepeatInput).find("input").clear().type(password); return this; } diff --git a/frontend/src/components/Inputs/InputPasswordConfirmation.vue b/frontend/src/components/Inputs/InputPasswordConfirmation.vue index 3209018c3..56d58d9ad 100644 --- a/frontend/src/components/Inputs/InputPasswordConfirmation.vue +++ b/frontend/src/components/Inputs/InputPasswordConfirmation.vue @@ -29,6 +29,7 @@ required: true, samePassword: value.password, }" + id="repeat-new-password-input-field" :label="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')" :immediate="true" :name="createId(register ? $t('form.passwordRepeat') : $t('form.password_new_repeat'))" From e7207da9ac56442068f8d3189f6ffaf79df5e7e4 Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 28 Sep 2022 10:38:46 +0200 Subject: [PATCH 04/10] fix language dependency of some selectors in login and user profile tests --- e2e-tests/cypress/tests/cypress/e2e/models/Toasts.ts | 3 +++ .../cypress/support/step_definitions/common_steps.ts | 10 +++++----- .../user_profile_change_password_steps.ts | 10 +++++----- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/e2e-tests/cypress/tests/cypress/e2e/models/Toasts.ts b/e2e-tests/cypress/tests/cypress/e2e/models/Toasts.ts index b2198bc8d..aabd0a45e 100644 --- a/e2e-tests/cypress/tests/cypress/e2e/models/Toasts.ts +++ b/e2e-tests/cypress/tests/cypress/e2e/models/Toasts.ts @@ -2,6 +2,9 @@ export class Toasts { // selectors + toastSlot = ".b-toaster-slot"; + toastTypeSuccess = ".b-toast-success"; + toastTypeError = ".b-toast-danger"; toastTitle = ".gdd-toaster-title"; toastMessage = ".gdd-toaster-body"; } diff --git a/e2e-tests/cypress/tests/cypress/support/step_definitions/common_steps.ts b/e2e-tests/cypress/tests/cypress/support/step_definitions/common_steps.ts index 439974cda..f45358f3c 100644 --- a/e2e-tests/cypress/tests/cypress/support/step_definitions/common_steps.ts +++ b/e2e-tests/cypress/tests/cypress/support/step_definitions/common_steps.ts @@ -25,11 +25,11 @@ Then("the user is logged in with username {string}", (username: string) => { Then("the user cannot login", () => { const toast = new Toasts(); - cy.get(toast.toastTitle).should("contain.text", "Error!"); - cy.get(toast.toastMessage).should( - "contain.text", - "No user with this credentials." - ); + cy.get(toast.toastSlot).within(() => { + cy.get(toast.toastTypeError); + cy.get(toast.toastTitle).should("be.visible"); + cy.get(toast.toastMessage).should("be.visible"); + }); }); // diff --git a/e2e-tests/cypress/tests/cypress/support/step_definitions/user_profile_change_password_steps.ts b/e2e-tests/cypress/tests/cypress/support/step_definitions/user_profile_change_password_steps.ts index cbe851f02..5396b66bb 100644 --- a/e2e-tests/cypress/tests/cypress/support/step_definitions/user_profile_change_password_steps.ts +++ b/e2e-tests/cypress/tests/cypress/support/step_definitions/user_profile_change_password_steps.ts @@ -24,9 +24,9 @@ And("the user submits the password form", () => { When("the user is presented a {string} message", (type: string) => { const toast = new Toasts(); - cy.get(toast.toastTitle).should("contain.text", "Success"); - cy.get(toast.toastMessage).should( - "contain.text", - "Your password has been changed." - ); + cy.get(toast.toastSlot).within(() => { + cy.get(toast.toastTypeSuccess); + cy.get(toast.toastTitle).should("be.visible"); + cy.get(toast.toastMessage).should("be.visible"); + }); }); From 2a82faff47fbbb83886524d48b65cf74d31f5ccf Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 28 Sep 2022 13:01:27 +0200 Subject: [PATCH 05/10] fix error caused by missing files regarding rgistration tests --- .../cypress/e2e/User.Registration.feature | 13 ++++++ .../cypress/e2e/models/RegistrationPage.ts | 42 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 e2e-tests/cypress/tests/cypress/e2e/User.Registration.feature create mode 100644 e2e-tests/cypress/tests/cypress/e2e/models/RegistrationPage.ts diff --git a/e2e-tests/cypress/tests/cypress/e2e/User.Registration.feature b/e2e-tests/cypress/tests/cypress/e2e/User.Registration.feature new file mode 100644 index 000000000..9361d2b84 --- /dev/null +++ b/e2e-tests/cypress/tests/cypress/e2e/User.Registration.feature @@ -0,0 +1,13 @@ +Feature: User registration + As a user + I want to register to create an account + + @skip + Scenario: Register successfully + Given the browser navigates to page "/register" + When the user fills name and email "Regina" "Register" "regina@register.com" + And the user agrees to the privacy policy + And the user submits the registration form + Then the user can use a provided activation link + And the user can set a password "Aa12345_" + And the user can login with the credentials "regina@register.com" "Aa12345_" diff --git a/e2e-tests/cypress/tests/cypress/e2e/models/RegistrationPage.ts b/e2e-tests/cypress/tests/cypress/e2e/models/RegistrationPage.ts new file mode 100644 index 000000000..27a9cb8cc --- /dev/null +++ b/e2e-tests/cypress/tests/cypress/e2e/models/RegistrationPage.ts @@ -0,0 +1,42 @@ +/// + +export class RegistrationPage { + // selectors + firstnameInput = "#registerFirstname"; + lastnameInput = "#registerLastname"; + emailInput = "#Email-input-field"; + checkbox = "#registerCheckbox"; + submitBtn = "[type=submit]"; + + RegistrationThanxHeadline = ".test-message-headline"; + RegistrationThanxText = ".test-message-subtitle"; + + goto() { + cy.visit("/register"); + return this; + } + + enterFirstname(firstname: string) { + cy.get(this.firstnameInput).clear().type(firstname); + return this; + } + + enterLastname(lastname: string) { + cy.get(this.lastnameInput).clear().type(lastname); + return this; + } + + enterEmail(email: string) { + cy.get(this.emailInput).clear().type(email); + return this; + } + + checkPrivacyCheckbox() { + cy.get(this.checkbox).click({ force: true }); + } + + submitRegistrationPage() { + cy.get(this.submitBtn).should("be.enabled"); + cy.get(this.submitBtn).click(); + } +} From 5d24d1d51002359263796bd45a2c407b723ae0cf Mon Sep 17 00:00:00 2001 From: mahula Date: Wed, 28 Sep 2022 13:59:29 +0200 Subject: [PATCH 06/10] update cypress test readme --- e2e-tests/cypress/README.md | 45 ++++++++++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 6 deletions(-) diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md index b1ddae514..e653413d6 100644 --- a/e2e-tests/cypress/README.md +++ b/e2e-tests/cypress/README.md @@ -1,24 +1,57 @@ # Gradido End-to-End Testing with [Cypress](https://www.cypress.io/) (CI-ready via Docker) +A setup to show-case Cypress as an end-to-end testing tool for Gradido running in a Docker container. +The tests are organized in feature files written in Gherkin syntax. + + +## Features under test + +So far these features are initially tested +- [User authentication](https://github.com/gradido/gradido/blob/master/e2e-tests/cypress/tests/cypress/e2e/User.Authentication.feature) +- [User profile - change password](https://github.com/gradido/gradido/blob/master/e2e-tests/cypress/tests/cypress/e2e/UserProfile.ChangePassword.feature) +- [User registration]((https://github.com/gradido/gradido/blob/master/e2e-tests/cypress/tests/cypress/e2e/User.Registration.feature)) (WIP) -A sample setup to show-case Cypress as an end-to-end testing tool for Gradido running in a Docker container. -Here we have a simple UI-based happy path login test running against the DEV system. ## Precondition -Since dependencies and configurations for Github Actions integration is not set up yet, please run in root directory + +Before running the test, change to the the repo's root directory (gradido) and boot up the system under test ```bash docker-compose up ``` -to boot up the DEV system, before running the test. ## Execute the test +This setup will be integrated in the Gradido Github Actions to automatically support the CI/CD process. +For now the test setup can only be use locally in two modes + +### Run Cypress directly from the code + ```bash +# change to the tests directory +cd /path/to/gradido/e2e-tests/cypress/tests + +# install all dependencies +yarn install + +# a) run the tests on command line +yarn cypress run + +# b) open the Cypress GUI to run the tests in interactive mode +yarn cypress open +``` + + +### Run Cyprss from a separate Docker container + +```bash +# change to the cypress directory +cd /path/to/gradido/e2e-tests/cypress/ + # build a Docker image from the Dockerfile docker build -t gradido_e2e-tests-cypress . -# run the Docker container and execute the given tests -docker run -it --network=host gradido_e2e-tests-cypress yarn run cypress-e2e-tests +# run the Docker image and execute the given tests +docker run -it --network=host gradido_e2e-tests-cypress yarn cypress-e2e ``` From 07815e887f2625107c3cc39c86c2bdcfc24db127 Mon Sep 17 00:00:00 2001 From: mahula Date: Thu, 29 Sep 2022 11:12:06 +0200 Subject: [PATCH 07/10] update e2e-tests/cypress/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Wolfgang Huß --- e2e-tests/cypress/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md index e653413d6..72c3745ec 100644 --- a/e2e-tests/cypress/README.md +++ b/e2e-tests/cypress/README.md @@ -14,7 +14,7 @@ So far these features are initially tested ## Precondition -Before running the test, change to the the repo's root directory (gradido) and boot up the system under test +Before running the test, change to the repo's root directory (gradido) and boot up the system under test: ```bash docker-compose up From 6796190f09ef0f5b817bab97c14bfadadcf3637b Mon Sep 17 00:00:00 2001 From: mahula Date: Thu, 29 Sep 2022 11:12:29 +0200 Subject: [PATCH 08/10] update e2e-tests/cypress/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Wolfgang Huß --- e2e-tests/cypress/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md index 72c3745ec..08ca5ee0c 100644 --- a/e2e-tests/cypress/README.md +++ b/e2e-tests/cypress/README.md @@ -24,7 +24,7 @@ docker-compose up ## Execute the test This setup will be integrated in the Gradido Github Actions to automatically support the CI/CD process. -For now the test setup can only be use locally in two modes +For now the test setup can only be used locally in two modes. ### Run Cypress directly from the code From f780b1c431341cae1e075f8a97f88485cd407de9 Mon Sep 17 00:00:00 2001 From: mahula Date: Thu, 29 Sep 2022 11:32:57 +0200 Subject: [PATCH 09/10] update e2e-tests/cypress/README.md - hint about seeding the database before each test run --- e2e-tests/cypress/README.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md index 08ca5ee0c..6e4af822f 100644 --- a/e2e-tests/cypress/README.md +++ b/e2e-tests/cypress/README.md @@ -14,12 +14,28 @@ So far these features are initially tested ## Precondition -Before running the test, change to the repo's root directory (gradido) and boot up the system under test: +Before running the test, change to the repo's root directory (gradido) + +### Boot up the system under test ```bash docker-compose up ``` +### Seed the database + +The database has to be seeded upfront to every test run. + +```bash +# change to the backend directory +cd /path/to/gradido/gradido/backend + +# install all dependencies +yarn + +# seed the database (everytime before running the tests) +yarn seed +``` ## Execute the test From b0e9550ffc1d7cfa0c13c5fc942a2336025505aa Mon Sep 17 00:00:00 2001 From: mahula Date: Thu, 29 Sep 2022 12:21:49 +0200 Subject: [PATCH 10/10] update e2e-tests/cypress/README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Wolfgang Huß --- e2e-tests/cypress/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md index 6e4af822f..4ec1ebe51 100644 --- a/e2e-tests/cypress/README.md +++ b/e2e-tests/cypress/README.md @@ -14,7 +14,7 @@ So far these features are initially tested ## Precondition -Before running the test, change to the repo's root directory (gradido) +Before running the tests, change to the repo's root directory (gradido). ### Boot up the system under test