Installation of Playwright VS Code extension
& Execution
* Steps to Install Playwright VS Code extension
1. Open the Extensions view.
In VS Code, click the Extensions icon on the left (or press Ctrl+Shift+X).
2. Search for the extension
In the “Search Extensions in Marketplace” box, type: Playwright
3. Pick the correct one
Select Playwright Test for VSCode — publisher Microsoft (blue verified tick).
4. Install
– Click Install on the extension details page.
– Wait until you see Disable / Uninstall, which confirms it’s installed.
5. Open the Testing view & Verify tests are discovered
– Click the Testing icon in the left sidebar(Bottom last).
– Under TEST EXPLORER, you should see your Playwright tests (e.g., tests/example.spec.ts) listed.
6. Choose browsers, quick settings (optional) & Execution
– In the PLAYWRIGHT panel, ensure chromium, firefox, and webkit are checked.
– Optionally tick Show browser (headed mode) or Show trace viewer.
– Click the Run Test ▶️ button next to the test file/suite (or the top “Run” icon).
7. View results
– Check TEST RESULTS: you’ll see green checkmarks for each test across the selected browsers (e.g., “6 passed” when two tests run in three browsers).
* Running Playwright Tests using Terminal
1. Open the terminal in VS Code
– Run the following command
npx playwright test– Playwright will automatically execute all the tests defined inside the tests/ folder.
2. Generate and View the HTML Report
– After the tests complete, Playwright suggests a command to open the last test report.
– Run the following command
npx playwright show-report– This will start a local server and display the HTML report in your browser.
3. Analyze the Test Report
The report provides a detailed breakdown of each test:
- ✅ Passed / ❌ Failed / ⚠️ Flaky / ⏭ Skipped
- Execution time for each test
- Browser-wise results (Chromium, Firefox, WebKit)
✅ Summary
With just two commands, you can run your Playwright tests and instantly get a professional HTML report:
1. Run tests → npx playwright test
2. Open report → npx playwright show-report
