DEV Community

Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev on

9 1 1 1 2

Playwright Tutorial for Beginners 1 - Getting Started

What is Playwright?

From the documentations definition, Playwright is a tool that enables reliable end-to-end testing for modern web apps.

What does end-to-end testing mean?

End-to-end testing is, simply, a technique that aims to verify an entire software from beginning to end to make sure that the application flow behaves as expected.

Running end-to-end on a typical to-do list webpage would be testing the application flow as a real user would. Which can include:

  • adding new todos
  • deleting todos
  • completing a todo etc.

Key features of Playwright

  • cross-browser support
  • cross-platform support (Windows, Linux, macOS, locally or CI etc)
  • cross-language support (TypeScript, JavaScript, Java, .NET, Python)
  • Auto-waits etc.

In a couple of next tutorials, we will touch these concepts and even practise with occasional demo site testing.

Prerequisites for this tutorial

  • NodeJS installed
  • npm - (installed by default once NodeJS is installed. We can verify by running npm --version to check the installed version

Installing Playwright

Playwright can be run by third parties test runners like Jest. But for the purpose of this tutorial, we will use the test runner provided by Playwright:



npm install -D @playwright/test



Enter fullscreen mode Exit fullscreen mode

The -D flag saves the modules as devDependencies.

Then run this command to install supported browsers:



npx playwright install



Enter fullscreen mode Exit fullscreen mode

Creating our first test

  • We will create a file called first_test.spec.js and write the following code into the file.


const { test, expect } = require('@playwright/test');

test('visits Google page', async ({ page }) => {
  await page.goto('https://google.com');
  const pageTitle = await page.title();
  expect(pageTitle).toBe('Google');
});



Enter fullscreen mode Exit fullscreen mode
  • Then run this command to run the test npx run playwright first_test.spec.js:

passed-first-test.PNG

Basic configuration

We need to create a configuration file to utilize some of the features Playwright has to offer. We will create a playwright.config.js in the root directory of our project:



// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

module.exports = config;



Enter fullscreen mode Exit fullscreen mode

The configuration file allows Playwright to run your test using these devices provided in the configuration file.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay