Playwright Testing for Micro-Frontend Architecture with Module Federation

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 micro-frontend shell applications, federated module loading, cross-app navigation, and shared state in Module Federation setups. 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
    Shell["Shell App :3000"] --> Remote1["Product MFE :3001"]
    Shell --> Remote2["Cart MFE :3002"]
    Shell --> Auth["Shared Auth State"]
    Auth --> Remote1
    Auth --> Remote2

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('remote micro-frontend loads in shell app', async ({ page }) => {
  await page.goto('http://localhost:3000'); // Shell app
  // Navigate to route that loads remote MFE
  await page.getByRole('link', { name: 'Product Catalog' }).click();
  // Remote MFE loaded from http://localhost:3001
  await expect(page.getByTestId('product-catalog-root')).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Products' })).toBeVisible();
  // Verify shared auth state works across MFEs
  await expect(page.getByText('Welcome, John')).toBeVisible();
});

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 cross-MFE navigation in Playwright?

Click navigation links in the shell and verify the correct remote module renders in the designated mount point.

How to test shared state between micro-frontends?

Log into the shell, navigate to a remote MFE, and verify user state is available without re-authentication.

Can Playwright test Module Federation loading failures?

Block network requests to the remote MFE URL and verify the shell shows an appropriate fallback UI.

How to test micro-frontend hot module replacement?

This is a development concern. For E2E tests, focus on the deployed behavior in staging environments.

How to run Playwright tests against multiple MFE servers?

Use Playwright's webServer config array to start all MFE servers before the test suite runs.

Summary

Test micro-frontend shell applications, federated module loading, cross-app navigation, and shared state in Module Federation setups. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles