Playwright Automation Framework - Comprehensive Cheat Sheet

This cheat sheet is designed to provide you with all the essential details to kickstart your journey into Playwright automation. It serves as a comprehensive resource, offering insights into fundamental methods and features. By leveraging this guide, you'll be well-equipped to set up your initial scenarios with ease.

Installation Playwright

Get started by installing Playwright using yarn and npm, Before that make sure the node js should be installed on your system. To verify it use the command "node -v".

Also while installing the node the npm gets auto-installed with the node package, To verify it use the command "npm -v"

Node Official link to download the version - https://nodejs.org/en/download

If the npm and node setup is verified then run the command to install Playwright -

npm init playwright@latest

Then you will have the structure like -

playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts

Then inside the tests folder create one .ts file and start writing test cases. Make sure the file contains the .spec in the file name, So that you will get a play button with all test scenarios

Starting Point - Open Browser, Navigate URL and Get Title of Page

import {expect, test} from '@playwright/test'

test('has title', async ({ page }) => {
    await page.goto('https://automationeducator.blogspot.com/');  // Navigate to the page
    console.log('Title of Page', await page.title())   // Get the title of page
    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle('Automation Educator (Testing for Life)');  
    await page.close();   // Close the page
  });

Playwright Actions-

The playwright provides several actions to interact with a webpage like ( Navigate, Type, Click, Close )

   // Navigate to a website
   await page.goto('https://automationeducator.blogspot.com/');  // Navigate to the page
  // Perform Input Action with Element
  await page.type('input[name="username"]', 'your_username');  
  // Perform Click Action with Element
  await page.click('button[type="submit"]');
  // Perform Clsoe the Page Action
  await page.close()

Playwright Locators -

The playwright provides several locators to find the element on a webpage

   // to locate by explicit and implicit accessibility attributes
page.getByRole('heading', { name: 'Sign up' });

// to locate by text content
page.getByText('Sign in');
page.getByText('Sign in', { exact: true });

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

// to locate an input by placeholder
page.getByPlaceholder('demoo@example.com');

// to locate an element, usually image, by its text alternative
page.getByAltText('playwright data');

// to locate an element by its title attribute
page.getByTitle('Issues datas')

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

Here's How we can use the CSS and xpath value with page.locator() method

// CSS
page.locator('css=button');
// short form CSS
page.locator('button');
// XPath
page.locator('xpath=//button'); 

Entering text into Element

To fill the input text into the input field we can use the fill() method

await page.getByLabel('Password').fill('Hello, World!');

Clicking Element

To click on element we can use the click() method

await page.getByRole('button').click();

Playwright Automation Framework - Comprehensive Cheat Sheet