Cypress v12 upgrade

.github/workflows/deploy.yml

@@ -73,7 +73,7 @@ jobs:
             ${{github.workspace}}/services/app-api/coverage/lcov.info:lcov
             ${{github.workspace}}/services/ui-src/coverage/lcov.info:lcov
       - name: Store unit test results
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: unit_test_results
           path: ${{github.workspace}}/services/ui-src/coverage/lcov.info
@@ -110,12 +110,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Run Cypress Tests
-        uses: cypress-io/github-action@v3.0.3
+        uses: cypress-io/github-action@v5
         with:
           working-directory: tests/cypress
           spec: tests/integration/*.spec.js
           browser: chrome
-          headless: true
           config: baseUrl=${{ needs.deploy.outputs.application_endpoint }}
           wait-on: ${{ needs.deploy.outputs.application_endpoint }}
           env: true
@@ -124,10 +123,8 @@ jobs:
           CYPRESS_STATE_USER_PASSWORD: ${{ secrets.CYPRESS_STATE_USER_PASSWORD }}
           CYPRESS_ADMIN_USER_EMAIL: ${{ secrets.CYPRESS_ADMIN_USER_EMAIL }}
           CYPRESS_ADMIN_USER_PASSWORD: ${{ secrets.CYPRESS_ADMIN_USER_PASSWORD }}
-          CYPRESS_REVIEWER_USER_EMAIL: ${{ secrets.CYPRESS_REVIEWER_USER_EMAIL }}
-          CYPRESS_REVIEWER_USER_PASSWORD: ${{ secrets.CYPRESS_REVIEWER_USER_PASSWORD }}
       - name: Upload screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
@@ -143,12 +140,11 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Check Project A11y
-        uses: cypress-io/github-action@v3.0.3
+        uses: cypress-io/github-action@v5
         with:
           working-directory: tests/cypress
           spec: tests/a11y/*.spec.js
           browser: chrome
-          headless: true
           config: baseUrl=${{ needs.deploy.outputs.application_endpoint }}
           wait-on: ${{ needs.deploy.outputs.application_endpoint }}
           env: true
@@ -157,10 +153,8 @@ jobs:
           CYPRESS_STATE_USER_PASSWORD: ${{ secrets.CYPRESS_STATE_USER_PASSWORD }}
           CYPRESS_ADMIN_USER_EMAIL: ${{ secrets.CYPRESS_ADMIN_USER_EMAIL }}
           CYPRESS_ADMIN_USER_PASSWORD: ${{ secrets.CYPRESS_ADMIN_USER_PASSWORD }}
-          CYPRESS_REVIEWER_USER_EMAIL: ${{ secrets.CYPRESS_REVIEWER_USER_EMAIL }}
-          CYPRESS_REVIEWER_USER_PASSWORD: ${{ secrets.CYPRESS_REVIEWER_USER_PASSWORD }}
       - name: Upload screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots

package.json

@@ -60,10 +60,6 @@
   "dependencies": {
     "aws-amplify": "^4.3.17"
   },
-  "cypress-cucumber-preprocessor": {
-    "nonGlobalStepDefinitions": true,
-    "stepDefinitions": "tests"
-  },
   "resolutions": {
     "loader-utils": "^2.0.4"
   }

tests/cypress/README.md

@@ -15,7 +15,7 @@
 
 ## Configuration
 
-`cypress.json` may use any of [these](https://docs.cypress.io/guides/references/configuration#Global) config options.
+`cypress.config.js` may use any of [these](https://docs.cypress.io/guides/references/configuration#Global) config options.
 
 ## Cypress CLI
 

tests/cypress/cypress.config.js

@@ -0,0 +1,53 @@
+const { defineConfig } = require("cypress");
+const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");
+const { lighthouse } = require("@cypress-audit/lighthouse");
+const { pa11y, prepareAudit } = require("@cypress-audit/pa11y");
+
+module.exports = defineConfig({
+  redirectionLimit: 20,
+  retries: 2,
+  watchForFileChanges: true,
+  fixturesFolder: "fixtures",
+  screenshotsFolder: "screenshots",
+  videosFolder: "videos",
+  downloadsFolder: "downloads",
+  types: ["cypress", "cypress-axe"],
+  env: {
+    STATE_USER_EMAIL: "stateuser2@test.com",
+    ADMIN_USER_EMAIL: "cms.admin@test.com",
+  },
+  e2e: {
+    baseUrl: "http://localhost:3000/",
+    specPattern: "**/*.spec.js",
+    excludeSpecPattern: "filterReports.spec.js",
+    supportFile: "support/index.js",
+    async setupNodeEvents(on, config) {
+      await preprocessor.addCucumberPreprocessorPlugin(on, config);
+      on("file:preprocessor", browserify.default(config));
+      on("task", {
+        log(message) {
+          // eslint-disable-next-line no-console
+          console.log(message);
+
+          return null;
+        },
+        table(message) {
+          // eslint-disable-next-line no-console
+          console.table(message);
+
+          return null;
+        },
+      });
+      on("before:browser:launch", (_browser = {}, launchOptions) => {
+        prepareAudit(launchOptions);
+      });
+      on("task", {
+        pa11y: pa11y(),
+        lighthouse: lighthouse(),
+      });
+
+      return config;
+    },
+  },
+});

