Automation testing with Playwright

Why Playwright?

• Cross-language: JavaScript, TypeScript, Python, .NET, Java
• Cross-platform: Windows, Linux, macOS, and support headed and headless mode
• Cross-browser: Chromium, Webkit, and Firefox
• Auto-wait
• Codegen: Record your actions and save them in your language
• Trace Viewer: Capture all information to investigate the test failure
• And many more...

Pre-requisites

• Install Node.js 18 +
• VScode(To have a better experience by using the playwright extension)
• Basic programming skills

Installation

1. Open the terminal and run the below command

npm init playwright@latest

2.Choose JavaScript(default is TypeScript)

3.Choose where you want to save your tests and hit Enter

4.Add a GitHub Actions to easily run tests on CI( Select false)

5.Install Playwright browsers and hit Enter

6.Install Playwright operating system dependencies(No is a default) hit Enter

7.Congratulations you have successfully installed Playwright

Write the first test scripts

We are going to use the playwright's example and

• Import test and expect arguments from playwright
• Open playwright URL
• Verify that the page title has Playwright
• Click on Get Started
• Verify that Installation text is visible

Code Snippet

/*Importing test which help you to write test cases */
/*Importing expect which help to validate expected result */
const { test, expect } = require('@playwright/test');

/* Open Playwright url*/
test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Code Screenshot for better visibility

Run the test

Run: npx playwright test

This command will run all the tests under test Directory which is tests

Display playwright test report

Run: npx playwright show-report

Below is the sample of playwright HTML report

Happy testing!!🎭