Automated Front Tests with GitHub Actions & Playwright

import { defineConfig, PlaywrightTestConfig } from '@playwright/test';
import * as dotenv from 'dotenv';

dotenv.config();

const isCI: boolean = !!process.env.CI;

const config: PlaywrightTestConfig = {
  testDir: './tests',

  // Concurrency and retries
  workers: isCI ? 4 : undefined,  // 4 on CI, default value on local
  fullyParallel: true,
  retries: isCI ? 2 : 0,          // Retry on CI only

  // Timeouts
  timeout: 60_000,                // 60 seconds per test
  globalTimeout: 10 * 60_000,     // 10 mins for entire run
  expect: { timeout: 10_000 },    // 10 seconds for expect() assertions

  // Fail build on CI if test.only is in the source code
  forbidOnly: !!process.env.CI,

  globalSetup: require.resolve('./global-playwright-setup'),

  // Shared settings for all tests
  use: {
    headless: true,
    baseURL: process.env.TEST_URL || 'https://www.YOUR_LIVE_SITE.com',

    // Helps us identify and allow the worker requests
    extraHTTPHeaders: { 'x-automation-test': 'playwright' },

    navigationTimeout: 30_000,  // 30 seconds for page.goto / click nav
    actionTimeout: 30_000,      // 30 seconds for each action

    trace: 'on-first-retry',    // Collect trace when retrying the failed test
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    }
  ]
};

export default defineConfig(config);

import { chromium, LaunchOptions, BrowserContext } from '@playwright/test';
import { blockExternalHosts } from './src/util/block-external-hosts.js';

// Additional configurations for the playwright tests
interface Project {
  use: {
    launchOptions?: LaunchOptions & {
      contextCreator?: (...args: any[]) => Promise<BrowserContext>;
    };
  };
}

interface Config {
  projects: Project[];
}

export default async function globalSetup(config: Config): Promise<void> {
  for (const project of config.projects) {
    project.use ??= {};
    const original = project.use.launchOptions?.contextCreator;

    project.use.launchOptions = {
      ...project.use.launchOptions,
      contextCreator: async (...args: any[]): Promise<BrowserContext> => {
        const context = original
          ? await original(...args)
          : await chromium.launchPersistentContext('', {});
        await blockExternalHosts(context);

        // Abort all image / font requests -- we don't currently use them in our tests and we don't want to consume excessive bandwidth
        await context.route('**/*', route => {
          const req = route.request();
          if (['image', 'font'].includes(req.resourceType())) return route.abort();
          route.continue();
        });

        return context;
      }
    };
  }
}

// Util for test suite to abort all network requests except those which are needed for fetching HTML
// This prevents the loading of analytics, ads, pixels, cookie consent, etc.
import { BrowserContext } from '@playwright/test';

export async function blockExternalHosts(context: BrowserContext, extraAllowedHosts: string[] = []): Promise<void> {
  // The domains that we expect Playwright to hit
  // Note that subdomains are automatically allowed
  const ALLOWED_HOSTS: string[] = [
    'www.YOUR_LIVE_SITE.com',
    'YOUR_LIVE_SITE.com',
    'vercel.com',
    'vercel.app',
    'localhost',
    '127.0.0.1',
    ...extraAllowedHosts
  ];

  function hostIsAllowed(hostname: string): boolean {
    hostname = hostname.toLowerCase();

    return ALLOWED_HOSTS.some(allowed => {
      allowed = allowed.toLowerCase();
      return (
        hostname === allowed ||
        hostname.endsWith('.' + allowed) // subdomains
      );
    });
  }

  // Intercept all requests
  await context.route('**/*', (route) => {
    const url = route.request().url();

    const isHttpScheme = /^https?:/i.test(url);
    if (!isHttpScheme) {
      return route.continue();
    }

    const { hostname } = new URL(url);

    if (hostIsAllowed(hostname)) {
      return route.continue();
    }

    route.abort();
  });

  // Modify global vars related to analytics before page scripts run to prevent tracking and console errors
  await context.addInitScript(() => {
    (window as any)['ga-disable-all'] = true;
    (window as any)['ga-disable'] = true;
    (window as any).lintrk = () => {};
    (window as any).clarity = () => {};
    (window as any).fbq = () => {};
  });
}

import { test, expect, Page } from '@playwright/test';
import { GraphQLClient, gql } from 'graphql-request';

test('SOME_PAGE returns article cards', async ({ page, baseURL }) => {
    const path = "/SOME_PAGE";
    console.log(`Testing article cards on ${baseURL + path}`)
    await page.goto(baseURL + path, { waitUntil: 'domcontentloaded' });

    const cardContainer = await page.locator('div[class*="articleDirectory_resultsContainer__"]');
    const ul = cardContainer.locator('ul[class*="cardGrid_cardGrid__"]');
    await expect(ul).toHaveCount(1);

    const cards = ul.locator('li div[class*="articleCard_card__"]');
    const count = await cards.count();
    await expect(count).toBeGreaterThanOrEqual(10);
});