tests/cypress/package.json

@@ -12,21 +12,20 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^15.1.3",
     "@cypress-audit/lighthouse": "^1.2.0",
-    "@cypress-audit/pa11y": "^1.2.0",
-    "axe-core": "^4.4.1",
-    "concurrently": "^6.2.1",
-    "cypress": "^9.4.1",
-    "cypress-axe": "^0.14.0",
-    "cypress-cucumber-preprocessor": "^4.2.0",
-    "cypress-file-upload": "^5.0.8",
-    "cypress-xpath": "^1.6.2"
+    "@cypress-audit/pa11y": "^1.3.1",
+    "axe-core": "^4.6.3",
+    "concurrently": "^7.6.0",
+    "cypress": "^12.15.1",
+    "cypress-axe": "^1.3.0",
+    "cypress-file-upload": "^5.0.8"
   },
   "cypress-cucumber-preprocessor": {
     "nonGlobalStepDefinitions": true,
     "stepDefinitions": "tests"
   },
   "dependencies": {
-    "cypress-tags": "^0.3.0"
+    "cypress-tags": "^1.1.2"
   }
 }

tests/cypress/support/commands.js

@@ -8,8 +8,8 @@ before(() => {
   cy.visit("/", { timeout: 60000 * 5, failOnStatusCode: false });
 });
 
-const emailForCognito = "//input[@name='email']";
-const passwordForCognito = "//input[@name='password']";
+const emailForCognito = "input[name='email']";
+const passwordForCognito = "input[name='password']";
 const uncertifyButton = "[data-testid='uncertifyButton']";
 const logoutButton = "[data-testid='header-menu-option-log-out']";
 const headerDropdownMenu = "[data-testid='headerDropDownMenu']";
@@ -24,11 +24,6 @@ const adminUser = {
   password: Cypress.env("ADMIN_USER_PASSWORD"),
 };
 
-const reviewer = {
-  email: Cypress.env("REVIEWER_USER_EMAIL"),
-  password: Cypress.env("REVIEWER_USER_PASSWORD"),
-};
-
 Cypress.Commands.add("authenticate", (userType, userCredentials) => {
   cy.reload();
   let credentials = {};
@@ -46,17 +41,14 @@ Cypress.Commands.add("authenticate", (userType, userCredentials) => {
       case "stateUser":
         credentials = stateUser;
         break;
-      case "reviewer":
-        credentials = reviewer;
-        break;
       default:
         throw new Error("Provided userType not recognized.");
     }
   } else {
     throw new Error("Must specify either userType or userCredentials.");
   }
-  cy.xpath(emailForCognito).type(credentials.email);
-  cy.xpath(passwordForCognito).type(credentials.password);
+  cy.get(emailForCognito).type(credentials.email);
+  cy.get(passwordForCognito).type(credentials.password);
   cy.get('[data-cy="login-with-cognito-button"]').click();
 });
 

tests/cypress/support/index.js

@@ -14,17 +14,9 @@
  * https://on.cypress.io/configuration
  * ***********************************************************
  */
-{
-  require("cypress-xpath");
-}
 // Import commands.js using ES2015 syntax:
 import "./commands";
 
