Playwright Testing for Headless CMS Content and Preview Modes

This guide provides complete, production-ready Playwright patterns for playwright testing for headless cms content and preview modes.

Introduction

Robust test automation requires domain-specific patterns. This article covers playwright testing for headless cms content and preview modes 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('Contentful preview mode shows draft content', async ({ page }) => {
  // Enable preview mode via URL parameter or cookie
  await page.goto('/api/preview?secret=PREVIEW_TOKEN&slug=my-article');
  await expect(page.getByRole('banner')).toContainText('Preview Mode Active');
  // Draft content should be visible
  await page.goto('/blog/my-article');
  await expect(page.getByRole('heading')).toContainText('Draft: My Article');
});

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 Contentful preview mode with Playwright?

Visit the preview API route with the correct secret token and verify draft content is displayed.

How to test content rendering from CMS?

Mock the CMS API and verify your frontend correctly renders rich text, images, and structured content.

Can Playwright test Sanity Studio?

Yes, navigate to the Sanity Studio URL and test content editing flows like creating and publishing documents.

How to test i18n content from CMS?

Fetch content in different locales and verify the correct translated text appears for each locale.

How to test content search functionality?

Enter search terms and verify the CMS-powered search returns relevant results from the content repository.

Summary

This guide covered playwright testing for headless cms content and preview modes. Apply these patterns to build reliable, fast, and maintainable automation for this specific scenario.

Related Articles