Imported from TechMireSolutions/Aabtaab (.agents/skills/testing-vitest-playwright/SKILL.md). Install upstream with npx skills add TechMireSolutions/Aabtaab --skill testing-vitest-playwright. Copyright stays with the author.

Testing Workflow

Name: testing-vitest-playwright
Author: TechMireSolutions

Rule: .cursor/rules/12-testing.mdc

Commands

Action	Command
Unit	`npm run test`
Unit watch	`npm run test:watch`
E2E	`npm run test:e2e`
Browsers (first time / after Playwright bump)	`npx playwright install chromium` (add `--with-deps` on Linux/CI)

Unit tests (Vitest)

Colocate: lib/contact/schema.test.ts beside schema.ts.
Include: **/*.test.ts via vitest.config.ts (@/ alias).
Current high-value modules: contact schema/email, paths, urls (whatsappUrl / mapsUrl), constants, request-ip, rate-limit, revalidate, SEO helpers, catalog mappers, lib/fallbacks/footer-nav.ts.

import { describe, it, expect } from "vitest";
import { parseContactBody } from "@/lib/contact/schema";

describe("parseContactBody", () => {
  it("accepts valid payload", () => {
    // assert
  });
});

E2E tests (Playwright)

File	Purpose
`e2e/smoke.spec.ts`	Page load smoke
`e2e/navigation.spec.ts`	Nav + footer legal links
`e2e/seo.spec.ts`	Metadata, robots, 404
`e2e/contact.spec.ts`	Form validation UX

Projects: Desktop Chrome + Pixel 7 (playwright.config.ts).

Web server: node scripts/run-next.mjs start --port 3000 (needs an existing .next build).

Footer / chrome notes: Prefer role selectors for Privacy/Terms in footer. Do not assert CMS-specific footer quick-link labels (FALLBACK_QUICK_LINKS / Sanity). Scope contact fields to #main-content form so footer mailto: links do not collide.

Selector tips

Scope contact fields to #main-content form (footer/other email inputs can collide).
On mobile, open the menu via Open navigation menu before asserting main nav links.
Prefer roles/labels over brittle CSS.

Checklist

{ "ocm": "1", "id": "techmiresolutions-aabtaab-testing-vitest-playwright", "kind": "skill", "name": "testing-vitest-playwright", "description": "Vitest unit tests and Playwright E2E testing workflows. Use when writing, debugging, or running tests. Rule: 12-testing.", "publisher": "TechMireSolutions", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Vitest unit tests and Playwright E2E testing workflows. Use when writing, debugging, or running tests. Rule: 12-testing." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/TechMireSolutions/Aabtaab", "path": ".agents/skills/testing-vitest-playwright/SKILL.md", "ref": "8bf851ee00050c052a45489677fc981410208dcb", "url": "https://github.com/TechMireSolutions/Aabtaab/blob/8bf851ee00050c052a45489677fc981410208dcb/.agents/skills/testing-vitest-playwright/SKILL.md", "key": "TechMireSolutions/Aabtaab/.agents/skills/testing-vitest-playwright/SKILL.md" } }, "instructions": "# Testing Workflow\n\n**Rule:** `.cursor/rules/12-testing.mdc`\n\n## Commands\n\n| Action | Command |\n|--------|---------|\n| Unit | `npm run test` |\n| Unit watch | `npm run test:watch` |\n| E2E | `npm run test:e2e` |\n| Browsers (first time / after Playwright bump) | `npx playwright install chromium` (add `--with-deps` on Linux/CI) |\n\n## Unit tests (Vitest)\n\n- Colocate: `lib/contact/schema.test.ts` beside `schema.ts`.\n- Include: `**/*.test.ts` via `vitest.config.ts` (`@/` alias).\n- Current high-value modules: contact schema/email, paths, urls (`whatsappUrl` / `mapsUrl`), constants, request-ip, rate-li", "cost": { "context_tokens": 679 } }

testing-vitest-playwright

About

Testing Workflow

Commands

Unit tests (Vitest)

E2E tests (Playwright)

Selector tips

Checklist

Use it

Manifest

Reviews