Install Playwright TypeScript

Profile picture for user devraj
Submitted by devraj on

The installation for Playwright remains the same across various operating systems. Before proceeding, ensure that both Node.js and Visual Studio Code are on your system. 

Table of Contents

  1. Install Playwright using NPM
  2. Playwright Basic Commands
  3. Playwright Default Files
  4. Run Example Tests
  5. View Report
  6. Video Tutorial

Install Playwright using NPM

Step 1: Create a New directory or folder at your desired location. Use below command to create in terminal:

mkdir playwright-demo

Step 2: Open the same in Visual Studio Code or terminal

Open Playwright Folder in Visual Studio Code

Step 3: Open Terminal 

Open Terminal in VS Code.

Step 4: Type below command and press enter

npm init playwright@latest

Playwright Install Command

Here @latest will install the latest stable release; you can also specify a specific version of the Playwright. Check Playwright release here

Step 5: You will see option -Need to install the following packages:, press Enter

Playwright Install Packages

Step 6: Now it will ask language of your choice, By Default, TypeScript is selected; press enter.

install playwright typescript

Step 7: The Default Test folder is tests. You can use a different name here; otherwise, press enter.

Playwright Test Folder

Step 8: Now, it will ask to set up the GitHub Actions workflow to run tests on CI quickly. You can skip this for now by pressing Enter and later set it up.

Playwright GitHub Workflow

Step 9: Press Enter to install Playwright Browsers. 

Install Playwright Browsers

Step 10: Make sure browsers are installed and you see the success message.

Playwright installation

Playwright Basic Commands

Copy commands from terminal into notepad or document for future use

playwright commands

Playwright Default Files

Verify following files exists

  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Playwright Default Files

Run Example Test

Run Example Test using below command

npx playwright test

By default, tests will be run on all three browsers, chromium, firefox, and Webkit, using 2 workers in headless mode.

Run Playwright Test

Playwright View Report

 View Report using below command

npx playwright show-report

Report will launch in browser automatically.

View Playwright Report

Video Tutorial: Install Playwright TypeScript