Initial Playwright setup (#62)

Enterprise-CMCS · Dec 10, 2024 · 8474e3b · 8474e3b
1 parent 888ec4b
commit 8474e3b
Show file tree

Hide file tree

Showing 13 changed files with 438 additions and 175 deletions.
diff --git a/.env.tpl b/.env.tpl
@@ -20,11 +20,12 @@ VPC_SUBNET_B=local-nonsense
 VPC_SUBNET_C=local-nonsense
 BROKER_STRINGS=local-nonsense
 
-# needed for e2e tests
-CYPRESS_ADMIN_USER_EMAIL=op://mdct_devs/hcbs_secrets/CYPRESS_ADMIN_USER_EMAIL
-CYPRESS_ADMIN_USER_PASSWORD=op://mdct_devs/hcbs_secrets/CYPRESS_ADMIN_USER_PASSWORD # pragma: allowlist secret
-CYPRESS_STATE_USER_EMAIL=op://mdct_devs/hcbs_secrets/CYPRESS_STATE_USER_EMAIL
-CYPRESS_STATE_USER_PASSWORD=op://mdct_devs/hcbs_secrets/CYPRESS_STATE_USER_PASSWORD # pragma: allowlist secret
+# These settings are needed for playwright end-to-end tests
+TEST_ADMIN_USER_EMAIL=op://mdct_devs/hcbs_secrets/CYPRESS_ADMIN_USER_EMAIL
+TEST_ADMIN_USER_PASSWORD=op://mdct_devs/hcbs_secrets/CYPRESS_ADMIN_USER_PASSWORD # pragma: allowlist secret
+TEST_STATE_USER_EMAIL=op://mdct_devs/hcbs_secrets/CYPRESS_STATE_USER_EMAIL
+TEST_STATE_USER_PASSWORD=op://mdct_devs/hcbs_secrets/CYPRESS_STATE_USER_PASSWORD # pragma: allowlist secret
+TEST_STATE=DC
 
 # db:seed
 SEED_ADMIN_USER_EMAIL=op://mdct_devs/hcbs_secrets/SEED_ADMIN_USER_EMAIL

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -203,176 +203,109 @@ jobs:
       ipset_name: ${{ steps.fetch-ip-set-info.outputs.IPSET_NAME }}
       ipset_id: ${{ steps.fetch-ip-set-info.outputs.IPSET_ID }}
 
-  # e2e-test:
-  #   name: E2E Integration Tests
-  #   needs:
-  #     - deploy
-  #     - register-runner
-  #   if: ${{ always() && !cancelled() && needs.deploy.result == 'success' && github.ref_name != 'production' }}
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - name: Run Cypress Tests
-  #       uses: cypress-io/github-action@v6
-  #       with:
-  #         working-directory: tests
-  #         spec: |
-  #           cypress/e2e/wp/*.cy.js
-  #           cypress/e2e/sar/*.cy.js
-  #           cypress/e2e/*.cy.js
-  #         browser: chrome
-  #         config: baseUrl=${{ needs.deploy.outputs.application_endpoint }}
-  #         wait-on: ${{ needs.deploy.outputs.application_endpoint }}
-  #         env: true
-  #       env:
-  #         CYPRESS_STATE_USER_EMAIL: ${{ secrets.CYPRESS_STATE_USER_EMAIL }}
-  #         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 }}
-  #     - name: Upload screenshots
-  #       uses: actions/upload-artifact@v4
-  #       if: failure()
-  #       with:
-  #         name: cypress-test-results
-  #         path: |
-  #           ${{github.workspace}}/tests/screenshots/
-  #           ${{github.workspace}}/tests/videos/
-  #         retention-days: 14
-
-  # a11y-tests:
-  #   name: E2E A11y Tests
-  #   needs:
-  #     - deploy
-  #     - register-runner
-  #   if: ${{ always() && !cancelled() && needs.deploy.result == 'success' && github.ref_name != 'production' }}
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - name: Check Project A11y
-  #       uses: cypress-io/github-action@v6
-  #       with:
-  #         working-directory: tests
-  #         spec: cypress/e2e/accessibility/*.cy.js
-  #         browser: chrome
-  #         config: baseUrl=${{ needs.deploy.outputs.application_endpoint }}
-  #         wait-on: ${{ needs.deploy.outputs.application_endpoint }}
-  #         env: true
-  #       env:
-  #         CYPRESS_STATE_USER_EMAIL: ${{ secrets.CYPRESS_STATE_USER_EMAIL }}
-  #         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 }}
-  #     - name: Upload screenshots
-  #       uses: actions/upload-artifact@v4
-  #       if: failure()
-  #       with:
-  #         name: a11y-test-results
-  #         path: |
-  #           ${{github.workspace}}/tests/screenshots/
-  #           ${{github.workspace}}/tests/videos/
-  #         retention-days: 14
-
-  # test:
-  #   name: Playwright Tests
-  #   needs:
-  #     - deploy
-  #     - register-runner
-  #   if: ${{ always() && !cancelled() && needs.deploy.result == 'success' && github.ref_name != 'production' }}
-  #   timeout-minutes: 60
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - name: Configure AWS credentials for GitHub Actions
-  #       uses: aws-actions/configure-aws-credentials@v4
-  #       with:
-  #         role-to-assume: ${{ secrets[env.BRANCH_SPECIFIC_VARNAME_AWS_OIDC_ROLE_TO_ASSUME] || secrets.AWS_OIDC_ROLE_TO_ASSUME }}
-  #         aws-region: ${{ secrets[env.BRANCH_SPECIFIC_VARNAME_AWS_DEFAULT_REGION] || secrets.AWS_DEFAULT_REGION }}
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: ".nvmrc"
-  #     - name: yarn install
-  #       run: yarn install
-  #     - name: Install Playwright Browsers
-  #       run: yarn playwright install --with-deps
-  #     - name: Run Playwright tests
-  #       run: yarn playwright test
-  #       continue-on-error: true
-  #       env:
-  #         BASE_URL: ${{ needs.deploy.outputs.application_endpoint }}
-  #         CYPRESS_STATE_USER_EMAIL: ${{ secrets.CYPRESS_STATE_USER_EMAIL }}
-  #         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 }}
-  #         SEED_ADMIN_USER_EMAIL: ${{ secrets.SEED_ADMIN_USER_EMAIL }}
-  #         SEED_ADMIN_USER_PASSWORD: ${{ secrets.SEED_ADMIN_USER_PASSWORD }}
-  #         SEED_STATE_USER_EMAIL: ${{ secrets.SEED_STATE_USER_EMAIL }}
-  #         SEED_STATE_USER_PASSWORD: ${{ secrets.SEED_STATE_USER_PASSWORD }}
-  #     - uses: actions/upload-artifact@v4
-  #       if: ${{ !cancelled() }}
-  #       with:
-  #         name: playwright-html-report # upload artifact as this name
-  #         # path: playwright-report/index.html # path on runner
-  #         path: playwright-report # path on runner
-  #         retention-days: 30
+  test:
+    name: Playwright Tests
+    needs:
+      - deploy
+      - register-runner
+    if: ${{ always() && !cancelled() && needs.deploy.result == 'success' && github.ref_name != 'production' }}
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Configure AWS credentials for GitHub Actions
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets[env.BRANCH_SPECIFIC_VARNAME_AWS_OIDC_ROLE_TO_ASSUME] || secrets.AWS_OIDC_ROLE_TO_ASSUME }}
+          aws-region: ${{ secrets[env.BRANCH_SPECIFIC_VARNAME_AWS_DEFAULT_REGION] || secrets.AWS_DEFAULT_REGION }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - name: yarn install
+        run: yarn install
+      - name: yarn install tests
+        run: yarn install
+        working-directory: tests
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+        working-directory: tests
+      - name: Run Playwright tests
+        run: yarn playwright test
+        id: run_playwright_tests
+        working-directory: tests
+        continue-on-error: true
+        env:
+          BASE_URL: ${{ needs.deploy.outputs.application_endpoint }}
+          TEST_STATE_USER_EMAIL: ${{ secrets.TEST_STATE_USER_EMAIL }}
+          TEST_STATE_USER_PASSWORD: ${{ secrets.TEST_STATE_USER_PASSWORD }}
+          TEST_ADMIN_USER_EMAIL: ${{ secrets.TEST_ADMIN_USER_EMAIL }}
+          TEST_ADMIN_USER_PASSWORD: ${{ secrets.TEST_ADMIN_USER_PASSWORD }}
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-html-report # upload artifact as this name
+          # path: playwright-report/index.html # path on runner
+          path: tests/playwright-report # path on runner
+          retention-days: 30
+    outputs:
+      test_outcome: ${{ steps.run_playwright_tests.outcome }}
 
-  # upload-reports:
-  #   name: Upload Reports
-  #   needs:
-  #     - test
-  #   if: always()
-  #   runs-on: ubuntu-latest
-  #   outputs:
-  #     timestamp: ${{ steps.timestampid.outputs.timestamp }}
-  #   steps:
-  #     # create a unique folder name to put playwright reports in
-  #     - name: Set a Timestamp
-  #       id: timestampid
-  #       run: echo "timestamp=$(date --utc +%Y%m%d_%H%M%SZ)" >> "$GITHUB_OUTPUT"
-  #     - uses: actions/checkout@v4
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version-file: ".nvmrc"
-  #     - name: Install dependencies
-  #       run: yarn install
-  #     # downloads artifact created from the test job
-  #     - name: Download reports from GitHub Actions Artifacts
-  #       uses: actions/download-artifact@v4
-  #       with:
-  #         name: playwright-html-report # download from previous job
-  #         path: downloaded-html-report # save as this when downloaded
-  #     - name: Push files to github pages
-  #       uses: peaceiris/actions-gh-pages@v4
-  #       with:
-  #         github_token: ${{ secrets.GITHUB_TOKEN }}
-  #         publish_dir: ./downloaded-html-report # publish downloaded dir to github pages
-  #         destination_dir: ${{ steps.timestampid.outputs.timestamp }}
-  #     # need to extract just org name for reassembling the github pages URL
-  #     - name: Extract Organization Name
-  #       id: extract-org
-  #       run: |
-  #         echo "ORG_NAME=$(echo $GITHUB_REPOSITORY | cut -d'/' -f1)" >> $GITHUB_ENV
-  #         echo "org name: ${ORG_NAME}"
-  #     # need to extract just the repo name for reassembling the github pages URL
-  #     - name: Extract Repository Name
-  #       id: extract-repo
-  #       run: |
-  #         echo "REPO_NAME=$(echo $GITHUB_REPOSITORY | cut -d'/' -f2)" >> $GITHUB_ENV
-  #         echo "repo name: ${REPO_NAME}"
-  #     # assembles org name, repo name, and unique timestamp to link to github pages url that was published
-  #     - name: Write URL in Summary
-  #       run: |
-  #         echo "## Playwright Test Results" >> $GITHUB_STEP_SUMMARY
-  #         echo "https://${ORG_NAME}.github.io/${REPO_NAME}/${{ steps.timestampid.outputs.timestamp }}/" >> $GITHUB_STEP_SUMMARY
+  upload-reports:
+    name: Upload Reports
+    needs:
+      - test
+    if: ${{ always() && github.ref_name != 'production' }}
+    runs-on: ubuntu-latest
+    outputs:
+      timestamp: ${{ steps.timestampid.outputs.timestamp }}
+    steps:
+      # create a unique folder name to put playwright reports in
+      - name: Set a Timestamp
+        id: timestampid
+        run: echo "timestamp=$(date --utc +%Y%m%d_%H%M%SZ)" >> "$GITHUB_OUTPUT"
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - name: Install dependencies
+        run: yarn install
+      # downloads artifact created from the test job
+      - name: Download reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: playwright-html-report # download from previous job
+          path: downloaded-html-report # save as this when downloaded
+      - name: Push files to github pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./downloaded-html-report # publish downloaded dir to github pages
+          destination_dir: ${{ steps.timestampid.outputs.timestamp }}
+      # need to extract just org name for reassembling the github pages URL
+      - name: Extract Organization Name
+        id: extract-org
+        run: |
+          echo "ORG_NAME=$(echo $GITHUB_REPOSITORY | cut -d'/' -f1)" >> $GITHUB_ENV
+          echo "org name: ${ORG_NAME}"
+      # need to extract just the repo name for reassembling the github pages URL
+      - name: Extract Repository Name
+        id: extract-repo
+        run: |
+          echo "REPO_NAME=$(echo $GITHUB_REPOSITORY | cut -d'/' -f2)" >> $GITHUB_ENV
+          echo "repo name: ${REPO_NAME}"
+      # assembles org name, repo name, and unique timestamp to link to github pages url that was published
+      - name: Write URL in Summary
+        run: |
+          echo "## Playwright Test Results" >> $GITHUB_STEP_SUMMARY
+          echo "https://${ORG_NAME}.github.io/${REPO_NAME}/${{ steps.timestampid.outputs.timestamp }}/" >> $GITHUB_STEP_SUMMARY
 
   cleanup:
-    name: Delist GHA Runner CIDR Blocks
+    name: Clean Up
     if: ${{ github.ref_name != 'main' && github.ref_name != 'val' && github.ref_name != 'production' }}
     runs-on: ubuntu-latest
     needs:
       - register-runner
-      # - a11y-tests
-      # - e2e-test
-      # - test
+      - test
     env:
       SLS_DEPRECATION_DISABLE: "*" # Turn off deprecation warnings in the pipeline
     steps:
@@ -394,3 +327,9 @@ jobs:
         env:
           AWS_RETRY_MODE: adaptive
           AWS_MAX_ATTEMPTS: 10
+      - name: Fail if tests did not pass
+        if: ${{ needs.test.outputs.test_outcome != 'success' }}
+        run: |
+          echo "End-to-end tests in the deployed environment were not successful."
+          echo "See the Playwright Report for details."
+          exit 1
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,8 @@ tests_output
 package-lock.json
 .vscode/
 *._S3rver_cors.xml
-.serverless
+.serverless
+tests/test-results/
+tests/playwright-report/
+tests/playwright/.cache/
+tests/playwright/.auth
diff --git a/services/ui-src/src/components/menus/Menu.tsx b/services/ui-src/src/components/menus/Menu.tsx
@@ -40,6 +40,11 @@ export const Menu = ({ handleLogout }: Props) => {
       <MenuList sx={sx.menuList}>
         <Link as={RouterLink} to="/profile" variant="unstyled">
           <MenuItem sx={sx.menuItem}>
+            {/*
+             * TODO: Will a screen reader announce this
+             * as "manage account manage account?"
+             * We may need to tone down the alt text.
+             */}
             <MenuOption
               icon={editIcon}
               altText="Manage account"

diff --git a/services/ui-src/src/index.tsx b/services/ui-src/src/index.tsx
@@ -61,6 +61,7 @@ const ldClientId = config.REACT_APP_LD_SDK_CLIENT;
       eventsUrl: "https://events.launchdarkly.us",
     },
     deferInitialization: false,
+    timeout: 2, // seconds
   });
 
   ReactDOM.render(

diff --git a/tests/package.json b/tests/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "tests",
+  "version": "1.0.0",
+  "description": "End-to-end tests for the HCBS application",
+  "license": "ISC",
+  "scripts": {
+    "test": "playwright test",
+    "test-ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@axe-core/playwright": "^4.10.1",
+    "@playwright/test": "^1.49.0",
+    "playwright": "^1.49.0"
+  }
+}