Application Supported:- Web browser /apps,mobile web apps and API’s.

Language Supported:- Javascript, Typescript, Java, Python and .Net .

Browsers supported:- Chromium ,Webkit(Safari) and Firebox(headed/headless).

OS supported:- Windows, MacOS, Linux ,Support CI Runs.

Features of Playwright

1. Free and open source
2. Multi Browser and Multi-language
3. Easy setup and configurations
4. Functional, API’s and Accessibility Testing
5. Build-in reporters, Custom reports
6. CI ,CD and Docker
7. Parallel Testing
8. Auto Wait(No need of implicit and explicit Wait
9. Built in Assertions
10. Multi Tab and Multi Window

Advantage of Playwright

Multi-Browser Support:

1. Playwright supports multiple browser engines, including Chromium, Firefox, and WebKit (used by Safari). This allows you to write tests that can be executed across different browsers.

Browser Contexts:

1. Playwright introduces the concept of browser contexts, which are independent instances of a browser. Each context has its own cookies, cache, and other session-specific data, making it useful for scenarios where you need isolated browser sessions.

Headless and Headful Mode:

1. Playwright allows you to run browsers in headless mode (without a graphical user interface) or headful mode (with a graphical user interface). This flexibility is useful for various testing and debugging scenarios.

Device Emulation:

1. Playwright provides built-in device emulation, allowing you to simulate different devices and screen sizes. This is essential for testing the responsiveness of web applications.

Network Interception and Mocking:

1. Playwright enables you to intercept and modify network requests, facilitating testing scenarios where you need to mock responses or simulate different network conditions

Parallel Test Execution:

1. Playwright supports parallel test execution, improving the efficiency of your test suites by running tests concurrently.

Automated Screenshots and Videos:

1. Playwright makes it easy to capture screenshots and record videos during test execution. This is useful for debugging and reviewing test results.

Selective Test Execution:

1. You can selectively run specific tests or groups of tests using tags or patterns, allowing for targeted testing of specific features.

Page and Browser Events:

1. Playwright provides events for various browser and page events, such as page load, network request/response, console messages, and more. You can listen to these events and take action accordingly.

User Input Simulation:

1. Playwright allows you to simulate user interactions, including clicks, keyboard inputs, and mouse movements, providing comprehensive coverage for testing user interfaces.

Visual Testing:

1. Playwright supports visual testing, allowing you to compare screenshots or entire page layouts to detect visual regressions in your web application.

Integration with Test Runners:

1. Playwright integrates seamlessly with popular test runners like Jest, Mocha, and Jasmine, making it easy to incorporate Playwright into your existing testing workflows.

Robust Selector Engine:

1. Playwright's selector engine supports a wide range of selectors, including CSS, XPath, and custom selectors, making it versatile for locating elements on the page.

Method 1: Installations of Playwright with node.js (manually)

Step 1: Install Node.js and npm:

If you haven't already, install Node.js and npm from https://nodejs.org/.(I hope VS code is already installed, else install VS code as well.

Verify the installations by running the following commands in your terminal or command prompt:

1. node -v
2. npm -v

Step 2: Install Visual Studio Code

1. Download and install Visual Studio Code from VS Code https://code.visualstudio.com/ .

Step 3: Create a New Project

1. Open Command Prompt and create a new directory for your Playwright project:
2. 1. mkdir playwright-project
3. 2. cd playwright-project
4. 3. npm init -y

Step 4: Install Playwright

1. Install Playwright as a dependency for your project:

1. npm install playwright

Step 5: Create a Test File

1. Inside your project folder, create a new file, for example, test.js. This file will contain your Playwright test script.In your test.js file, write a basic Playwright test.

Step 8: Run Your Playwright Test

1. Back in your Command Prompt, run the test script:
2. 1. node test.js

(Note: if you are following above steps, make sure you have added chromium extension in your browser or you can go with below steps where all requirement added automatically with one click)

Method 2: Installations of Playwright with node.js (with VS code extension)

Step 1. Install node.js and VS code

Step 2. Goto VS code market section

Step 3. Add the Playwright extension

Step 4. Tap on View CTA of VS code

Step 5. Tap on Command Palette(Ctrl+shift+p)

Step 6. Search “Playwright test “ and hit

Observed that all requirements start downloading Automatically (it’s takes some time in my case it’s take few min)

Now you can see one default script created with name test.js

Step 7. Open the test.js file

observed some default tc’s script already written for hint purpose you can remove it or you can modify it as per your requirement.

Step 8. Goto same terminal and run below script of tc’s

1. npx playwright test
2. Runs for the end-to-end tests.
3. npx playwright test --ui
4. Starts the interactive UI mode.
5. npx playwright test --project=chromium
6. Runs the tests only on Desktop Chrome.
7. npx playwright test example
8. Runs the tests in a specific file.
9. npx playwright test --debug
10. Runs the tests in debug mode.
11. npx playwright codegen
12. Auto generate tests with Codegen.
13. npx playwright test --project=chromium --headed
14. npx playwright test --project=chromium --headed --debug
15. npx playwright --version

There are many commands you can use https://playwright.dev/docs/intro .

Method 3: Installing Playwright with Cmd:

Goto project dir and open it in VS code then open VS code terminal

Step 1: npm init playwright@latest

Run the install command and select the following to get started:

1. Choose between TypeScript or JavaScript (default is TypeScript)
2. Playwright will download the browsers needed as well as create the following files.

playwright.config.ts

package.json

package-lock.json

tests/

example.spec.ts

tests-examples/

demo-todo-app.spec.ts

Step 2: npx playwright test

Step 3: npx playwright show-report

System requirements​

1. Node.js 16+
2. Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
3. MacOS 12 Monterey or MacOS 13 Ventura.
4. Debian 11, Debian 12, Ubuntu 20.04 or Ubuntu 22.04, with x86-64 or arm64 architecture.