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

Section 4: Interaction with Web Elements

Understanding DOM and Terminology - Review HTML terms

<parent>
   <html_tag_name html-attribute="a value" class="class1 class2" id="unique">
      <child>
        ... html text value
      </child>
   </html_tag_name>
   <sibling></sibling>
</parent>

Locator Syntax Rules

    page.locator('input') //finds all of them
    page.locator('#inputEmail1') // by id
    page.locator('.shape-rectangle')     //by class value
    page.locator('[placeholder="Email"]')     // by attribute
    page.locator('[class="input-full-width size-medium status-basic shape-rectangle nb-transition cdk-focused cdk-mouse-focused"]')     // by class value (full)
    page.locator('input[placeholder="Email"][nbinput].shape-rectangle')     // combine selectors
    page.locator('//*[@id="inputEmail1"]')     // XPath (NOT Recommended because it's testing implementation rather than user visible aspects)
    page.locator(':text("Using")')  // by partial text match
    page.locator(':text-is("Using the Grid")')     // by exact text match

Note:

If you had previously run the test, and the associated browser window is still open, then when the cursor is on a code line with page.locator(...) it highlights the elements selected by the locator (very cool!)
It's blue when a single element is selected, and orange when multiple elements match the locator.

page.locator(...) will always return all matching elements, can use .first() to refine to first element to perform an action.

use npx playwright test --ui and click the watch icon so that test auto-re-runs when you edit the code (I love this)

User Facing Locators

Playwright Best Practices

• Test user-visible behaviour
  • tests should typically only see/interact with rendered output
  • mimic user behaviour

• page.getByRole(...)
  • See ARIA roles and attributes (google it?)

  await page.getByRole("textbox", { name: "Email" }).first().click()
  await page.getByRole("button", { name: "Sign in" }).first().click()
  await page.getByLabel("Email").first().click()
  await page.getByPlaceholder('Jane Doe').click()
  await page.getByText('Using the Grid').click()
  await page.getByTestId('SignIn').click() // this expects html attribute=>  data-testid="SignIn"
  await page.getByTitle('IoT Dashboard').click()

Child Elements

test("Locating child elements", async ({ page }) => {
  await page.locator('nb-card nb-radio :text-is("Option 1")').click()
  await page.locator('nb-card').locator('nb-radio').locator(':text-is("Option 2")').click() // this is nicer than line above
  await page.locator('nb-card').getByRole('button', {name: "Sign In"}).first().click() // avoid first last, and nth because the lists enveriably change
  await page.locator('nb-card').nth(3).getByRole('button').click()
})

Parent Elements

test("Locating parent elements", async ({ page }) => {
  await page
    .locator("nb-card", { hasText: "Using the Grid" })
    .getByRole("textbox", { name: "Email" })
    .click()
  await page
    .locator("nb-card", { has: page.locator("#inputEmail1") })
    .getByRole("textbox", { name: "Email" })
    .click()
  await page
    .locator("nb-card")
    .filter({ hasText: "Basic Form" })
    .getByRole("textbox", { name: "Email" })
    .click()
  await page
    .locator("nb-card")
    .filter({ has: page.locator("nb-checkbox") })
    .filter({ hasText: "Sign in" })
    .getByRole("textbox", { name: "Email" })
    .click()
  await page
    .locator(':text-is("Using the Grid")')
    .locator("..")
    .getByRole("textbox", { name: "Email" })
    .click()

  await page
    .getByText("Using the Grid")
    .locator("..")
    .getByRole("textbox", { name: "Email" })
    .click()
})

I think I like best the last one, where you select something that looks like a heading to the user, and then go to the parent that contains the selected element, and the element you want to locate.

Reusing Locators

Stop copying and pasting code ....

  const testEmailAddress = "test@test.com"
  const basicForm = page.locator("nb-card").filter({ hasText: "Basic Form" })
  const emailField = basicForm.getByRole("textbox", { name: "Email" })


  await emailField.fill(testEmailAddress)
  await basicForm.getByRole("textbox", { name: "Password" }).fill("Welcome123")
  await basicForm.getByRole("button").click()

  await expect(emailField).toHaveValue(testEmailAddress)

