init

Initialize Playwright Project Set up a production-ready Playwright testing environment. Detect the framework, generate config, folder structure, example test, and CI workflow. Steps 1. Analyze the Project Use the Explore subagent to scan the project: Check package.json for framework (React, Next.js, Vue, Angular, Svelte) Check for tsconfig.json → use TypeScript; otherwise JavaScript Check if Playwright is already installed ( @playwright/test in dependencies) Check for existing test directories ( tests/ , e2e/ , tests/ ) Check for existing CI config ( .github/workflows/ , .gitlab-ci.yml ) 2. Install Playwright If not already installed: npm init playwright@latest -- --quiet Or if the user prefers manual setup: npm install -D @playwright/test npx playwright install --with-deps chromium 3. Generate playwright.config.ts Adapt to the detected framework: Next.js: 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' , { open : 'never' } ] , [ 'list' ] , ] , 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 , } , } ) ; React (Vite): Change baseURL to http://localhost:5173 Change webServer.command to npm run dev Vue/Nuxt: Change baseURL to http://localhost:3000 Change webServer.command to npm run dev Angular: Change baseURL to http://localhost:4200 Change webServer.command to npm run start No framework detected: Omit webServer block Set baseURL from user input or leave as placeholder 4. Create Folder Structure e2e/ ├── fixtures/ │ └── index.ts # Custom fixtures ├── pages/ │ └── .gitkeep # Page object models ├── test-data/ │ └── .gitkeep # Test data files └── example.spec.ts # First example test 5. Generate Example Test import { test , expect } from '@playwright/test' ; test . describe ( 'Homepage' , ( ) => { test ( 'should load successfully' , async ( { page } ) => { await page . goto ( '/' ) ; await expect ( page ) . toHaveTitle ( / . + / ) ; } ) ; test ( 'should have visible navigation' , async ( { page } ) => { await page . goto ( '/' ) ; await expect ( page . getByRole ( 'navigation' ) ) . toBeVisible ( ) ; } ) ; } ) ; 6. Generate CI Workflow If .github/workflows/ exists, create playwright.yml : name : "playwright-tests" on : push : branches : [ main , dev ] pull_request : branches : [ main , dev ] jobs : test : timeout-minutes : 60 runs-on : ubuntu - latest steps : - uses : actions/checkout@v4 - uses : actions/setup - node@v4 with : node-version : lts/* - name : "install-dependencies" run : npm ci - name : "install-playwright-browsers" run : npx playwright install - - with - deps - name : "run-playwright-tests" run : npx playwright test - uses : actions/upload - artifact@v4 if : $ { { !cancelled() } } with : name : "playwright-report" path : playwright - report/ retention-days : 30 If .gitlab-ci.yml exists, add a Playwright stage instead. 7. Update .gitignore Append if not already present: /test-results/ /playwright-report/ /blob-report/ /playwright/.cache/ 8. Add npm Scripts Add to package.json scripts: { "test:e2e" : "playwright test" , "test:e2e:ui" : "playwright test --ui" , "test:e2e:debug" : "playwright test --debug" } 9. Verify Setup Run the example test: npx playwright test Report the result. If it fails, diagnose and fix before completing. Output Confirm what was created: Config file path and key settings Test directory and example test CI workflow (if applicable) npm scripts added How to run: npx playwright test or npm run test:e2e