Playwright Testing for GOV.UK Frontend Components and Design System

Region Focus: This guide includes examples and patterns specifically relevant to UK-based development teams and applications.

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Test GOV.UK design system components including error summaries, validation patterns, and accessibility in UK government digital services. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    Form["GOV.UK Form"] --> Submit["Submit Without Data"]
    Submit --> Summary["Error Summary"]
    Summary --> Field["Focused Error Field"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

test('GOV.UK error summary displays correctly', async ({ page }) => {
  await page.goto('/apply/step-1');
  await page.getByRole('button', { name: 'Continue' }).click();
  const errorSummary = page.getByRole('alert', { name: 'There is a problem' });
  await expect(errorSummary).toBeVisible();
  await expect(errorSummary.getByRole('link')).toHaveCount(2);
  // Click error link and verify focus moves to field
  await errorSummary.getByRole('link').first().click();
  await expect(page.getByLabel('Full name')).toBeFocused();
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Playwright Testing for"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

How to test GOV.UK accordion components?

Use page.getByRole('button', { expanded: false }) to find collapsed sections and verify they expand on click.

How to test GOV.UK file upload components?

Use page.setInputFiles() with the file input element to upload test documents.

Can Playwright test GOV.UK Notify integrations?

Mock GOV.UK Notify API endpoints and verify that your service calls them with correct notification parameters.

How to test One Login (UK government SSO) flows?

Mock the GOV.UK One Login OAuth flow and verify your service handles the authentication callback correctly.

What testing approach works for GOV.UK Pay?

Use GOV.UK Pay's sandbox environment with test card numbers to validate payment completion flows.

Summary

Test GOV.UK design system components including error summaries, validation patterns, and accessibility in UK government digital services. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles