Playwright workshop

Playwright workshop

• NodeJS

Step 1 :: Install

$npm init playwright@latest 

Generate folders and files

• tests/
• playwright.config.js/ts

Step 2 :: Run test

$npx playwright test

Run with UI mode

$npx playwright test --ui

Step 3 :: Config file playwright.config.js/ts

3.1 Reporting

reporter: [ ['junit', { outputFile: './report/results.xml', open: 'never' }] ],

3.2 Test-id attribute and enable recording VDO

use: {
    video: 'on',
    testIdAttribute: 'data-testid',
  },

Step 4 :: Generate test script with Recorder

Test generator

$npx playwright codegen <target system>

Step 5 :: Write your test case

• Use test id
• Page object pattern
• Visual testing

References

• https://github.com/up1/workshop-playwright
• https://github.com/up1/workshop-playwright-2025
  • Monitoring test from playwright