DEV Community

Cover image for Automation testing with Playwright
Alleluia Izimpamvu
Alleluia Izimpamvu

Posted on

3

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)

Image description

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

Image description

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

Image description

5.Install Playwright browsers and hit Enter

Image description

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

Image description

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();
});
Enter fullscreen mode Exit fullscreen mode

Code Screenshot for better visibility

Image description

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

Image description

Happy testing!!🎭

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more