test('locationPanel appears on office pages', async ({ page, baseURL }: { page: Page, baseURL: string }) => {
  const endpoint = process.env.GRAPHQL_ENDPOINT;
  const apiKey = process.env.SITECORE_API_KEY;

  if (!endpoint || !apiKey || !baseURL) throw new Error('Missing environment variables');

  const client = new GraphQLClient(endpoint, {
    headers: { sc_apikey: apiKey },
  });

  const queries = {
    office: gql`
      query {
        item(path: "/sitecore/content/ACME/home/offices", language: "en") {
          children(first: 3) {
            results {
              url { path }
            }
          }
        }
      }
    `,
    render: gql`
      query GetRendered($path: String!, $language: String!) {
        item(path: $path, language: $language) {
          rendered
        }
      }
    `,
  };

  const paths: string[] = [];

  for (const key of ['office'] as const) {
    const data = await client.request(queries[key]);

    const validPaths = (data?.item?.children?.results ?? [])
      .filter((r: any) => r?.url?.path)
      .map((r: any) => r.url.path);

    paths.push(...validPaths);
  }

  const testPaths: string[] = [];

  for (const path of paths) {
    try {
      const fullPath = '/sitecore/content/ACME/home' + path;
      const data = await client.request(queries.render, { path: fullPath, language: 'en' });
      const renderings = data?.item?.rendered?.sitecore?.route?.placeholders?.['jss-main'] ?? [];
      if (renderings.some((r: any) => r.componentName === 'locationPanel')) {
        testPaths.push(path);
      }
    } catch (e: any) {
      console.warn(`Skipping ${path}: ${e.message}`);
    }
  }

  if (!testPaths.length) throw new Error('No pages found with locationPanel component');

  for (const path of testPaths) {
    await test.step(`Visiting ${path}`, async () => {
      await page.goto(baseURL + path, { waitUntil: 'domcontentloaded' });

      console.log(`Testing locations component on ${baseURL + path}`);

      const ourLocationsContainer = await page.locator('section[class*="ourLocations_container__"]');
      await expect(ourLocationsContainer).toBeVisible();

      const ourLocationsList = ourLocationsContainer.locator('ul[class*="carousel_carousel__"]');
      await expect(ourLocationsList).toHaveCount(1);

      const ourLocationsCards = ourLocationsList.locator('li div[class*="ourLocations_card__"]');
      const ourLocationsCount = await ourLocationsCards.count();
      await expect(ourLocationsCount).toBeGreaterThanOrEqual(1);
    });
  }
});

name: Run Front End Tests
on:
  workflow_dispatch:     # Allows manual runs from GitHub UI
  schedule:              # Run nightly at 00:00 AM UTC
    - cron: '0 0 * * *'
  # repository_dispatch:  # Run when a Vercel deployment succeeds
  #   types: [vercel.deployment.success]
permissions:
  contents: read  # Ensure caching permissions
jobs:
  e2e:
    # if: github.event_name != 'repository_dispatch' || github.event.client_payload.target == 'preview'
    concurrency:  # Automatically cancel any running builds from same ref
      group: e2e-${{ github.ref }}
      cancel-in-progress: true
    runs-on: ubuntu-latest
    steps:
          - name: Checkout commit
            uses: actions/checkout@v4
            # Use the exact commit that Vercel built, use current for manual/cron
            with:
              ref: ${{ github.event.client_payload.git.sha || github.sha }}

          - name: Set up Node.js
            uses: actions/setup-node@v4
            with:
              node-version: 18
              cache: npm
              cache-dependency-path: package-lock.json

          - name: Restore Playwright browsers
            id: pw-cache
            uses: actions/cache@v4
            with:
              path: ~/.cache/ms-playwright  # Playwright binaries location
              key: pw-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}

          - name: Install dependencies
            run: npm ci --no-audit --prefer-offline --progress=false

          - name: Install Chromium if Cache Missed
            if: steps.pw-cache.outputs.cache-hit != 'true'
            run: npx playwright install chromium --with-deps

          - name: Run Playwright tests
            run: |
              echo "Running tests against: $TEST_URL"
              npx playwright test
            env:
              # Use the Vercel preview url, use PROD for manual/cron
              TEST_URL: ${{ github.event.client_payload.url || 'https://www.YOUR_LIVE_SITE.com' }}
              GRAPHQL_ENDPOINT: ${{ secrets.GRAPHQL_ENDPOINT }}
              SITECORE_API_KEY: ${{ secrets.SITECORE_API_KEY }}