Install Playwright TypeScript

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

Step 3: Open Terminal 

Step 4: Type below command and press enter

npm init playwright@latest

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

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

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

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.

Step 9: Press Enter to install Playwright Browsers. 

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

Playwright Basic Commands

Copy commands from terminal into notepad or document for future use

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

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.

Playwright View Report

 View Report using below command

npx playwright show-report

Report will launch in browser automatically.