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. |
---|---|
|
|
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
Tests Structure
First Test
- In VS Code
- Open PW-PRACTICE-APP
- run
npm init playwright@latest --force
- force is needed to avoid errors
- package.json updated with new dev dependencies
- playwright.config.ts is created as well as other files
- delete test-examples folder - it's not needed
- delete test/example.spec.ts file - it's not needed
- create file firsTest.spec.ts
import {test} from '@playwright/test' test('the first test', async ({page}) => { await page.goto('http://localhost:4200/') await page.getByText('Forms').click() await page.getByText('Form Layouts').click() })
- Notice the
page
fixture, it has a lot of useful methods, eg.page.goto('url')
andpage.getByText('label')
Hooks & Control Flow
tes.describe(' a test suite'...)
test.beforeEach()
andtest.beforeAll()
- can be used outside as well as inside a suite
.only(..)
can be used on tests as well as suitestest.afterEach()
andtest.afterAll()
- try to avoid using the after... hooks, better to do it in the before... hooks