From aa2e07565cbac0463b1032f786312cba91e22e37 Mon Sep 17 00:00:00 2001 From: mahula Date: Tue, 12 Jul 2022 10:15:32 +0200 Subject: [PATCH] add initial e2e test setup utilizing Cypress --- e2e-tests/cypress/Dockerfile | 65 +++++++++++++++++++ e2e-tests/cypress/README.md | 26 ++++++++ e2e-tests/cypress/tests/cypress.config.js | 15 +++++ .../tests/cypress/e2e/gradido_login.cy.js | 21 ++++++ .../tests/cypress/e2e/models/LoginPage.js | 21 ++++++ .../cypress/tests/cypress/fixtures/users.json | 7 ++ 6 files changed, 155 insertions(+) create mode 100644 e2e-tests/cypress/Dockerfile create mode 100644 e2e-tests/cypress/README.md create mode 100644 e2e-tests/cypress/tests/cypress.config.js create mode 100644 e2e-tests/cypress/tests/cypress/e2e/gradido_login.cy.js create mode 100644 e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.js create mode 100644 e2e-tests/cypress/tests/cypress/fixtures/users.json diff --git a/e2e-tests/cypress/Dockerfile b/e2e-tests/cypress/Dockerfile new file mode 100644 index 000000000..5251e071a --- /dev/null +++ b/e2e-tests/cypress/Dockerfile @@ -0,0 +1,65 @@ +############################################################################### +# Dockerfile to create a ready-to-use Cypress Docker image for end-to-end +# testing. +# +# This Dockerfile is based on the Dockerfile using Node.js 16.14.2 and +# Cypress 10.3.0 +# (https://github.com/cypress-io/cypress-docker-images/blob/master/included/10.3.0/Dockerfile) +# from Cypress.io Docker images. +############################################################################### +FROM cypress/browsers:node16.14.2-slim-chrome100-ff99-edge + +# avoid too many progress messages +# https://github.com/cypress-io/cypress/issues/1243 +ENV CI=1 \ +# disable shared memory X11 affecting Cypress v4 and Chrome +# https://github.com/cypress-io/cypress-docker-images/issues/270 + QT_X11_NO_MITSHM=1 \ + _X11_NO_MITSHM=1 \ + _MITSHM=0 \ + # point Cypress at the /root/cache no matter what user account is used + # see https://on.cypress.io/caching + CYPRESS_CACHE_FOLDER=/root/.cache/Cypress \ + # Allow projects to reference globally installed cypress + NODE_PATH=/usr/local/lib/node_modules + +# should be root user +RUN echo "whoami: $(whoami)" \ + && npm config -g set user $(whoami) \ + # command "id" should print: + # uid=0(root) gid=0(root) groups=0(root) + # which means the current user is root + && id \ + && npm install -g "cypress@10.3.0" \ + && cypress verify \ + # Cypress cache and installed version + # should be in the root user's home folder + && cypress cache path \ + && cypress cache list \ + && cypress info \ + && cypress version \ + # give every user read access to the "/root" folder where the binary is cached + # we really only need to worry about the top folder, fortunately + && ls -la /root \ + && chmod 755 /root \ + # always grab the latest Yarn + # otherwise the base image might have old versions + # NPM does not need to be installed as it is already included with Node. + && npm i -g yarn@latest \ + # Show where Node loads required modules from + && node -p 'module.paths' \ + # should print Cypress version + # plus Electron and bundled Node versions + && cypress version \ + && echo " node version: $(node -v) \n" \ + "npm version: $(npm -v) \n" \ + "yarn version: $(yarn -v) \n" \ + "debian version: $(cat /etc/debian_version) \n" \ + "user: $(whoami) \n" \ + "chrome: $(google-chrome --version || true) \n" \ + "firefox: $(firefox --version || true) \n" + +WORKDIR /tests +COPY tests/ /tests + +# ENTRYPOINT ["cypress", "run"] diff --git a/e2e-tests/cypress/README.md b/e2e-tests/cypress/README.md new file mode 100644 index 000000000..5cadedff4 --- /dev/null +++ b/e2e-tests/cypress/README.md @@ -0,0 +1,26 @@ +# Gradido End-to-End Testing with [Cypress](https://www.cypress.io/) (CI-ready via Docker) + + +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 + +```bash +docker-compose up +``` + +to boot up the DEV system, before running the test. + +## Execute the test + +```bash +cd 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 gradido_e2e-tests-cypress cypress run +``` diff --git a/e2e-tests/cypress/tests/cypress.config.js b/e2e-tests/cypress/tests/cypress.config.js new file mode 100644 index 000000000..00f1ece46 --- /dev/null +++ b/e2e-tests/cypress/tests/cypress.config.js @@ -0,0 +1,15 @@ +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + e2e: { + baseUrl: 'http://localhost:3000', + chromeWebSecurity: false, + supportFile: false, + viewportHeight: 720, + viewportWidth: 1280, + retries: { + runMode: 2, + openMode: 0 + } + } +}) diff --git a/e2e-tests/cypress/tests/cypress/e2e/gradido_login.cy.js b/e2e-tests/cypress/tests/cypress/e2e/gradido_login.cy.js new file mode 100644 index 000000000..2a2f8b8ce --- /dev/null +++ b/e2e-tests/cypress/tests/cypress/e2e/gradido_login.cy.js @@ -0,0 +1,21 @@ +import users from '../fixtures/users' +import LoginPage from './models/LoginPage' + +describe('Gradido', () => { + let userData; + + before(() => { + cy.fixture('users').then((usersFixture) => { + userData = usersFixture; + }); + }); + + it('login test (happy path)', () => { + const loginPage = new LoginPage(); + loginPage.goto(); + loginPage.enterEmail(userData.user.email); + loginPage.enterPassword(userData.user.password); + loginPage.submitLogin(); + cy.url().should('be.equal', `${Cypress.config('baseUrl')}/overview`); + }); +}); diff --git a/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.js b/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.js new file mode 100644 index 000000000..6a0245aa2 --- /dev/null +++ b/e2e-tests/cypress/tests/cypress/e2e/models/LoginPage.js @@ -0,0 +1,21 @@ +class LoginPage { + goto() { + cy.visit('/') + } + + enterEmail(email) { + cy.get('[id=Email-input-field]').clear().type(email) + return this + } + + enterPassword(password) { + cy.get('[id=Passwors-input-field]').clear().type(password) + return this + } + + submitLogin() { + cy.get('[type=submit]').click() + } +} + +export default LoginPage diff --git a/e2e-tests/cypress/tests/cypress/fixtures/users.json b/e2e-tests/cypress/tests/cypress/fixtures/users.json new file mode 100644 index 000000000..f13e203f0 --- /dev/null +++ b/e2e-tests/cypress/tests/cypress/fixtures/users.json @@ -0,0 +1,7 @@ +{ + "user": { + "email": "bibi@bloxberg.de", + "password": "Aa12345_", + "name": "Bibi Bloxberg" + } +}