Updating tests

Adding Dockerfile and README

.github/workflows/e2e-tests.yml

@@ -3,6 +3,9 @@ on: [push]
 jobs:
   cypress-run:
     runs-on: ubuntu-22.04
+    env:
+      CYPRESS_user: ${{secrets.USER}}
+      CYPRESS_pass: ${{secrets.PASSWORD}}
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules/
-.env.local
+cypress.env.json
+screenshots

Dockerfile

@@ -0,0 +1,11 @@
+FROM cypress/browsers:node-18.14.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
+
+WORKDIR /e2e
+
+COPY cypress.config.js .
+COPY package.json ./
+COPY ./cypress ./cypress
+
+RUN npm install
+
+ENTRYPOINT ["npx", "cypress", "run"]

README.md

@@ -1 +1,13 @@
-# ui-tests
+# UI tests
+
+1. Create the docker image
+
+```bash
+docker buildx build . -t ui-tests
+```
+
+2. Run the docker image with the tests
+
+```bash
+docker run -it  ui-test:latest
+```

cypress/e2e/login.spec.cy.js

@@ -1,61 +1,53 @@
 import ProfileComponent from "../pages/components/profileComponent";
 import LoginPage from "../pages/loginPage";
+import { faker } from "@faker-js/faker";
 import { LANGUAGE_VALUE } from "../utils/languageConstants";
 
-describe("User access to the app", () => {
-  before(() => {
-
-
-    // cy.visit("/");
-
-    // cy.get("button[type=submit]").click();
-    // cy.location("pathname").should("to.eq", "/account/dashboard/");
-    cy.setCookie(
-      "osano_consentmanager",
-      "Y-2LQKHu5l8pKISjBI0luyEyEPtc5MphuRgXDxmhq7qLNIGmRqZnXbYwPnmwZ9Ppc0WpWu51nRWKYBfoHSAP6pfdY-YMXjPF2XLUGeAN2nMHqY-euby0spvUlTQX3X7YTZ_UHWspbyfTuBp9tQ8UtORUYpnm07Kq_sdFX6kS6xGAPNe0w5j3YoiwhobtIXJ7oaWHID260lZ_mCcn8eAsKPhKFbLx3d5zxMCtNCqmtIuCHLuGEYENdO-_59cBCq0zNDJZJQDaEQiNj0YDeWax9r7UmsBar_-GLhn6dA=="
-    );
-    cy.setCookie(
-      "osano_consentmanager_uuid",
-      "ccff8d73-3ca7-48b7-865b-d64efc82c674"
-    );
+describe("Logged in user flow", () => {
+  beforeEach(() => {
+    cy.acceptCookies();
+    cy.visit("/");
   });
 
-  // it("should successfully log in with valid credentials and log out", () => {
-  //   cy.visit("/");
-  //   const profileComponent = new ProfileComponent();
-  //   profileComponent.logout();
-  //   cy.contains("Login").and("be.visible");
-  //   cy.findByRole("paragraph")
-  //     .should("contain", "You have successfully logged out.")
-  //     .and("be.visible");
-  //   //getByRole('paragraph')
-  //   ///getByRole('heading', { name: 'You have entered an incorrect' })
-  // });
+  it("should successfully log in with valid credentials and log out", () => {
+    const profileComponent = new ProfileComponent();
+    const loginPage = new LoginPage();
+    loginPage.doLogin(Cypress.env("user"), Cypress.env("pass"));
+    profileComponent.logout();
+    cy.contains("Login").and("be.visible");
+    cy.getParagraphMessage()
+      .should("contain", "You have successfully logged out.")
+      .and("be.visible");
+    cy.getHeaderMessage()
+      .should("contain", "You have successfully logged out.")
+      .and("be.visible");
+  });
 
-  // it("should show an error message with invalid credentials", () => {
-  //   cy.visit("/");
-  //   const loginPage = new LoginPage();
-  //   loginPage.login("notAUser", "wrong pass");
-  //   cy.get(".cbox_messagebox_error")
-  //     .should("contain", "You have entered an incorrect username or password.")
-  //     .and("be.visible");
-  // });
+  it("should show an error message with invalid credentials", () => {
+    const loginPage = new LoginPage();
+    loginPage.doLogin(faker.internet.userName(), faker.internet.password());
+    cy.getParagraphMessage()
+      .should("contain", "You have entered an incorrect username or password.")
+      .and("be.visible");
+    cy.getHeaderMessage()
+      .should("contain", "You have entered an incorrect username or password.")
+      .and("be.visible");
+  });
 
   it("should maintain user preferred language when changing language in login page", () => {
-    cy.visit("/");
     const loginPage = new LoginPage();
     loginPage.changeLanguage(LANGUAGE_VALUE.IT);
     cy.intercept("GET", "/v7/identity/users/current_user/").as("userData");
-
+
+    loginPage.doLogin(Cypress.env("user"), Cypress.env("pass"));
     const profileComponent = new ProfileComponent();
     cy.wait("@userData").then(({ response }) => {
-      cy.log(response);
       expect(response.body.preferred_language).to.exist;
       expect(response.body.preferred_language).to.eq("en_US");
     });
     profileComponent.seeLanguage();
-    cy.get('[id=en_US-language-item-form]').find(
-      ".language-switch__selected-indicator"
-    );
+    profileComponent
+      .getSelectedLanguage(LANGUAGE_VALUE.EN)
+      .should("be.visible");
   });
 });

cypress/pages/components/profileComponent.js

@@ -16,7 +16,9 @@ class ProfileComponent {
   }
 
   getSelectedLanguage(language) {
-    return cy.findAllByRole("link", { name: `${language}` });
+    return cy
+      .findByRole("link", { name: `${language}` })
+      .find(".language-switch__selected-indicator");
   }
 }
 

cypress/pages/loginPage.js

@@ -13,13 +13,13 @@ class LoginPage {
     this.elements.loginButton().click();
   }
 
-  get notificationMessage() {
-    return cy.get(this.paragraphMessage);
+  getNotificationMessage() {
+    return this.elements.paragraphMessage();
   }
 
   changeLanguage(language) {
     this.elements.changeLanguageButton().click();
-    cy.findByRole("link", { name: `${language}` }).click().pause();
+    cy.findByRole("link", { name: `${language}` }).click();
   }
 }
 

cypress/support/commands.js

@@ -13,20 +13,34 @@
 import "@testing-library/cypress/add-commands";
 
 Cypress.Commands.add("login", (username, password) => {
-  cy.session(
-    [username, password],
-    () => {
-      cy.visit("/");
-      cy.get("[id=inputEmail]").type(username);
-      cy.get("[id=inputPassword]").type(password);
-      cy.get("button[type=submit]").click();
-      cy.location("pathname").should("eq", "/account/dashboard/");
-    },
-    {
-      cacheAcrossSpecs: true,
-    }
+  cy.session([username, password], () => {
+    cy.visit("/");
+    cy.get("[id=inputEmail]").type(username);
+    cy.get("[id=inputPassword]").type(password);
+    cy.get("button[type=submit]").click();
+    cy.location("pathname").should("eq", "/account/dashboard/");
+  });
+});
+
+Cypress.Commands.add("getParagraphMessage", () => {
+  return cy.findByRole("paragraph");
+});
+
+Cypress.Commands.add("getHeaderMessage", () => {
+  return cy.findByRole("heading");
+});
+
+/* The cookie value is autogenerated and requires specific implementation knowledge to handle dynamically.
+As a workaround, we're setting hardcoded values in the local store for testing purposes.
+*/
+Cypress.Commands.add("acceptCookies", () => {
+  cy.setCookie(
+    "osano_consentmanager",
+    "TcVoStzVPLg20wI8CBHzzyCdYx4pNDATVKuKZzOzxs--Df6NRyFOAnvL1vWVhelp4LvCGWO0ymDtCMxnsUTO5qPlMeVj-OyFKNhnI5kHAFEvUzbwAjqvlhhQhg6Ow-NZ8gp1tPwRjx87DkvwSegyVzrHn_r-u5SmL59fVJWc7l7zMJxynvhS7qMXg8mclyUyw-T5g6dMbWFpQNRcGxbgXfJM1AogzaOpHuskJ4nI7fC9ssKz6PhZKopPku7LtemEtqjkRF8c79VJHwmdFMmq-it4ABw="
   );
+  cy.setCookie("osano_consentmanager_uuid", "123key");
 });
+
 //
 //
 // -- This is a child command --

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "cy:run": "npx cypress run"
   },
   "repository": {
     "type": "git",
@@ -18,8 +19,12 @@
   },
   "homepage": "https://github.com/gimenezr/qa-assigment#readme",
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@testing-library/cypress": "^10.0.2",
     "cypress": "^13.12.0"
   },
-    "include": ["node_modules/cypress", "./cypress/**/*.js"]
+  "include": [
+    "node_modules/cypress",
+    "./cypress/**/*.js"
+  ]
 }