c10g

Shared Playwright checks for vanilla HTML/JS/CSS projects: smoke, console errors, broken links/stylesheets/scripts/images, accessibility, SEO/meta baseline (including that og:image and the favicon actually resolve, not just that the tags exist), duplicate element ids, and horizontal overflow at mobile width — plus a screenshot capture helper. Playwright itself stays the test runner; c10g just supplies the checks/tests.

Setup

1. Install

npm install --save-dev c10g

2. Use the shared Playwright config

Create playwright.config.js in the root of your project:

import { defineConfig } from '@playwright/test';
import { playwrightConfig } from 'c10g';

export default defineConfig(playwrightConfig);

Need something different for this project? Pass overrides as a second argument: defineConfig(playwrightConfig, { use: { baseURL: '...' } }).

3. Register the standard tests

Create test/e2e/c10g.spec.js:

import { test, expect } from '@playwright/test';
import { runStandardC10gTests, getPages } from 'c10g';

runStandardC10gTests({ test, expect, pages: getPages() });

test/expect come from your project's own @playwright/test — c10g takes them as arguments instead of importing its own copy, so tests always register against the exact instance your npx playwright test run collects from.

Screenshot capture (optional)

Run npx c10g-screenshots to capture screenshots of all pages in your project.

c10g ships this as a ready-to-run bin instead of code to wire up — there's no project-specific logic left in it, so there's nothing for a project to own. It boots the same server playwrightConfig.webServer describes (one source of truth for the port/serve command), captures every page via c10g's own pinned playwright browser, and tears the server down after. Screenshots land in c10g/screenshots/, grouped one folder per page, one PNG per breakpoint width.

Notes

1. c10g plugs into a project that already has Playwright set up.
2. Your project must be ESM ("type": "module" in package.json) — c10g only ships ES modules, no CommonJS/require() support.
3. If you use captureScreenshots, note it launches its own browser via c10g's own pinned playwright copy, separate from your project's @playwright/test — if the two end up on different Playwright versions, that's a second, separate browser binary download.

Why pinned dependency versions

This is a real dependency relationship even though it isn't declared via npm's peerDependencies field (see belo) — so npm won't warn you if @playwright/test is missing or misconfigured. If checks fail with navigation errors, this list is the first thing to check.

@axe-core/playwright and playwright (used only for screenshot capture) are exact-pinned dependencies of c10g, not peer dependencies — consuming projects never need to install or version-manage them. @playwright/test is deliberately not a dependency of c10g at all: it's the test runner itself, and every project already needs its own copy to run npx playwright test regardless of c10g.