🎭 Playwright for JS

Documentation

https://playwright.dev/docs/intro

How to Create and Run Playwrite Tests

Runs all tests on all browsers in headless mode

npx playwright test

Runs a specific test file

npx playwright test MyTest.spec.js 

Runs on specific browser

npx playwright test MyTest.spec.js --project=chromium

npx playwright test MyTest.spec.js --project=chromium --headed

npx playwright test MyTest.spec.js --project=chromium --headed --debug

Locating Elements in Playwright

Locate single element

link/button

await page.locator('locator').click()
await page.click('locator')

inputbox

await page.locator('locator').fill('value')
await page.locator('locator').type('value')
await page.fill('locator', 'value')
await page.type('locator', 'value')
❗await is required only when the method is market with async
❗await is required only when performing the actual action / whenever calling a playwright method

Locate multiple web elements

const elements=await page.$$(locator)

Built-in in locators

page.getByRole() to locate by explicit and implicit accessibility attributes.

page.getByText() to locate by text content.

page.getByLabel() to locate a form control by associated label's text.

page.getByPlaceholder() to locate an input by placeholder.

page.getByAltText() to locate an element, usually image, by its text alternative.

page.getByTitle() to locate an element by its title attribute.

page.getByTestId() to locate an element based on its data-testid attribute

Create test using code generator

npx playwright codegen

npx playwright codegen --help

Assertions

 expect(page).toHaveURL()  Page has URL

 expect(page).toHaveTitle()  Page has title

 expect(locator).toBeVisible() Element is visible

 expect(locator).toBeEnabled()  Control is enabled 

 expect (locator).toBeDisabled()  Element is disabled

 expect(locator).toBeChecked()  Radio/Checkbox is checked

 expect(locator).toHaveAttribute() Element has attribute

 expect(locator).toHaveText() Element matches text

 expect(locator).toContainText() Element contains text

 expect(locator).toHaveValue(value) Input has a value

 expect(locator).toHaveCount() List of elements has given length

Hooks

 beforeEach: This hook is executed before each individual test
 afterEach: This hook is executed after each individual test

 beforeAll: This hook is executed once before any of the tests start running
 afterAll: This hook is executed once after all the tests have been run

POM

Allure Reports

1) Installation of "allure-playwright" module
npm i -D @playwright/test allure-playwright

2) Installing Allure command line
Ref:
https://www.npmjs.com/package/allure-commandline
npm install -g allure-commandline --save-dev
(or)
sudo npm install -g allure-commandline --save-dev

3) playwright.config.js
reporter= ['allure-playwright', {outputFolder: 'my-allure-results'}] (or)
npx playwright test --reporter-allure-playwright

4) Run the tests
npx playwright test tests/Reporters.spec.js

5) Generate Allure Report:
allure generate my-allure-results-o allure-report --clean

6) Open Allure Report:
allure open allure-report

const / let

when declare **const** is required to declare value also(when is initializing)
**let** is use to declare global variable

Debug

npx playwright test "name test" --debug (open pw inspector and debug only UI)

If you want debug api calls

 1. in VS go to package.json create a test property and give the command
     "scripts": { "test": "npx playwright test "name test" }
 2. in VS tipe Shift + Ctrl + P and click on method Debug: Debug npm Script