Initial Playwright setup

Enterprise-CMCS · Nov 25, 2024 · 8a21add · 8a21add
1 parent f0484bd
commit 8a21add
Show file tree

Hide file tree

Showing 11 changed files with 297 additions and 174 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,108 @@ 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
+      - e2e-test
+      - a11y-tests
+    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
+        working-directory: tests
+        continue-on-error: true
+        env:
+          BASE_URL: ${{ needs.deploy.outputs.application_endpoint }}
+          TEST_STATE_USER_EMAIL: ${{ secrets.CYPRESS_STATE_USER_EMAIL }}
+          TEST_STATE_USER_PASSWORD: ${{ secrets.CYPRESS_STATE_USER_PASSWORD }}
+          TEST_ADMIN_USER_EMAIL: ${{ secrets.CYPRESS_ADMIN_USER_EMAIL }}
+          TEST_ADMIN_USER_PASSWORD: ${{ secrets.CYPRESS_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
 
-  # 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
     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:

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/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"
+  }
+}
diff --git a/tests/playwright.config.ts b/tests/playwright.config.ts
@@ -0,0 +1,59 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+dotenv.config({ path: "../.env" });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "playwright",
+  testMatch: ["**/*.spec.js", "**/*.spec.ts"],
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.BASE_URL || "http://localhost:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Video recording configuration */
+    video: "retain-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "setup",
+      use: { ...devices["Desktop Chrome"] },
+      testMatch: /.*\.setup\.ts/,
+    },
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+      dependencies: ["setup"],
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI ? "" : "cd ../ && ./run local",
+    url: process.env.BASE_URL || "http://localhost:3000",
+    reuseExistingServer: !!process.env.CI,
+    stdout: "pipe",
+  },
+});