القائمة
write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/LuizEduPP/Rememb --skill playwrightيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Mandatory architectural and intent-alignment phase before code generation, feature modification, or stack scaffolding. Use when the task needs constraint mapping, design clarification, or explicit architecture approval before implementation.
Execute a written implementation plan in a separate session with explicit review checkpoints. Use when the user already has a plan and wants focused implementation against it.
Organize complex work with file-based planning artifacts such as task_plan.md, findings.md, and progress.md. Use when the user needs a multi-step task, project, or research effort broken down and tracked across many tool calls.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | playwright |
| description | write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with |
playwright.config.ts (see references/configuration.md)Load based on context:
| Topic | Reference | Load When |
|---|---|---|
| Locators & Actions | references/locators-and-actions.md | Writing selectors, filling forms, clicking, drag-and-drop |
| Test Organization | references/test-organization.md | Fixtures, parallel execution, retries, sharding, timeouts, annotations |
| Authentication | references/authentication.md | Login flows, multi-role tests, storageState |
| Network & Mocking | references/network-and-mocking.md | API mocking, route interception, HAR recording, API testing |
| Visual Testing | references/visual-testing.md | Screenshots, snapshots, ARIA snapshots, visual regression |
| Debugging | references/debugging.md | Flaky tests, trace viewer, UI mode, debug flags |
| Configuration | references/configuration.md | playwright.config.ts, projects, web server, CI/CD, reporters |
| Advanced | references/advanced.md | Clock mocking, evaluate, component testing, POM, accessibility |
getByRole() > getByLabel() > getByTestId() > getByText() (in priority order)await expect(locator).toBeVisible() (auto-retries)trace: 'on-first-retry' for debugging failuresfullyParallel: true for speedforbidOnly: !!process.env.CI to prevent .only leaking to CIwaitForTimeout() — always use proper auto-waiting assertionsexpect(await locator.isVisible()).toBe(true) — this does NOT auto-retry; use await expect(locator).toBeVisible() insteadBrowserContext)first()/nth() without narrowing first — filter or chain locators insteadexpect(locator) retries. expect(await locator.something()) evaluates once.has-text pseudo-class: Without another CSS specifier, matches everything including <body>. Always combine with an element selector.getByText whitespace: Always normalizes whitespace, even with exact: true.opacity: 0: Considered visible. Zero-size elements are NOT visible.fill() actionability: Checks Visible + Enabled + Editable only. Does NOT check Stable or Receives Events.press()/pressSequentially(): NO actionability checks at all.storageState: Covers cookies, localStorage, IndexedDB. Does NOT cover sessionStorage.tsc separately.expect.toPass timeout: Defaults to 0 (no retry), NOT the expect timeout.* does not match /. ** matches everything. ? matches literal ? only.dragover to fire in all browsers, issue TWO mouse.move() calls.# New project
npm init playwright@latest
# Existing project
npm i -D @playwright/test
npx playwright install
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
webServer: {
command: 'npm run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/My App/);
await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});
npx playwright test # Run all
npx playwright test auth.spec.ts # Run file
npx playwright test --grep @smoke # Run tagged
npx playwright test --project=chromium # Single browser
npx playwright test --debug # Debug mode (headed, timeout=0, workers=1)
npx playwright test --ui # UI mode
npx playwright show-report # HTML report
npx playwright show-trace trace.zip # View trace
npx playwright codegen localhost:3000 # Generate tests
Use this skill for the capability described in this document.
Use this skill when the request matches the capability, constraints, and activation cues described below.
Use the examples and snippets already present in this document whenever they apply to the task.
Follow the constraints, conventions, and cautions documented below, and prefer the documented path over improvisation.