Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions

From Vincents CV Wiki
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.
  • 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

--force needed to accept various warnings

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

Tests Structure

Retrieved from ‘https://dirksonline.net/cvwiki/index.php?title=Udemy_Playwright:_Web_Automation_Testing_From_Zero_to_Hero&oldid=991’