Playwright is a modern test automation tool developed by Microsoft for end-to-end testing. In the previous post, I did a comparison of the Playwright tool with other test automation tools like Cypress and Selenium. In this article, I will discuss how we can install Playwright to use it in test automation.
Playwright Installation
We can do the Playwright installation in two ways.
- Install Playwright using Command Line
- Install Playwright using VSCode extension
Pre-Requisite
- NodeJS
Check if NodeJS is installed on your machine or not. Install it if not already installed and after installation check the node version and npm version using the below command. Make sure that the node version is greater than 14.
node -v npm -v
2. Install IDE (Preferably Visual Studio code)
1) How to install Playwright using the command line
To Install the Playwright test automation tool using the command line we will use the npm package.
- a) Create a new folder for your project and open it in VSCode IDE.
From the Visual Studio Code editor, Navigate to File -> Open Folder-> Choose the newly created folder (PlaywrightFramework)
- b) Install Playwright
Go to the terminal and execute the below command
npm init playwright@latest
This command will install the latest playwright version along with the minimum required dependency. Proceed to ‘Yes’ and select your desired language.
After successful installation, the folder structure will be created along with the package.json file that contains all the information related to the project and installed dependencies.
2) Install the Playwright tool using the VSCode extension
We can install the Playwright extension in VSCode itself without using the command line. To do that follow the below-mentioned steps.
- Create a new project folder and open it in VSCode IDE.
- Go to extensions, search Playwright and install it.
- Go to view and click on the command palette then type playwright.
- Click Install Playwright and click enter. We will get the dropdown options to select the browser for installation.
5. Select the required browsers and press OK.
This will execute a similar command on the terminal and install all the packages and dependencies that we already did using command line installation.
You can use any of the approaches described above for the installation.
Understanding the Playwright’s project structure
The project structure for Playwright automation can vary depending on project-specific needs and preferences. However, the default project structure is described below to keep the code organized and maintainable.
1) package.json (node project management file)
The Playwright tool is a node js-based tool hence it follows the standard node-based structure which contains a package.json file at the root level. This file contains project-related information like the package name, Version, description of the project, entry point, Author, scripts and licensing information along with the list of dependencies and their version.
2) Playwright configuration file
playwright. config.js file is a very important file. This file includes all the configurations and settings required for our project. Users can specify any new configuration or modify any existing settings and behaviour in this file for our playwright tests.
We can configure desired browsers, viewport size, and headless mode using this file. We can also set the timeouts, environments, fixtures, and test result reporters as per our requirements. With the help of the configuration file, we can centralize and manage test settings effectively, making it easier to maintain and execute Playwright scripts.
3) tests Folder
The tests folder contains some basic example tests. This is the directory where we organize and store our test files. This folder contains all the automation logic, test runners, utility code, page objects etc.
4) test-Examples
This folder contains detailed example tests.
5) .gitignore file
This file contains the information that which files and directories should be ignored when tracking changes in a Git repository.
6) node_modules
It contains all the dependencies and packages on which our project relies on. When we execute “npm install” to install any dependency These commands read the package.json file in our project, download the specified packages, and place them in the node_modules directory.
How To Execute Playwright Tests?
- If you have installed the playwright with the help of the command line, then open the terminal, navigate to the directory where the test script is located and execute the below command.
npx playwright test
After the successful execution, use the below command to see the generated HTML report.
npx playwright show-report
This command will open the report in the browser.
2. If you are using the playwright extension via the VSCode editor then to execute the test script open the testing pane by clicking on the testing icon on the left side.
The test view will list the test cases under the test file name. Click on the run icon to execute the test. This will use the Playwright Test runner and display the results in the “Test” view within VS-Code. We can also select which browser we want to use for execution.
In this post, I have explained in detail how we can install Playwright to start with test automation. This article provides a good understanding for developers and test automation engineers interested in Playwright automation.