[Issue #8184] allow usage of playwright tags in e2e test jobs (#8960)

Adds support for limiting which playwright tests are run in our e2e testing ci jobs by passing playwright tags.

Includes definition of groups to two tests - these are meant to facilitate verification and manual testing of this PR, but the assigned groups are also the correct groups for these, so leaving them in the PR.

Also cleans up the implementation of the "api_logs" param in the local ci job, which was previously accepting free text

Author: doug-s-nava

.github/actions/e2e/action.yml

@@ -15,6 +15,8 @@ inputs:
     description: "password for staging test user"
   staging_test_user_mfa_key:
     description: "mfa key for staging test user"
+  playwright_tags:
+    description: "pipe separated list of tags denoting groups of tests to run"
   total_shards:
     description: "total number of test shards in parent run"
     default: "1"
@@ -77,7 +79,8 @@ runs:
         npm install @playwright/test
         npx playwright install --with-deps
 
-    - name: Run e2e tests (Shard ${{ inputs.shard }}/${{ inputs.total_shards }})
+    - name: Run all e2e tests (Shard ${{ inputs.current_shard }}/${{ inputs.total_shards }})
+      if: ${{ inputs.playwright_tags == '' }}
       working-directory: ./frontend
       env:
         CI: true
@@ -88,10 +91,25 @@ runs:
         STAGING_TEST_USER_PASSWORD: ${{ inputs.staging_test_user_password }}
         STAGING_TEST_USER_MFA_KEY: ${{ inputs.staging_test_user_mfa_key }}
       run: |
-        echo $STAGING_TEST_USER_EMAIL
         npm run test:e2e
       shell: bash
 
+
+    - name: Run e2e tests for ${{ inputs.playwright_tags }} (Shard ${{ inputs.current_shard }}/${{ inputs.total_shards }})
+      if: ${{ inputs.playwright_tags != '' }}
+      working-directory: ./frontend
+      env:
+        CI: true
+        TOTAL_SHARDS: ${{ inputs.total_shards }}
+        CURRENT_SHARD: ${{ inputs.current_shard }}
+        PLAYWRIGHT_TARGET_ENV: ${{ inputs.target }}
+        STAGING_TEST_USER_EMAIL: ${{ inputs.staging_test_user_email }}
+        STAGING_TEST_USER_PASSWORD: ${{ inputs.staging_test_user_password }}
+        STAGING_TEST_USER_MFA_KEY: ${{ inputs.staging_test_user_mfa_key }}
+      run: |
+        npm run test:e2e -- --grep "${{ inputs.playwright_tags }}"
+      shell: bash
+
     - name: Debug logging on failure
       if:  ${{ failure() && inputs.api_logs == 'true' }}
       working-directory: ./frontend

.github/workflows/ci-frontend-e2e.yml

@@ -14,8 +14,22 @@ on:
     inputs:
       api_logs:
         description: "print api logs on failure?"
+        default: false
+        type: boolean
+      playwright_tags:
+        description: "pipe separated list of @tags denoting groups of tests to run"
+        required: false
         type: string
   workflow_call:
+    inputs:
+      api_logs:
+        description: "print api logs on failure?"
+        default: false
+        type: boolean
+      playwright_tags:
+        description: "pipe separated list of @tags denoting groups of tests to run"
+        required: false
+        type: string
   pull_request:
     paths:
       - frontend/**
@@ -99,7 +113,8 @@ jobs:
           needs_node_setup: "false"
           total_shards: ${{ matrix.total_shards }}
           current_shard: ${{ matrix.shard }}
-          api_logs: ${{ inputs.api_logs }}
+          api_logs: ${{ inputs.api_logs && 'true' || 'false' }}
+          playwright_tags: ${{ inputs.playwright_tags }}
           staging_test_user_email: ${{ secrets.STAGING_TEST_USER_EMAIL }}
           staging_test_user_password: ${{ secrets.STAGING_TEST_USER_PASSWORD }}
           staging_test_user_mfa_key: ${{ secrets.STAGING_TEST_USER_MFA_KEY }}

.github/workflows/e2e-staging.yml

@@ -16,6 +16,10 @@ on:
         type: choice
         options:
           - staging
+      playwright_tags:
+        description: "pipe separated list of @tags denoting groups of tests to run"
+        required: false
+        type: string
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -35,14 +39,16 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Set target
-        run: if [[ -z "${{ inputs.target }}" ]]; then echo "defaulted_target=staging" >> "$GITHUB_ENV"; else echo 'defaulted_target="${{ inputs.target }}"' >> "$GITHUB_ENV"; fi
+        run: if [[ -z "${{ inputs.target }}" ]]; then echo "defaulted_target=staging" >> "$GITHUB_ENV"; else echo "defaulted_target=${{ inputs.target }}" >> "$GITHUB_ENV"; fi
 
-      - uses: ./.github/actions/e2e
+      - name: Run E2E tests
+        uses: ./.github/actions/e2e
         with:
           version: ${{ inputs.version || github.ref }}
           target: ${{ env.defaulted_target }}
           total_shards: ${{ matrix.total_shards }}
           current_shard: ${{ matrix.shard }}
+          playwright_tags: ${{ inputs.playwright_tags }}
           staging_test_user_email: ${{ secrets.STAGING_TEST_USER_EMAIL }}
           staging_test_user_password: ${{ secrets.STAGING_TEST_USER_PASSWORD }}
           staging_test_user_mfa_key: ${{ secrets.STAGING_TEST_USER_MFA_KEY }}

frontend/tests/e2e/index.spec.ts

@@ -10,23 +10,24 @@ test.beforeEach(async ({ page }) => {
   await page.goto("/", { waitUntil: "domcontentloaded", timeout });
 });
 
-test("has title", async ({ page }) => {
-  await expect(page).toHaveTitle(/Simpler.Grants.gov/);
+test("has title", { tag: "@smoke" }, async ({ page }) => {
+  await expect(page).toHaveTitle(/Simpler\.Grants\.gov/);
 });
 
-test("clicking 'follow on GitHub' link opens a new tab pointed at Github repository", async ({
-  page,
-  context,
-}) => {
-  const pagePromise = context.waitForEvent("page");
-  // Click the Follow on GitHub link
-  await page.getByRole("link", { name: "Follow on GitHub" }).click();
-  const newPage = await pagePromise;
-  await newPage.waitForLoadState();
-  await expect(newPage).toHaveURL(
-    /https:\/\/github.com\/HHS\/simpler-grants-gov/,
-  );
-});
+test(
+  "clicking 'follow on GitHub' link opens a new tab pointed at Github repository",
+  { tag: "@full-regression" },
+  async ({ page, context }) => {
+    const pagePromise = context.waitForEvent("page");
+    // Click the Follow on GitHub link
+    await page.getByRole("link", { name: "Follow on GitHub" }).click();
+    const newPage = await pagePromise;
+    await newPage.waitForLoadState();
+    await expect(newPage).toHaveURL(
+      "https://github.com/HHS/simpler-grants-gov",
+    );
+  },
+);
 
 test("skips to main content when navigating via keyboard", async ({
   page,