{"id":"88657827-c359-4d3e-bb42-ccc1fd3c309c","shortId":"swAyNB","kind":"skill","title":"Playwright Test Builder","tagline":"Generates robust Playwright end-to-end tests for web pages and user flows.","description":"# Playwright Test Builder\n\n## What this skill does\n\nThis skill directs the agent to write well-structured Playwright end-to-end tests for a given user flow or page. It produces tests with proper locator strategies (preferring accessible selectors over brittle CSS), meaningful assertions at every step, correct async/await handling, and solid setup/teardown. The output is ready to drop into a `tests/` folder and run immediately.\n\nUse this when you want reliable E2E coverage for critical user journeys — login, checkout, form submission, navigation flows — without writing boilerplate from scratch.\n\n## How to use\n\n### Claude Code / Cline\n\nCopy this file to `.agents/skills/playwright-test-builder/SKILL.md` in your project root.\n\nThen describe the flow you want tested and ask:\n- *\"Use the Playwright Test Builder skill to write E2E tests for the login flow.\"*\n- *\"Write Playwright tests for the checkout process using the Playwright Test Builder skill.\"*\n\nProvide the page URL (or a description of the UI), the steps in the flow, and any known selectors or data-testid values if you have them.\n\n### Cursor\n\nAdd the \"Prompt / Instructions\" section below to your `.cursorrules` file. Then describe the flow to test in the chat.\n\n### Codex\n\nPaste the relevant HTML or React component code alongside the flow description and the instructions below. Seeing the actual markup helps Codex pick the most stable locators.\n\n## The Prompt / Instructions for the Agent\n\nWhen asked to write Playwright tests, follow these steps:\n\n1. **Understand the flow.** Ask for (or infer from context):\n   - The URL or page being tested\n   - The steps a user takes (click X, fill Y, expect Z)\n   - Any test data needed (usernames, passwords, form values)\n   - Whether authentication is required before the test\n\n2. **Choose locators in this priority order** (most stable first):\n   - `getByRole()` with accessible name — best for buttons, links, inputs, headings\n   - `getByLabel()` — for form fields with associated labels\n   - `getByText()` — for elements identified by their visible text\n   - `getByPlaceholder()` — for inputs with placeholder text\n   - `getByTestId()` — when `data-testid` attributes are present\n   - CSS selectors — only as a last resort; avoid if any stable alternative exists\n   - Never use XPath unless absolutely necessary\n\n3. **Add assertions at every meaningful step.** After each action, assert:\n   - A visible UI change (new element appears, text changes, URL changes)\n   - Not just \"click and hope\" — every interaction must have a follow-up assertion\n   - Use `expect(locator).toBeVisible()`, `toHaveText()`, `toHaveURL()`, `toBeEnabled()`, etc.\n\n4. **Structure the test file properly:**\n   - Use `test.describe` to group related tests\n   - Use `test.beforeEach` for shared setup (navigation, login)\n   - Use `test.afterEach` or `test.afterAll` for cleanup if needed\n   - Give each `test()` a descriptive name starting with a verb: \"shows...\", \"allows...\", \"prevents...\"\n   - Keep each test focused on one behavior\n\n5. **Handle async correctly.** Every `page.click`, `page.fill`, `page.goto`, and `expect` must be awaited. Never use `setTimeout` for waiting — use `page.waitForSelector`, `page.waitForURL`, or rely on Playwright's auto-waiting.\n\n6. **Add resilience where appropriate:**\n   - For flaky elements (animations, lazy-loaded content), use `expect(locator).toBeVisible({ timeout: 5000 })`\n   - For network-dependent tests, consider `page.waitForResponse()` or mock the network with `page.route()`\n   - Avoid hard-coded `page.waitForTimeout()` sleeps — use condition-based waits\n\n7. **Include a Page Object Model class** if the flow spans multiple pages or the test is complex. Keep it in a separate `pages/` subfolder.\n\n8. **Output the complete, runnable test file** with all imports. Include a comment block at the top describing what the test suite covers.\n\n## Example\n\n**Input to Agent:**\n> \"Use the Playwright Test Builder skill to write tests for our sign-up flow. The user goes to `/register`, fills in their name, email, and password, clicks 'Create Account', and should land on `/dashboard` with a welcome message.\"\n\n**Output from Agent:**\n> ```typescript\n> import { test, expect } from '@playwright/test';\n>\n> /**\n>  * Tests for the user registration flow.\n>  * Covers: form validation, successful account creation, post-signup redirect.\n>  */\n>\n> test.describe('Registration flow', () => {\n>   test.beforeEach(async ({ page }) => {\n>     await page.goto('/register');\n>     await expect(page).toHaveURL('/register');\n>   });\n>\n>   test('shows the registration form', async ({ page }) => {\n>     await expect(page.getByRole('heading', { name: 'Create your account' })).toBeVisible();\n>     await expect(page.getByLabel('Full name')).toBeVisible();\n>     await expect(page.getByLabel('Email')).toBeVisible();\n>     await expect(page.getByLabel('Password')).toBeVisible();\n>     await expect(page.getByRole('button', { name: 'Create Account' })).toBeEnabled();\n>   });\n>\n>   test('allows a new user to register and redirects to dashboard', async ({ page }) => {\n>     await page.getByLabel('Full name').fill('Jane Smith');\n>     await page.getByLabel('Email').fill('jane@example.com');\n>     await page.getByLabel('Password').fill('SecurePass123!');\n>\n>     await page.getByRole('button', { name: 'Create Account' }).click();\n>\n>     await expect(page).toHaveURL('/dashboard');\n>     await expect(page.getByText('Welcome, Jane')).toBeVisible();\n>   });\n>\n>   test('shows a validation error when email is already taken', async ({ page }) => {\n>     await page.getByLabel('Full name').fill('Existing User');\n>     await page.getByLabel('Email').fill('existing@example.com');\n>     await page.getByLabel('Password').fill('SecurePass123!');\n>\n>     await page.getByRole('button', { name: 'Create Account' }).click();\n>\n>     await expect(page.getByRole('alert')).toContainText('already in use');\n>     await expect(page).toHaveURL('/register');\n>   });\n>\n>   test('prevents submission when required fields are empty', async ({ page }) => {\n>     await page.getByRole('button', { name: 'Create Account' }).click();\n>\n>     // Form should not navigate away\n>     await expect(page).toHaveURL('/register');\n>     await expect(page.getByLabel('Email')).toBeFocused();\n>   });\n> });\n> ```","tags":["playwright","test","builder","openagentskills","notysoty","agent-skills","claude","claude-code","claude-skills","cline","cursor","llm"],"capabilities":["skill","source-notysoty","skill-playwright-test-builder","topic-agent-skills","topic-claude","topic-claude-code","topic-claude-skills","topic-cline","topic-cursor","topic-llm","topic-llm-skills","topic-skills"],"categories":["openagentskills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Notysoty/openagentskills/playwright-test-builder","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Notysoty/openagentskills","source_repo":"https://github.com/Notysoty/openagentskills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (6,306 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:13:23.313Z","embedding":null,"createdAt":"2026-05-18T13:20:44.791Z","updatedAt":"2026-05-18T19:13:23.313Z","lastSeenAt":"2026-05-18T19:13:23.313Z","tsv":"'/dashboard':609,734 '/register':594,647,652,789,816 '1':250 '2':292 '3':360 '4':404 '5':451 '5000':498 '6':480 '7':523 '8':548 'absolut':358 'access':56,304 'account':604,633,667,691,728,775,805 'action':369 'actual':226 'add':188,361,481 'agent':29,240,574,616 'agents/skills/playwright-test-builder/skill.md':118 'alert':780 'allow':442,694 'alongsid':216 'alreadi':749,782 'altern':352 'anim':488 'appear':377 'appropri':484 'ask':131,242,254 'assert':62,362,370,395 'associ':317 'async':453,643,658,704,751,798 'async/await':67 'attribut':338 'authent':286 'auto':478 'auto-wait':477 'avoid':348,512 'await':463,645,648,660,669,675,680,685,706,713,718,723,730,735,753,760,765,770,777,785,800,812,817 'away':811 'base':521 'behavior':450 'best':306 'block':561 'boilerpl':105 'brittl':59 'builder':3,20,136,157,579 'button':308,688,725,772,802 'chang':374,379,381 'chat':206 'checkout':98,151 'choos':293 'class':529 'claud':111 'cleanup':428 'click':271,384,602,729,776,806 'cline':113 'code':112,215,515 'codex':207,229 'comment':560 'complet':551 'complex':540 'compon':214 'condit':520 'condition-bas':519 'consid':504 'content':492 'context':259 'copi':114 'correct':66,454 'cover':570,629 'coverag':92 'creat':603,665,690,727,774,804 'creation':634 'critic':94 'css':60,341 'cursor':187 'cursorrul':196 'dashboard':703 'data':180,279,336 'data-testid':179,335 'depend':502 'describ':124,199,565 'descript':165,219,435 'direct':27 'drop':77 'e2e':91,140 'element':321,376,487 'email':599,678,715,747,762,820 'empti':797 'end':8,10,37,39 'end-to-end':7,36 'error':745 'etc':403 'everi':64,364,387,455 'exampl':571 'exist':353,758 'existing@example.com':764 'expect':275,397,460,494,620,649,661,670,676,681,686,731,736,778,786,813,818 'field':315,795 'file':116,197,408,554 'fill':273,595,710,716,721,757,763,768 'first':301 'flaki':486 'flow':17,45,102,126,145,173,201,218,253,532,589,628,641 'focus':447 'folder':81 'follow':247,393 'follow-up':392 'form':99,283,314,630,657,807 'full':672,708,755 'generat':4 'getbylabel':312 'getbyplacehold':327 'getbyrol':302 'getbytestid':333 'getbytext':319 'give':431 'given':43 'goe':592 'group':413 'handl':68,452 'hard':514 'hard-cod':513 'head':311,663 'help':228 'hope':386 'html':211 'identifi':322 'immedi':84 'import':557,618 'includ':524,558 'infer':257 'input':310,329,572 'instruct':191,222,237 'interact':388 'jane':711,739 'jane@example.com':717 'journey':96 'keep':444,541 'known':176 'label':318 'land':607 'last':346 'lazi':490 'lazy-load':489 'link':309 'load':491 'locat':53,234,294,398,495 'login':97,144,422 'markup':227 'meaning':61,365 'messag':613 'mock':507 'model':528 'multipl':534 'must':389,461 'name':305,436,598,664,673,689,709,726,756,773,803 'navig':101,421,810 'necessari':359 'need':280,430 'network':501,509 'network-depend':500 'never':354,464 'new':375,696 'object':527 'one':449 'order':298 'output':73,549,614 'page':14,47,161,263,526,535,546,644,650,659,705,732,752,787,799,814 'page.click':456 'page.fill':457 'page.getbylabel':671,677,682,707,714,719,754,761,766,819 'page.getbyrole':662,687,724,771,779,801 'page.getbytext':737 'page.goto':458,646 'page.route':511 'page.waitforresponse':505 'page.waitforselector':470 'page.waitfortimeout':516 'page.waitforurl':471 'password':282,601,683,720,767 'past':208 'pick':230 'placehold':331 'playwright':1,6,18,35,134,147,155,245,475,577 'playwright/test':622 'post':636 'post-signup':635 'prefer':55 'present':340 'prevent':443,791 'prioriti':297 'process':152 'produc':49 'project':121 'prompt':190,236 'proper':52,409 'provid':159 'react':213 'readi':75 'redirect':638,701 'regist':699 'registr':627,640,656 'relat':414 'relev':210 'reli':473 'reliabl':90 'requir':288,794 'resili':482 'resort':347 'robust':5 'root':122 'run':83 'runnabl':552 'scratch':107 'section':192 'securepass123':722,769 'see':224 'selector':57,177,342 'separ':545 'settimeout':466 'setup':420 'setup/teardown':71 'share':419 'show':441,654,742 'sign':587 'sign-up':586 'signup':637 'skill':23,26,137,158,580 'skill-playwright-test-builder' 'sleep':517 'smith':712 'solid':70 'source-notysoty' 'span':533 'stabl':233,300,351 'start':437 'step':65,170,249,267,366 'strategi':54 'structur':34,405 'subfold':547 'submiss':100,792 'success':632 'suit':569 'take':270 'taken':750 'test':2,11,19,40,50,80,129,135,141,148,156,203,246,265,278,291,407,415,433,446,503,538,553,568,578,583,619,623,653,693,741,790 'test.afterall':426 'test.aftereach':424 'test.beforeeach':417,642 'test.describe':411,639 'testid':181,337 'text':326,332,378 'timeout':497 'tobeen':402,692 'tobefocus':821 'tobevis':399,496,668,674,679,684,740 'tocontaintext':781 'tohavetext':400 'tohaveurl':401,651,733,788,815 'top':564 'topic-agent-skills' 'topic-claude' 'topic-claude-code' 'topic-claude-skills' 'topic-cline' 'topic-cursor' 'topic-llm' 'topic-llm-skills' 'topic-skills' 'typescript':617 'ui':168,373 'understand':251 'unless':357 'url':162,261,380 'use':85,110,132,153,355,396,410,416,423,465,469,493,518,575,784 'user':16,44,95,269,591,626,697,759 'usernam':281 'valid':631,744 'valu':182,284 'verb':440 'visibl':325,372 'wait':468,479,522 'want':89,128 'web':13 'welcom':612,738 'well':33 'well-structur':32 'whether':285 'without':103 'write':31,104,139,146,244,582 'x':272 'xpath':356 'y':274 'z':276","prices":[{"id":"eed086b8-e7fc-47dd-ba94-246783b5d698","listingId":"88657827-c359-4d3e-bb42-ccc1fd3c309c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Notysoty","category":"openagentskills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:20:44.791Z"}],"sources":[{"listingId":"88657827-c359-4d3e-bb42-ccc1fd3c309c","source":"github","sourceId":"Notysoty/openagentskills/playwright-test-builder","sourceUrl":"https://github.com/Notysoty/openagentskills/tree/main/skills/playwright-test-builder","isPrimary":false,"firstSeenAt":"2026-05-18T13:20:44.791Z","lastSeenAt":"2026-05-18T19:13:23.313Z"}],"details":{"listingId":"88657827-c359-4d3e-bb42-ccc1fd3c309c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Notysoty","slug":"playwright-test-builder","github":{"repo":"Notysoty/openagentskills","stars":8,"topics":["agent-skills","claude","claude-code","claude-skills","cline","cursor","llm","llm-skills","skills"],"license":"mit","html_url":"https://github.com/Notysoty/openagentskills","pushed_at":"2026-03-28T06:50:19Z","description":"A  community-driven library of reusable AI agent skills for Claude Code, Cursor, Codex, Cline, and more.","skill_md_sha":"caa6c3ebf037fb099cd3badd6de8127b00a700ba","skill_md_path":"skills/playwright-test-builder/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Notysoty/openagentskills/tree/main/skills/playwright-test-builder"},"layout":"multi","source":"github","category":"openagentskills","frontmatter":{"name":"Playwright Test Builder","description":"Generates robust Playwright end-to-end tests for web pages and user flows."},"skills_sh_url":"https://skills.sh/Notysoty/openagentskills/playwright-test-builder"},"updatedAt":"2026-05-18T19:13:23.313Z"}}