-/*
- * Alternatively you can use CommonJS syntax:
- * require('./commands')
- */
-
 /*
  * This is a Cypress plugin that allows you to run axe (https://dequeuniversity.com/rules/axe/about) on
  * your tests.

tests/cypress/support/pages/Homepage.js

@@ -1,23 +1,23 @@
 const appLogo = "//a[contains(text(), 'CARTS')]";
 const headerAppLogo = "a[contains(text(), 'CARTS')]";
 const headerLoginButton = "a#loginButton";
-const footerAddress = '(//div[@class="footer-wrapper"]/div)[2]';
+const footerAddress = '(div[class="footer-wrapper"]/div)[2]';
 const footerEmail = ".footer-email";
 const footerHhsLogo = "img[alt='Department of Health and Human Services logo']";
-const footerMdctLogo = "//img[@alt='Mdct logo']";
-const footerMedicaidLogo = "//img[@alt='Medicaid.gov logo']";
+const footerMdctLogo = "img[alt='Mdct logo']";
+const footerMedicaidLogo = "img[alt='Medicaid.gov logo']";
 const medicaidLogo = "img[alt='Medicaid.gov logo']";
-const footerSentence = '(//div[@class="footer-fed-gov-text"])[1]';
+const footerSentence = '(div[class="footer-fed-gov-text"])[1]';
 
 export class Homepage {
   launch() {
     cy.visit("/");
   }
 
   verifyLogos() {
-    cy.xpath(appLogo).should("be.visible");
-    cy.xpath(footerMdctLogo).should("be.visible");
-    cy.xpath(footerMedicaidLogo).should("be.visible");
+    cy.get(appLogo).should("be.visible");
+    cy.get(footerMdctLogo).should("be.visible");
+    cy.get(footerMedicaidLogo).should("be.visible");
   }
 
   validateCoreSetReportingIcon() {
@@ -26,7 +26,7 @@ export class Homepage {
   }
 
   validatePageBanner() {
-    cy.xpath(headerAppLogo).should("be.visible");
+    cy.get(headerAppLogo).should("be.visible");
   }
 
   validateLoginButton() {
@@ -38,7 +38,7 @@ export class Homepage {
   }
 
   validateSupportSenence() {
-    cy.xpath(footerSentence).should("be.visible");
+    cy.get(footerSentence).should("be.visible");
   }
 
   validateMedicaidLogo() {
@@ -54,7 +54,7 @@ export class Homepage {
   }
 
   validateAddress() {
-    cy.xpath(footerAddress).contains(
+    cy.get(footerAddress).contains(
       "7500 Security Boulevard Baltimore, MD 21244"
     );
   }

tests/cypress/support/pages/LoginPage.js

@@ -1,26 +1,26 @@
-const cognitoUserEmail = "//input[@name='email']";
-const cognitoUserPassword = "//input[@name='password']";
-const cognitoLoginButton = "//button[@data-cy='login-with-cognito-button']";
+const cognitoUserEmail = "input[name='email']";
+const cognitoUserPassword = "input[name='password']";
+const cognitoLoginButton = "button[data-cy='login-with-cognito-button']";
 
 export class LoginPage {
   enterEmailwithCognitoLogin() {
-    cy.xpath(cognitoUserEmail).type("stateuser1@test.com");
+    cy.get(cognitoUserEmail).type("stateuser1@test.com");
   }
 
   enterPasswordwithCognitoLogin() {
-    cy.xpath(cognitoUserPassword).type("p@55W0rd!");
+    cy.get(cognitoUserPassword).type("p@55W0rd!");
   }
 
   stateCognitoLogin() {
-    cy.xpath(cognitoUserEmail).type("adminuser@test.com");
-    cy.xpath(cognitoUserPassword).type("p@55W0rd!");
-    cy.xpath(cognitoLoginButton).click();
+    cy.get(cognitoUserEmail).type("adminuser@test.com");
+    cy.get(cognitoUserPassword).type("p@55W0rd!");
+    cy.get(cognitoLoginButton).click();
   }
 
   approverCognitoLogin() {
-    cy.xpath(cognitoUserEmail).type("adminuser@test.com");
-    cy.xpath(cognitoUserPassword).type("p@55W0rd!");
-    cy.xpath(cognitoLoginButton).click();
+    cy.get(cognitoUserEmail).type("adminuser@test.com");
+    cy.get(cognitoUserPassword).type("p@55W0rd!");
+    cy.get(cognitoLoginButton).click();
   }
 }