Getting started with Playwright

When planning a test automation strategy, it's crucial to consider the specific needs and requirements of the project as well as the capabilities of the available tools in the market. Playwright has emerged as one of the leading tools for test automation in recent years.

Playwright

Playwright is an open-source automation testing framework developed by Microsoft. Its unique features and capabilities have made it increasingly popular, positioning it as a promising option for automation testing. Playwright offers a set of APIs that enable developers and testers to write test scripts for automating web applications across various browsers, including Chromium, Firefox, and WebKit. It supports multiple programming languages such as Java, JavaScript, TypeScript, Python, and C#.

Combining Playwright with JavaScript creates a powerful solution for web automation. Playwright is a modern and robust library that allows you to control web browsers like Chrome, Firefox, and Safari. It provides advanced features such as taking screenshots, recording videos, emulating mobile devices, and intercepting network requests.

JavaScript, a widely-used programming language for web development, is well-suited for writing automation tests with Playwright. Its extensive set of libraries and tools facilitates the creation of complex automation scripts that can interact seamlessly with elements in web applications.

Playwright JavaScript

There are several reasons why Playwright JavaScript is an excellent choice for browser automation:

• Debugging : Debugging automated tests can be challenging, but Playwright JavaScript simplifies this process by enabling tests to be debugged directly in the browser's developer tools. This allows developers and testers to see what is happening in the browser during the test, making it easier to diagnose and fix issues.

• Cross Platform support : Cross-platform compatibility is a notable feature of Playwright, as it seamlessly operates across various operating systems such as Windows, macOS, and Linux. Leveraging JavaScript, a cross-platform language, developers and testers can create tests that are executable across different platforms and browsers.

• Automation : JavaScript's versatility makes it suitable for crafting various automated tests, spanning from unit tests to integration tests and end-to-end tests. With Playwright's robust high-level API, developers can efficiently create tests tailored for diverse applications, including single-page and progressive web applications.

• Test framework integration : Playwright is purposefully built to seamlessly integrate with widely-used JavaScript testing frameworks like Jest and Mocha, typically employed for JavaScript unit testing. This integration facilitates the effortless inclusion of Playwright scripts into your current testing processes, simplifying the creation of end-to-end tests and enabling regression testing for web applications.

• Asynchronous programming : JavaScript's asynchronous programming model is well-suited for browser automation, where multiple actions often happen simultaneously. Playwright uses promises to handle asynchronous actions, which makes it easy to write code that is both readable and efficient.

Features of Playwright

• Cross-Browser Support

• Multi-Language Support

• Headless and Headful Modes

• Integration with CI/CD

• Auto-Wait Mechanism

• Test Runner

• API Testing

• Tracing and Debugging Tools

• Powerful Selectors and Debugging Tools

• Test Isolation with Browser Contexts

Playwright JavaScript Setup

Pre-Requisite

1.    Install NodeJS

2.   Install Visual Studio Code

Step 1: Create a New Folder

Navigate to desired drive in your computer and create a new folder for Playwright (ex: DemoPlayWright)

Step 2: Open the same folder in Visual Studio Code IDE

Navigate to File --> OpenFolder-->DemoPlayWright

Step 3: Open a terminal

In VS Code IDE navigate to Terminal-->New Terminal and execute the following command

npm init playwright@latest

Step 4: Check installation

Verify the Success command in terminal

Step 5: Verify project structure

Check proper folder structure is created under project explorer

Creating first playwright code(Verify title and url of dsalgo page)

• Open Visual Studio Code IDE

• Navigate to the Playwright Folder Structure and select tests

• Right click on tests folder and choose create New File

• All file name extension should be filename.spec.js where {{filename}} can be any

• Now we are writing a test script to validate the title and URL of DSAlgo Webpage. The following screenshot explains the code well.

• In the above code line 1 we are adding text and expect functions from the playwright/test module (these are default functions available when playwright was installed)

•  test and expect are the functions from @playwright/test module. Playwright Test provides a test function to declare tests and expect function to write assertions

• Then we are creating a test block to perform all the required actions like validating the page url and title.

• The keyword 'async' before a function makes the function return a promise The keyword 'await' before a function makes the function wait for a promise

Run the test

• Open a new terminal

• npx playwright test is a command that runs all the tests available under test folder. To run a specific test mention the test name in the end like npx playwright test demopwtest.spec.js

• There are 3 tests which indicates the execution in three different browsers

• To generate the report use the command npx playwright show-report

• A html webpage opens as shown below with test results

• To run the test exclusively in Chrome, use the command npx playwright test demopwtest.spec.js --project=chromium

• To run the test exclusively in Chrome and in headed mode(Launches the url), use the command npx playwright test demopwtest.spec.js --project=chromium --headed

• To run the test exclusively in Chrome and in headed mode(Launches the url) along with debug mode then use the command (to see step by step execution) npx playwright test demopwtest.spec.js --project=chromium --headed --debug

• In the above screen we can see a new pop up window called Playwright Inspector. This is used to do the step by step execution by clicking the step over button( highlighted in below screenshot)

Conclusion:

Creating your first Playwright JavaScript test is a significant step towards enhancing the reliability of your web applications. By setting up Playwright, writing your initial test script, and running it, we have laid a solid foundation for future testing endeavors. Keep exploring Playwright’s rich features to fully harness its potential in your development workflow. Happy testing!