skills.rest
sdcorejs
sdcorejsCOMMUNITY
Explore all skills by this author →
GitHub

sdcorejs-testing-e2e-nextjs

Generate Playwright end-to-end tests for Next.js landing sites.

2|Updated Apr 18, 2026
Search Tags:#nextjs#playwright#e2e testing#seo#ssr#og image#i18n routing
One-click install
npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-testing-e2e-nextjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sdcorejs-testing-e2e-nextjs
Source: https://github.com/sdcorejs/sdcorejs-agent/tree/main/plugin/skills/sdcorejs-testing-e2e-nextjs
Command: npx skills add https://github.com/sdcorejs/sdcorejs-agent --skill sdcorejs-testing-e2e-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents unnoticed production regressions in a Next.js landing site by validating SSR output, locale-prefixed routing, and user flows end-to-end.

Core Features & Use Cases

  • SSR-aware page acceptance: Asserts against raw server-rendered HTML before hydration to catch “works in dev, blank in prod” issues.
  • Locale-prefixed coverage (VI/EN): Executes smoke checks across /vi/... and a subset on /en/..., including locale switcher URL correctness.
  • Contact form E2E correctness: Covers happy path submission, validation errors, and the rate-limit security gate without real side effects.
  • SEO and social verification: Checks sitemap.xml, robots.txt, JSON-LD presence, unique <title>/metadata expectations, and OG image rendering (head meta + real image fetch).

Quick Start

Use this skill to write Playwright E2E tests by matching it to a request like “viết e2e nextjs cho landing contact”, then run the resulting npx playwright test against your build/start server (optionally via CI=1 and a staging E2E_BASE_URL).

Frequently Asked Questions about sdcorejs-testing-e2e-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Playwright E2E tests for Next.js SSR pages to catch hydration issues?▼

Playwright E2E tests for Next.js SSR validate raw server-rendered HTML before hydration. This catches blank page regressions in production by asserting against initial HTML output rather than waiting for client-side hydration.

How do I test locale-prefixed routing and bilingual VI/EN smoke checks in Next.js?▼

Test locale-prefixed routing by executing Playwright smoke checks across /vi/ and /en/ paths. This verifies locale switcher URL correctness and ensures bilingual routing maps users to the correct language routes.

What is the best way to E2E test Next.js SEO assets like sitemap.xml, robots.txt, and OG images?▼

E2E testing Next.js SEO assets checks sitemap.xml, robots.txt, JSON-LD presence, and unique title tags. It verifies OG image rendering by asserting head meta tags and fetching the real image to confirm reachability.

How do I test Next.js contact form submissions and rate limiting without real side effects?▼

Test Next.js contact form submissions by covering happy paths, validation errors, and rate-limit security gates. CI-safe API interception prevents real side effects during E2E testing.

Do I need to run npm run build and npm run start before executing Playwright E2E tests?▼

You need a production-like execution via npm run build and npm run start before running Playwright E2E tests. Playwright setup requires configuring baseURL and webServer to target this running build.

Related Skills

Explore More Software Engineering Skills→
elbwalkerelbwalker
342

walkeros-understanding-development

Guide walkerOS contributors through npm-based build, test, and lint workflows.

Official
Intermediate
UnlimitedxIQUnlimitedxIQ

e2e-testing

Automate end-to-end web application testing with Playwright across browsers and CI pipelines.

Community
Advanced
sdcorejssdcorejs
2

nextjs-build-website-i18n

Add bilingual VI/EN internationalization to Next.js App Router sites with next-intl.

Community
Advanced
rhpdsrhpds

06-playwright-mcp

Configure and validate the Playwright MCP server for Claude Code browser automation.

Official
Advanced