How to Install Playwright Framework? Playwright Installation Guide

What is Playwright?

Playwright is a cross browser automation framework for end to end testing created by the Microsoft team and has been steadily gaining popularity. It is a NodeJS library to automate Chromium, Firefox, and WebKit with a single API.

WebKit is a browser engine developed by Apple and used in its Safari web browser and all iOS web browsers. Also, Playwright started as a fork of a Puppeteer. Puppeteer is a node library that automates the Chrome and Firefox browsers with the JavaScript API.

Here’s the highlights of the capabilities of Playwright:

• It spans multiple pages, domains, and iframes.
• Intercept network activity for stubbing and mocking network requests.
• Emulate mobile devices, geolocation testing, and permissions.
• Can connect physical devices and execute the test in the Chromium-based browser for Android.
• Supports native inputs like the keyboard actions and the mouse actions.
• Playwright supports upload and download.
• Component testing is supported in Playwright 1.22.
• Playwright has its own Test Runner.
• Docker support.

How to install Playwright and set up VS Code?

Here are the prerequisites to setting up VS Code:

• NodeJS
• VS Code Editor
• Playwright VS Code plugin

In this section of this Playwright tutorial, we will learn how to install Playwright and set up VS Code. Below are the steps to be followed:

Step 1: Create a folder with “learn-playwright” as a folder name.

Step 2: Ensure the NodeJS version is above 14 from the command prompt.

Step 3: Open the created folder and type “cmd” in the address bar. The below screen appears.

Step 4: Type “code”. to launch VS Code. You can now see the created folder as a project in VS Code.

Step 5: Navigate to the EXTENSIONS section and type "Playwright". There are multiple options available. Select the Playwright Test for VS Code by Microsoft option.

Step 6: Click Install.

Step 7: Press CTRL + SHIFT + P to open the command panel and type "install Playwright".

Step 8: Enable the Chromium, Firefox, and WebKit checkboxes, as Playwright supports all browser engines.

Step 9: Click Okay.

Step 10: Expand the Project Explorer, and the “example.spec.ts” file is displayed.

Step 11: To execute the test, click the Green arrow icon.

Step 12: To disable the Headless mode, navigate to the playwright.config.ts file.

Step 13: In the use block, type “headless: false,” and execute again to view the browser.

Conclusion

Playwright makes automation quick, reliable, and simple for anyone eager to acquire a new skill. An online cross browser testing platform like LambdaTest is excellent for performing Playwright testing. It gives you access to an online browser farm with more than 50+ browser versions and OS combinations, enabling you to run the Playwright scripts.

Subscribe to the LambdaTest YouTube Channel, and stay updated with the latest Playwright tutorial, Cypress UI testing, responsive testing, mobile testing, etc. We have now discussed how to install Playwright using the VS Code plugins. Stay tuned for the next video on the Playwright Tutorial Series.