Playwright is a Node.js library for automating web browsers, developed by Microsoft. It provides a high-level API for interacting with web pages, and supports multiple browsers including Chromium, Firefox, and WebKit. Playwright is designed to be easy to use, highly reliable, and to work seamlessly with modern web applications.

Playwright is written in TypeScript, a superset of JavaScript that adds optional static typing and other features to the language. As a result, Playwright's TypeScript API provides strong typing and autocompletion support, making it easier to write and maintain code.

To use Playwright with TypeScript, you will need to install the Playwright library and the TypeScript compiler. You can do this using the following command:

npm init playwright@latest

If you have not installed Node.js and NPM (Node Package Manager) on your machine. Please download and install them from the official Node.js website: https://nodejs.org/en/download/.

Once you run the above install command and it will aske you to select the following to get started :-

• Choose between TypeScript or JavaScript (default is TypeScript)
• Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project)
• Add a GitHub Actions workflow to easily run tests on CI


By choosing to include a GitHub Actions integration, which generates a playwright.yml file located within a .github/workflows folder. This file includes all the necessary configurations to ensure that your tests are executed whenever there is a push or pull request made to the main/master branch. In the upcoming tutorials, we will delve into this topic in-depth.

• Install Playwright browsers (default is true)

Once the selections are made, Playwright will download all the browsers needed as well and displays several commands to execute tests>/h4>

Playwright will create the following files in a folder

-

The playwright.config is where you can add configuration for Playwright including modifying which browsers you would like to run Playwright on. If you are running tests inside an already existing project then dependencies will be added directly to your package.json.

The tests folder contains a basic example test to help you get started with testing. You can also check detailed example under 'tests-examples' folder which contains tests written to test a todo app.

Now run your tests by executing the following command:

npx playwright test

This will run all spec files in the 'test' directory by default. We can customize the test directory and other options using command line flags,

for example: npx playwright test --test-dir=tests .

By default tests will be run on all 3 browsers, chromium, firefox and webkit which is configured in the playwright.config file and tests will run in headless mode meaning no browser will open up when running the tests. We can update config to run tests headed or we can run command npx playwright test --headed which will browser instance and execute your tests.

Once execution is completed, You'll see the results in the command line output, and any errors or failures will be logged to the console. The 'HTML Reporter' is a built in reporter which shows you a full report of all your tests.

By default, the HTML report is opened automatically if some of the tests failed. If you need to open the report manually you can navigate to 'playwright-report' folder and you will see 'html' file. Else we can also use command npx playwright show-report You can open a detailed view of each test by clicking on the test name. You can then explore the tests errors as well as expand each step of the test to see the code for that step and how long each step took to run.