Quick and easy Javascript testing with PlayWright

PlayWright

by Juarez Junior

Introduction to Playwright

Playwright is built to enable cross-browser web automation.

It is an open-source web testing library developed by Microsoft that enables reliable end-to-end testing for modern web applications.

Some of the benefits provided by Playwright are:

• Single API to automate Chromium, Firefox, and WebKit.
• Support to multiple languages: the Playwright API in JavaScript, TypeScript, Python, .NET, and Java.
• Capable automation for single-page apps that rely on the modern web platform.
• Auto-wait features concerning elements that are to be populated and visible before performing the test actions.
• Headless execution of your tests.
• Easy capture of screenshots and videos.

So without further ado, let us give it a try!

Installation

Playwright has its own test runner for end-to-end tests called Playwright Test. Playwright Test provides a test function to declare tests, and an expect function to write assertions.

So, let us start with the basic installation.

npm i -D @playwright/test

PlayWright — installation

Install the supported browsers.

npx playwright install

PlayWright — install browser support

Writing your first test

Under your project directory, create a test directory with a Javascript file, example.spec.js for example to define our test.

const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright')…