Playwright Testing for Astro Static Site and Island Architecture

This guide provides complete, production-ready Playwright patterns for playwright testing for astro static site and island architecture.

Introduction

Robust test automation requires domain-specific patterns. This article covers playwright testing for astro static site and island architecture with practical code examples you can use immediately in your test suite.

Architecture Overview

graph TD
    Test["Playwright Test"] --> App["Application Under Test"]
    App --> API["Backend API / Mock"]
    API --> Assert["Test Assertions Pass"]

Implementation

test('Astro island hydrates correctly', async ({ page }) => {
  await page.goto('/blog');
  // Static content should be immediately available
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  // Astro island (interactive component) hydrates on demand
  const counter = page.getByTestId('interactive-counter');
  await counter.scrollIntoViewIfNeeded(); // Trigger visible:idle hydration
  await counter.getByRole('button', { name: '+' }).click();
  await expect(counter.getByTestId('count')).toContainText('1');
});

Run Tests

npx playwright test --grep "Playwright Testing for"
npx playwright test --ui

Reference Table

Best Practices

Common Mistakes

Frequently Asked Questions

How to test Astro client:visible hydration?

Scroll the island into view and verify it becomes interactive after entering the viewport.

How to test Astro static content vs interactive islands?

Verify static content loads immediately and islands only become interactive after hydration.

Can Playwright test Astro View Transitions?

Yes, navigate between pages and verify the CSS View Transition animations play correctly.

How to test Astro content collections?

Navigate to generated routes and verify the correct MDX content is rendered for each slug.

How to test Astro image optimization?

Verify that images use the Astro Image component output with correct srcset and sizes attributes.

Summary

This guide covered playwright testing for astro static site and island architecture. Apply these patterns to build reliable, fast, and maintainable automation for this specific scenario.

Related Articles