playwright-validation

name	playwright-validation
description	Use when validating UI changes in a branch require Playwright E2E testing. Reviews branch changes, validates UI with Playwright MCP, and adds missing test cases.

Playwright Validation Skill

This skill guides you through validating UI changes and ensuring comprehensive Playwright E2E test coverage.

When to Use

• After completing UI feature development
• Before creating a PR for UI changes
• When reviewing UI-related branches
• To verify existing Playwright tests cover all scenarios

Workflow

Phase 1: Review Branch Changes

1. Identify changed files vs main:

   git diff main --stat
   git diff main --name-only | grep -E "\.(tsx?|less|css|scss)$"
   

2. Focus on UI component changes:

   git diff main -- "openmetadata-ui/src/main/resources/ui/src/components/**" --stat
   

3. Check for existing Playwright tests:

   git diff main --name-only | grep -E "playwright.*\.spec\.ts$"
   

4. Read the changed component files to understand the UI modifications

Phase 2: Review Existing Playwright Tests

1. Locate relevant test files:

   • Check playwright/e2e/Pages/ for page-level tests
   • Check playwright/e2e/Features/ for feature-specific tests
   • Use Glob/Grep to find tests related to the feature

2. Analyze test coverage:

   • Read the existing test file(s)
   • Identify the test scenarios already covered
   • Note any gaps in coverage based on the UI changes

3. Review test utilities:

   • Check playwright/utils/ for helper functions
   • Check playwright/support/ for entity classes and fixtures

Phase 3: Validate with Playwright MCP

1. Start the browser and navigate:

   mcp__playwright__browser_navigate to http://localhost:8585
   

2. Authenticate if needed:

   • Use mcp__playwright__browser_fill_form for login
   • Default admin: [e-mail] / admin

3. Navigate to the feature area:

   • Use mcp__playwright__browser_click for navigation
   • Use mcp__playwright__browser_snapshot to inspect page state

4. Validate UI behavior:

   • Test the main user flows
   • Verify visual elements (icons, badges, labels)
   • Check interactive elements (buttons, dropdowns, forms)
   • Verify state changes and API calls

5. Document findings:

   • Note what works correctly
   • Identify any issues or missing functionality
   • List scenarios not covered by existing tests

Phase 4: Add Missing Test Cases

1. Create a TodoWrite checklist of missing test scenarios

2. For each missing test case:

   a. Add necessary test fixtures in beforeAll:

   • Create new entity instances (TableClass, DataProduct, etc.)
   • Set up required relationships (domains, assets)

   b. Add cleanup in afterAll:

   • Delete created entities in reverse order

   c. Write the test following the pattern:

   test('Descriptive Test Name - What it validates', async ({ page }) => {
     test.setTimeout(300000);
   
     await test.step('Step description', async () => {
       // Test actions and assertions
     });
   
     await test.step('Next step', async () => {
       // More actions and assertions
     });
   });
   

3. Test patterns to cover:

   • Happy path (expected behavior)
   • Edge cases (empty states, max values)
   • Error handling (invalid inputs, failed requests)
   • State transitions (before/after actions)
   • UI feedback (loading states, success/error messages)
   • Permissions (disabled buttons, restricted actions)

4. Run Playwright lint check:

   yarn lint:playwright
   

   Error-level rules (no-networkidle, no-page-pause, no-focused-test) will block CI. See the handbook's ESLint Enforcement section for the full rule reference.

Common Test Utilities

Navigation

import { sidebarClick } from '../../utils/sidebar';
import { redirectToHomePage } from '../../utils/common';
import { selectDataProduct, selectDomain } from '../../utils/domain';

Waiting

import { waitForAllLoadersToDisappear } from '../../utils/entity';
await waitForAllLoadersToDisappear(page);
await expect(page.getByTestId('content')).toBeVisible();
// NEVER use: page.waitForLoadState('networkidle') — blocked by ESLint

API Responses

const response = page.waitForResponse('/api/v1/endpoint*');
await someAction();
await response;
expect((await response).status()).toBe(200);

Assertions

await expect(page.getByTestId('element')).toBeVisible();
await expect(page.getByTestId('element')).toContainText('text');
await expect(page.locator('.class')).not.toBeVisible();

Checklist Before Completion

• All UI changes have corresponding test coverage
• Tests cover both positive and negative scenarios
• Tests verify visual indicators (icons, badges, states)
• Tests validate API interactions
• yarn lint:playwright passes with zero errors
• No networkidle, page.pause(), or test.only() usage (blocked by ESLint)
• Test fixtures are properly created and cleaned up
• Test timeouts use test.slow() (preferred) or test.setTimeout()

Example: Data Contract Inheritance Tests

For reference, see the comprehensive test coverage in: playwright/e2e/Pages/DataContractInheritance.spec.ts

This file demonstrates:

• Multiple entity setup in beforeAll
• Domain assignment patches
• Contract creation and validation
• Inheritance icon verification
• Action button state verification (disabled/enabled)
• API response validation (POST vs PATCH)
• Fallback behavior testing