Automation using Playwright and TypeScript
Hello Friends, In this blog I will share what is Playwright and its features. We will also set up Playwright on our machine and we will use Playwright with Typescript.
- Playwright is free open-source framework developed by Microsoft.
- It can be used to automate tests in web browser applications i.e. both desktop browsers as well as mobile browsers. And it also supports API testing.
- Languages supported: JavaScript, TypeScript, Java, Python, .NET(C#).
- Browsers supported: Chromium(Chrome, Edge, Opera and many more), WebKit(Safari), and Firefox. You can use these browsers in headless or headed mode
- It supports multiple Operating System like Windows, MacOS, Linux
- Supports CI/CD tools like GitHub Actions, Docker, Azure Pipelines, Jenkins, and many more
Features:
- Easy setup and configuration
- Test Execution is very fast
- It can be used for Functional/API/Accessibility testing
- It provides Built-in reporters like HTML reporter, JSON reporter, List reporter, Line reporter, and JUnit reporter or you can also create Custom Reporters like Allure , Monocart, Tesults, ReportPortal
- You can record your test and get your test scripts generated. Step by step Debugging is also possible. Also, we can capture the object locators from the screen.
- We can perform Parallel testing. We can run test cases at the same time on different browsers which makes it even faster.
- Auto wait and auto timeout of 5 seconds is provided by Playwright and we can change them as well. Also, it provides built-in assertions which altogether make tests less flaky or even no flaky tests.
- It provides options to Retry failed tests, View and generate logs, options to take screenshots and videos.
- It provides good support for Multi-tab and Multi-window test execution.
- It supports iFrames/Shadow DOM objects
- It can emulate mobile devices, and we can change the geolocations
- We can parameterize our tests i.e. we can use variables, Data driven testing, also we can use an external file like a CSV file to get our test data
Setup Playwright with Typescript
1. Download Node
Before starting to download node you can check if node is already installed in your system by running below commands in your terminal
node -v
npm -v
If you have node installed in your system it will return the version number.
If you don’t have node installed in your system, you can follow below steps.
You can download node from their official website https://nodejs.org/en/download/ based on the Operating system you are working on.
For mac install macOS Binary(.pkg)
For windows install Windows Installer (.msi) 32/64 bit based on your system configuration. After the download is done install node in your system.
Once the download is completed double click on the package and it will install the node in your system
To verify if node is successfully installed on your system open the terminal and run command node -v. You will be able to see the node version that was installed, in my case it is v18.14.0. To see the npm version run command npm -v You will be able to see the npm version that was installed, in my case it is 9.3.1
2. Download VS Code IDE
You can download VS Code from their official website:
https://code.visualstudio.com/download based on the Operating system.
3. Install Playwright
You can install playwright in 2 ways:
3.1 Install playwright as npm package
- Create a new folder, in my case I have created a folder named Playwright although you can name it anything.
- Now open this folder in Visual Studio Code. To open the folder click on File → Open Folder → Navigate to the folder that you created and Open the folder
- After you open this folder the alert box will be prompted click on “Yes, I trust the Authors”. You will see the folder will get opened on VS Code
- Open Terminal in VS Code. To Open the terminal click on Terminal in the top menu bar and click on New Terminal. A terminal will be opened at the bottom
- Go to the terminal and run the command :
npm init playwright@latest
After you run this command it will ask you 4 things:
1. Do you want to use Typescript or JavaScript? → I am using typescript. If you want to use Javascript press the arrow key and click Enter
2. Where to put your end-to-end tests? → Its a free-form text you can name it anything. I have named it tests
3. Add a GitHub Actions workflow? → Press y if you want to add it and enter
4. Install Playwright browsers (can be done manually via ‘npx playwright install’)? (Y/n) → Press Y if you want to install playwright browsers.
- Wait for the installations to get finished. After the installation is done on Explorer, on left-hand side, you can see the project structure/folders have been created
- Check the playwright version by running the following command
npm playwright -v - You can also check all the options which we can use with playwright commands
npx playwright --help
How to run the test?
To run the test run the below command in VS Code Terminal
npx playwright test
After the run is successful you can view report using below command
npx playwright show-report
3.2 Install playwright using VS Code extension:
- Create a new folder, in my case I have created a folder named Playwright_VSCode_Extension although you can name it anything.
- Open the folder in Visual studio code File → Open Folder → Navigate to the folder that you created and open the folder.
- After you open this folder an alert box will be prompted click on “Yes, I trust the Authors”. You will see the folder will get opened on VS Code
- Go to the Extensions section and type Playwright and install the playwright extension from Microsoft
- Go to view → Command Palette
- Type playwright test and select all the options that you need to install along with Playwright and click on “OK”. You can see in the terminal it is downloading all the commands that we downloaded through the terminal in the 3.1 section of this article.
- You can see that the project structure/folder has been created in Explorer
The main advantage of following 2nd approach i.e. installing playwright using VS Code extension is that we get nice UI to perform all the actions like run the test, debug the test, refresh options that we normally do from command line
How to run the test ?
- Go to view → Command Palette
- Type Playwright, you will get an option for “Testing: Focus on Playwright view” a Test Explorer view will be opened with all the tests.
- Now click on the “Go to Test” icon, the respective file will be opened on the left-hand side, and then click on the run icon, on the right-hand side you can see as the test runs each step is getting highlighted and you can also see the time taken to run that particular test.
Yay! Now we have successfully configured Playwright project in our system. In my next article, we will get started with writing our first Playwright script
Note : You can run/debug your tests using Playwright VSCode Extension regardless of whether you have installed Playwright via extension or via command line.
I hope you liked the article and thanks for reading!!
Reference links: