Set up Cypress Environment Initialize Cypress Project

tests/full-e2e/cypress.config.js

@@ -0,0 +1,55 @@
+const { defineConfig } = require("cypress");
+const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
+const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");
+
+async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
+  await preprocessor.addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    "file:preprocessor",
+    createBundler({
+      plugins: [createEsbuildPlugin.default(config)],
+    })
+  );
+  on("task", {
+    log(message) {
+      console.log(message);
+
+      return null;
+    },
+    table(message) {
+      console.table(message);
+
+      return null;
+    },
+  });
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+module.exports = defineConfig({
+  redirectionLimit: 20,
+  retries: 2,
+  watchForFileChanges: true,
+  fixturesFolder: "fixtures",
+  screenshotsFolder: "screenshots",
+  videosFolder: "videos",
+  video: false,
+  downloadsFolder: "downloads",
+  defaultCommandTimeout: 70001,
+  viewportWidth: 1440,
+  viewportHeight: 900,
+  experimentalStudio: true,
+  types: ["cypress", "cypress-axe"],
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents,
+    baseUrl: "https://d2dr7dgo9g0124.cloudfront.net",
+    specPattern: ["cypress/e2e/**/*.feature", "cypress/e2e/**/*.spec.js"],
+    supportFile: "cypress/support/e2e.js",
+    stepDefinitions: ["cypress/support/step_definitions/steps.js"],
+  },
+});

tests/full-e2e/cypress/e2e/basic_smoke_test.spec.feature

@@ -0,0 +1,5 @@
+Feature: A Basic Smoke test
+    Scenario: Verify the home page is visible
+        Given I navigate to the Login Page
+        When the page loads
+        Then I am on the home page and not logged in

tests/full-e2e/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

tests/full-e2e/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

tests/full-e2e/cypress/support/e2e.js

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+import "cypress-axe";
+import "@cypress/xpath";
+
+//to skip the index.of errors
+Cypress.on("uncaught:exception", (err, runnable) => {
+  return false;
+});

tests/full-e2e/cypress/support/pages/oneMacHomePage.js

@@ -0,0 +1,51 @@
+//css, use cy.get
+const devLoginBtn = "#devloginBtn";
+const loginBtn = "#loginBtn";
+const oneMacLogo = "#oneMacLogo";
+const homePageMainContent = "#main";
+//xpath, use cy.xpath
+const FAQPage = "//a[text()='FAQ']";
+const HomePageLink = "//a[contains(text(),'Home')]";
+const RegisterLink = "//a[contains(text(),'Register')]";
+
+export class oneMacHomePage {
+  launch() {
+    cy.visit("/");
+  }
+  pageHasLoaded() {
+    cy.get(oneMacLogo).should("be.visible");
+    cy.get(homePageMainContent).should("be.visible");
+  }
+  verifyUserIsNotLoggedInOnHomePage() {
+    cy.xpath(HomePageLink).should("be.visible").and("have.class", "activeLink");
+  }
+
+  clickDevelopmentLogin() {
+    cy.get(devLoginBtn).click();
+  }
+
+  clickFAQPage() {
+    cy.xpath(FAQPage)
+      .invoke("attr", "href")
+      .then((href) => {
+        cy.visit(href);
+      });
+  }
+
+  verifyHomePageLinkExists() {
+    cy.xpath(HomePageLink).should("be.visible");
+  }
+
+  verifyFAQLinkExists() {
+    cy.xpath(FAQPage).should("be.visible");
+  }
+
+  verifyRegisterLinkExists() {
+    cy.xpath(RegisterLink).should("be.visible");
+  }
+
+  verifyloginBTNExists() {
+    cy.get(loginBtn).should("be.visible");
+  }
+}
+export default oneMacHomePage;

tests/full-e2e/cypress/support/step_definitions/steps.js

@@ -0,0 +1,14 @@
+import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
+import oneMacHomePage from "../pages/oneMacHomePage";
+const OneMacHomePage = new oneMacHomePage();
+
+Given("I navigate to the Login Page", () => {
+  OneMacHomePage.launch();
+});
+
+When("the page loads", () => {
+  OneMacHomePage.pageHasLoaded();
+});
+Then("I am on the home page and not logged in", () => {
+  OneMacHomePage.verifyUserIsNotLoggedInOnHomePage();
+});