Playwright with JavaScript

Now-a-days Automated testing has become an integral part of the testing process, as it gives an accurate outcome in half the time, no matter how many times you decide to run your tests. This is a huge advantage over manual testing, which is prone to human errors and incomplete test coverage due to time crunches.

The market these days provides many test automation frameworks, each with its own strengths and limitations. Playwright is one of them, a powerful test automation tool that has gained popularity.

What is Playwright?

Playwright is a free and open-source automation library for end-to-end testing. Backed by Microsoft, it enables developers and testers to automate interactions with a web browser. Playwright’s comprehensive feature set makes it suitable for a wide range of web testing scenarios, from simple page interactions to complex, stateful applications, including single-page applications (SPAs) and progressive web applications (PWAs).

Features of Playwright:

1. Free and open source.

2. Supports Multi-Browser (Chromium, Firefox, and WebKit), Multi-Language (JavaScript, Python, Java, and C#), Multi-OS (Windows, MacOS, Linux).

3. Easy setup and configuration.

4. We can do Functional Testing, API testing and Accessibility testing.

5. Built-in-reports are there and we can do custom reports too.

6. CI-CD and Docker support.

7. We can record the tests, debug and explore selectors.

8. Parallel testing.

9. Auto wait Mechanism.

10. Built in assertions.

11. Less Flaky tests.

12. We have options for Test retry, logs, Screenshots, videos.

13. Supports Muti-tab and Multi-window execution.

14. It handles high frames and shadow DOM.

15. Test parameterization.

16. Very fast.

JavaScript:

JavaScript is a high-level language and interpreted language.

High level language is written in simple English language where the user can understand easily while giving command to computer. Whereas we need compiler or interpreter.

Interpreted language like Python, Javascript, PHP is ready to run as soon as you are done typing.

Pre-Requisite

1.    Install NodeJS

2.   Install Visual Studio Code (VS Code).

How do I get started with Playwright?

Step 1: Create a New Folder for Playwright in your Computer.

Step 2: Open VS Code. Click File -> Open Folder -> Select your Playwright Folder.

Step 3: Click Terminal -> New Terminal

Step 4: Open Terminal in VS Code and execute following command to Install Playwright:

npm init playwright@latest

Step 5: Verify Success message in Terminal.

Step 6: You will find the below folder structure under your project (Playwright_Sample).

Locators:

Locators represent a way to find element(s) on the page at any moment.

Playwright has the following built in locators.

• page.getByRole() - to locate by explicit and implicit accessibility attributes.

• page.getByText() - to locate by text content.

• page.getByLabel() - to locate a form control by associated label's text.

• page.getByPlaceholder() - to locate an input by placeholder.

• page.getByAltText() - to locate an element, usually image, by its text alternative.

• page.getByTitle() - to locate an element by its title attribute.

• page.getByTestId() - to locate an element based on its data-testid attribute.

How to write Playwright test with Assertions:

Create a spec file under tests.

Let's write a test to Navigate an URL.

• In the below code we are importing Playwright/test from node module using Built-in JavaScript function require and assign to variable const.

• 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.

• Inside the test block we have written the code to navigate to the URL and assert the heading of the page.

• 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.

How to do Text Input in Playwright:

Using locator.fill() we can give input to the Text box in the form.

Handling Checkbox in Playwright:

Using locator.check() we can select checkbox. To uncheck the selected checkbox we can use locator.uncheck().

Handling Drag and Drop in Playwright:

We can perform drag & drop operation with locator.dragTo(). This method will:

• Hover the element that has to be dragged.

• Press left mouse button.

• Move mouse to the element that will receive the drop.

• Release left mouse button.

Handling single select Dropdown in Playwright:

Single select dropdown is where you have multiple options and when you have to select one. We can select option from dropdown using label or value or index.

Handling Keys and Shortcuts in Playwright:

In the below code, we are typing the word "Texas". Then using keyboard.press() we are doing the keyboard actions like Ctrl+A, Ctrl+C, Backspace and Ctrl+V.

Let's see another example:

In the below code, we are typing the word "Texas Area!" using keyboard.type(). Then pressing down the Shift key and press LeftArrow 5 times and release the shift key and press Backspace so the output will be "Texas".

Handling Dialogs in Playwright:

Playwright interacts with the web page dialogs such as alert, confirm and prompt. We can register a dialog handler before the action that triggers the dialog to either dialog.accept() or dialog.dismiss() it.

Note: page.on('dialog') listener must handle the dialog. Otherwise your action will stall, be it locator.click() or something else. That's because dialogs in Web are modals and therefore block further page execution until they are handled.

Example for Alert:

When we click "Click for JS Alert", a dialog window appears which has to be accepted only then next operations can be continued. Before clicking the "Click for JS Alert" the dialog has to be handled. By referring the below code, you will get the clear picture how to handle the JSAlert.

Example for confirm:

When we click "Click for JS Confirm", a dialog window appears which has to be either accepted or rejected only then next operations can be continued. Before clicking the "Click for JS Confirm" the dialog has to be handled by clicking 'OK' we can accept or we can dismiss by clicking 'cancel'. By referring the below code, you will get the clear picture how to handle the JS Confirm.

Example for prompt:

Here too we have to handle the prompt dialog box before clicking " Click for JS Prompt" button. We can pass the prompt message while accepting the dialog window or we can dismiss the dialog window.

Conclusion:

Hope this blog helped you to understand the basics of Playwright and its few features to write more efficient and maintainable Playwright test scripts.  

Playwright offers a suite of features that make it a powerful and versatile tool for automated testing of web applications. Remember, testing is an essential part of any development process, and with the right tools and techniques, you can streamline your testing workflow and ensure that your web applications are reliable and bug-free. Happy testing!!