Merge pull request #1209 from GSA/1155-github-pipeline-cross-browser-…

…testing

1155 GitHub pipeline cross browser testing

.github/workflows/test-cypress-prod-e2e.yml

@@ -13,7 +13,7 @@ defaults:
 
 jobs:
   install:
-    name: cypress-run
+    name: cypress-run-prod-e2e
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/test-cypress.yml

@@ -6,21 +6,94 @@ on:
     paths:
       - benefit-finder/*
 
-
 permissions: read-all
 
 defaults:
   run:
     working-directory: ./benefit-finder
 
 jobs:
-  install:
-    name: cypress-run
+
+  tests-chrome:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "./benefit-finder/package.json"
+
+      - name: Install Submodule
+        run: |
+          cd ..
+          git submodule init
+          git submodule update
+
+      - name: Cypress run (Chrome)
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./benefit-finder
+          browser: chrome
+          env: NODE_ENV=test
+          build: "npm run cy:build:storybook"
+          start: "npm run cy:run:pipeline"
+
+  tests-firefox:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "./benefit-finder/package.json"
+
+      - name: Install Submodule
+        run: |
+          cd ..
+          git submodule init
+          git submodule update
+
+      - name: Cypress run (Firefox)
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./benefit-finder
+          browser: firefox
+          env: NODE_ENV=test
+          build: "npm run cy:build:storybook"
+          start: "npm run cy:run:pipeline"
+
+  tests-edge:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "./benefit-finder/package.json"
+
+      - name: Install Submodule
+        run: |
+          cd ..
+          git submodule init
+          git submodule update
+
+      - name: Cypress run (edge)
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./benefit-finder
+          browser: edge
+          env: NODE_ENV=test
+          build: "npm run cy:build:storybook"
+          start: "npm run cy:run:pipeline"
 
+  tests-webkit:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
       - name: Install Node
         uses: actions/setup-node@v4
         with:
@@ -31,19 +104,45 @@ jobs:
           cd ..
           git submodule init
           git submodule update
-          cd benefit-finder
 
-      - name: Cypress Run Tests
+      - name: Install dependencies
         uses: cypress-io/github-action@v6
         with:
-          browser: 'chrome'
-          config-file: cypress.config.js
-          working-directory: benefit-finder
+          working-directory: ./benefit-finder
+          build: npx playwright install-deps webkit
+          runTests: false
+
+      - name: Cypress run (WebKit)
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./benefit-finder
+          install: false
+          browser: webkit
+          env: NODE_ENV=test
           build: "npm run cy:build:storybook"
           start: "npm run cy:run:pipeline"
 
-      - uses: actions/upload-artifact@v3
-        if: failure ()
+  tests-components:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: "./benefit-finder/package.json"
+
+      - name: Install Submodule
+        run: |
+          cd ..
+          git submodule init
+          git submodule update
+
+      - name: Cypress run (Chrome)
+        uses: cypress-io/github-action@v6
         with:
-          name: cypress-screenshots
-          path: cypress/screenshots
+          working-directory: ./benefit-finder
+          component: true
+          browser: chrome
+          env: NODE_ENV=test
+          build: "npm run cy:prebuild:storybook"

benefit-finder/cypress.config.js

@@ -2,6 +2,11 @@
 const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
+  experimentalWebKitSupport: true,
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
   e2e: {
     baseUrl: 'http://localhost:6006',
     excludeSpecPattern: 'cypress/e2e/usagov-public-site/*.cy.js',

benefit-finder/package.json

@@ -34,7 +34,11 @@
     "cy:run": "NODE_ENV=test npm run cy:run:component && npm run cy:run:e2e",
     "cy:run:prod:e2e": "NODE_ENV=test npx cypress run --config-file cypress.prod.config.js --browser chrome",
     "cy:run:prod:links:e2e": "NODE_ENV=test npx cypress run --config-file cypress.prod.links.config.js --browser chrome",
-    "cy:run:pipeline": "NODE_ENV=test concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"   \"http-server ./storybook-static --port 6006 --silent\"   \"wait-on tcp:6006 && npm run cy:run\" -Y"
+    "cy:run:pipeline": "NODE_ENV=test concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"   \"http-server ./storybook-static --port 6006 --silent\" -Y",
+    "cy:run:edge:e2e": "NODE_ENV=test npx cypress run --browser edge",
+    "cy:run:firefox:e2e": "NODE_ENV=test npx cypress run --browser firefox",
+    "cy:run:webkit-safari:e2e": "NODE_ENV=test npx cypress run --browser webkit",
+    "cy:run:cross-browser:e2e": "NODE_ENV=test npm run cy:run:e2e && npm run cy:run:edge:e2e && npm run cy:run:firefox:e2e && cy:run:webkit-safari:e2e"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -75,6 +79,7 @@
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
+    "playwright-webkit": "^1.43.1",
     "plop": "^4.0.1",
     "postcss": "^8.4.35",
     "prettier": "^3.2.4",