Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions
Jump to navigation
Jump to search
Line 43: | Line 43: | ||
== Section 3 - Playwright Hands-On Overview == | == Section 3 - Playwright Hands-On Overview == | ||
* create new folder & <code>npm init playwright@latest</code> | * create new folder & <code>npm init playwright@latest</code> | ||
=== Ways to Run & Debug === | |||
* CLI Test Executions | * CLI Test Executions | ||
<nowiki> | <nowiki> | ||
npx playwright test | npx playwright test | ||
Line 53: | Line 53: | ||
* Test Execution with UI - ''OMG this debug UI is cool!'' | * Test Execution with UI - ''OMG this debug UI is cool!'' | ||
<nowiki>npx playwright test --ui</nowiki> | <nowiki>npx playwright test --ui</nowiki> | ||
* Test Execution with trace on | |||
<nowiki> | |||
npx playwright test --project=chromium --trace on | |||
npx playwright show-report</nowiki> | |||
: => 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 <nowiki> | |||
npx playwright test --project=chromium --debug</nowiki> | |||
: 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 | |||
=== Tests Structure === |
Revision as of 10:03, 20 May 2024
Link to Udemy Udemy Playwright: Web Automation Testing From Zero to Hero
Section 1: Preparation
Playwright vs Cypress
Playwright Pros. | Cypress Pros. |
---|---|
|
|
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