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

Tests Structure

First Test

1. In VS Code
2. Open PW-PRACTICE-APP
3. 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

1. delete test-examples folder - it's not needed
2. delete test/example.spec.ts file - it's not needed
3. 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') and page.getByText('label')

Hooks & Control Flow

• tes.describe(' a test suite'...)
• test.beforeEach() and test.beforeAll()

can be used outside as well as inside a suite

• .only(..) can be used on tests as well as suites
• test.afterEach() and test.afterAll()

try to avoid using the after... hooks, better to do it in the before... hooks