Play on with Playwright — Part 1

Playwright is an open-source web automation library that is built on top of Puppeteer. It is developed by the authors of Puppeteer since v0.14.0 (April 2020) and maintained by Microsoft ever since.

Play on Player!

I’ve always wanted to figure out what this movement was all about, so I decided to start playing around with it. In this article, I will share my experience setting up Playwright and how to use it. Next steps will be shared in new series of blogposts.

The documentation of Playwright is very extensive and can be found on playwright.dev.

Fast and reliable end-to-end testing for modern web apps | Playwright

In contrast to Selenium/ WebDriver, Playwright does not run in a real browser, but against the underlying engine of the browser. You can read more about this on browserstack.

Playwright vs Selenium : Core Differences | BrowserStack

Tests can be run in the browser engines Chromium (Chrome), WebKit (Safari) and Firefox.

The Bootstrap

To bootstrap myself I started with using the following project https://github.com/playwright-community/playwright-jest-examples/tree/master/basic-ts

You will get introduced to Playwright running on NodeJS, tests written in Typescript and run with Jest, one of the most widely used JavaScript testing frameworks.

NodeJS project, Jest and Playwright setup

1. Install NodeJS
   This step is pretty straightforward. You can find the installer here: https://nodejs.org/en/download/
   Be sure to install the version labeled LTS.
2. Install Visual Studio Code as IDE
   I’m a huge fan of Visual Studio Code, so I started with installing TypeScript using the following documentation: https://code.visualstudio.com/docs/typescript/typescript-tutorial
3. git clone https://github.com/playwright-community/playwright-jest-examples.git
   Make sure you use (or copy) the basic-ts folder in your new project.
4. Open your new project folder with Visual Studio Code.
5. Execute “npm install” in the root of your project with the terminal in Visual Studio Code.
   You might want to “npm install -g npm” to upgrade npm.
   Also fix all vulnerabilities with “npm audit fix”
6. Execute “npm test” to see Playwright execute all tests.
   You might want to configure the following down below.

Headless test execution

You can configure Playwright to run in headless mode via the jest-playwright.config.js. See launchOptions.

Execute a single test file

You can configure Jest to run a single testfile by executing “jest <testfile>”.
Or configure the package.json to execute specific jest command when npm test script is executed. See “scripts” “test” section.

CI with Github Actions

I’ve decided to setup Github Actions for running all Playwright tests.
This works with a YAML file in your repository under .github/workflows/

The result of my Playwright journey can be found here:

GitHub - eskape/playwright-jest-tryout

Next steps and learnings will be published soon.

I’m curious about your experiences with Playwright. Do you already use it in your project(s)? Let me know what you think of Playwright in the comments.