Remi's Realm [RR]

In this blog post, Playwright installation with npm will be explained in step by step manner.

Before we get started, I need to mentioned a few pre-requisites that need to be installed prior to initial set up.

Step 0: Pre-requisites

• Node package Manager (npm)
• Node.js 18+
• macOS 13 Ventura, or later

Versions I used are as follows:

• npm 10.9.0
• nodeJS 22.12.0
• macOS 15.1 Sequoia
• Hardware: Mac mini M4 Pro

Step 1: Create a folder

Create a folder where Playwright project will get installed and then navigate into it:

mkdir playwright-js-demo
cd playwright-js-demo

Step 2: Running npm init command

npm init playwright@latest

After running this command, you will be prompted to answer a few Yes/No questions about the project that is being initialized.

You can also download/clone initialized Playwright project directly from this Github link.

Step 3: Opening the Project with VSCode and running tests

Launch VSCode and open the folder that project has been initialized

Afterwards, you can head to the Terminal of VSCode and run the example tests as follows.

npx playwright test

As mentioned in the terminal, one can go ahead and open the HTML report of this test run by running the following command on Terminal

npx playwright show-report

As can be seen from the report, the same example test is run against 3 different browsers, namely: chromium, firefox, webkit (Safari)

To see the tests in action, you may need to add a few parameters to the command above

npx playwright test example.spec.js --headed --workers=1

In this way, you will be able to see browsers in headed mode and number of workers being 1 will ensure that tests will get run serially. If no workers is specified, 3 workers will run the tests in parallel.

Note that tests are so quick to run as they are very short tests

If you encounter any issues during project setup or initialization, make sure to refer to Playwright’s official documentation here => https://playwright.dev/docs/intro

If you’d like to check out auto-initialized Playwright Javascript project on Github, you can do so by visiting this link