Extracting Values

  // Single test value
  const basicForm = page.locator("nb-card").filter({ hasText: "Basic Form" })
  const buttonText = await basicForm.locator('button').textContent()
  expect(buttonText).toEqual("Submit")

  // Array of text values
  const allRadioButtonLabels = await page.locator('nb-radio').allTextContents()
  expect(allRadioButtonLabels).toContain('Option 1')

   // input value
   const emailField = basicForm.getByRole('textbox', {name: 'Email'})
   await emailField.fill('test@test.com')
   const emailValue = await emailField.inputValue()
   expect(emailValue).toEqual('test@test.com')

   // attribute
   const placeholderValue = await emailField.getAttribute('placeholder')
   expect(placeholderValue).toEqual('Email')

Assertions

  // General assertions
  const value = 5
  expect(value).toEqual(5)

  const basicFormButton = page
    .locator("nb-card")
    .filter({ hasText: "Basic Form" })
    .locator("button")

  const text = await basicFormButton.textContent()
  expect(text).toEqual("Submit")

  // locator assertion
  await expect(basicFormButton).toHaveText("Submit")

  // soft assertion (continues even if it fails)
  await expect.soft(basicFormButton).toHaveText("Submit")
  await basicFormButton.click()

Auto-waiting

• Playwright docs

There are some different wait topologies

some auto-wait for 30s by default (but configurable

expect() waits for only 5s

some do not wait at all

and there's a bunch of alternative waitFor methods, eg. wait for a response to an API call

test.beforeEach(async ({ page }) => {
  await page.goto("http://uitestingplayground.com/ajax")
  await page.getByText("Button Triggering AJAX Request").click()
})

test("Auto Waiting", async ({ page }) => {
  const successButton = page.locator(".bg-success")

  //   const text = await successButton.textContent()  // waits automatically (upto default 30s)
  //   expect(text).toEqual('Data loaded with AJAX get request.')

  //   await successButton.waitFor({state: 'attached'}) // waits upto default 30s
  //   const text2 = await successButton.allTextContents() // fails doesn't wait by itself (must use waitFor(...))
  //   expect(text2).toContain('Data loaded with AJAX get request.')

  await expect(successButton).toHaveText("Data loaded with AJAX get request.", {
    timeout: 20000,
  }) // waits default  upto 5s, unless overridden
})

test("alternative waits", async ({ page }) => {
  const successButton = page.locator(".bg-success")

  // wait for element
  //await page.waitForSelector(".bg-success")

  // wait for particular response
  //await page.waitForResponse('http://uitestingplayground.com/ajaxdata')

  // wait for network calls to be completed (NOT RECOMMENDED)
  await page.waitForLoadState("networkidle")

  const text2 = await successButton.allTextContents()
  expect(text2).toContain("Data loaded with AJAX get request.")
})

Timeouts

test("timeouts", async ({ page }) => {
  //test.setTimeout(10000)
  test.slow()
  const successButton = page.locator(".bg-success")
  await successButton.click()
})

There are three layers to timeouts

1. Global Timeout

time limit for whole test suite to run

default: no limit

2. Test Timeout

Within the global timeout, it is the time limit for a single test

default: 30000ms

3. Action, Navigation, Expect

Within the global and test timeout there are the following timeouts

• Action = click(), fill(), textContent() etc

default: no limit

• Navigation = page.goto(url...)

default: no limit

• Expect = locator assertions

default: 5000ms

Note: regular expect assertions execute immediately, only locator exceptions will wait.

You can override the expect timeout await expect(element).toHaveText("some text", { timeout: 20000 })

Overrides inside test case

Use test.slow() to extend timeout to 3x configured value, or test.setTimeout(10000).

Project Timeout settings in playwright.config.ts

export default defineConfig({
  timeout: 10000,   // test case max run time
  globalTimeout: 60000,  // entire test run max run time
  expect:{
    timeout: 2000, // sets locator assertion timeout
  },
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    actionTimeout: 5000,
    navigationTimeout: 5000,
  },
  ...
});

Timeout settings for a whole spec.ts file

test.beforeEach(async ({ page }, testInfo) => {
  await page.goto("http://uitestingplayground.com/ajax")
  await page.getByText("Button Triggering AJAX Request").click()
  testInfo.setTimeout(testInfo.timeout + 2000)
})