Udemy Playwright: Web Automation Testing From Zero to Hero

Link to Udemy Udemy Playwright: Web Automation Testing From Zero to Hero

Section 1: Preparation

Playwright vs Cypress

Playwright Pros.	Cypress Pros.
Faster test execution OOTB free parallel execution Multiple languages (JS/TS, Python, Java, C# Multiple Tabs Better iFrames similar to Selenium	Less code - fast to write Better auto-wait mechanism Better documentation Better testrunner (time machine) Dashboard service

Development Environment Configuration

• node.js => updated => done
• Git => updated => done
• VS Code => updated => done
• Playwright extn for VS Code => installed

Clone Test App

• From https://github.com/bondar-artem/pw-practice-app
• Cloned it in VS Code
• npm install --force

--force needed to accept various warnings

• npm start
• http://localhost:4200/

Section 2: Javascript Fundamentals

I'm familiar with javascript - I'm fast forwarding through this without keeping notes

Section 3 - Playwright Hands-On Overview

• create new folder & npm init playwright@latest

Ways to Run & Debug

• CLI Test Executions

npx playwright test
npx playwright test example.spec.ts --project=chromium --headed
npx playwright test -g "has title"
npx playwright show-report

• Test Execution with UI - OMG this debug UI is cool!

npx playwright test --ui

• Test Execution with trace on

npx playwright test --project=chromium --trace on
npx playwright show-report

=> you can now open the trace from the report (which looks similar to the ui tool above)

trace can be generated from CI/CD pipeline too, and then you can view the results saved in a zip file with a trace viewer

• Test Execution with debug npx playwright test --project=chromium --debug

this opens the Playwright inspector showing the code, debugging controls, and console information

and the browser window

• Test execution with VS Code Extension => Test Explorer

Navigate to the test you want to debug

set any breakpoint(s)

VS Code shows the code, debugging controls, and console information