How to handle Keyboard and Mouse actions in Playwright

In this blog, we are working with different mouse operations and how to interact with them on DOM.

As a pre-requisite we have to check whether the following dependencies or installed or not:

Project setup.
Run pip list in PyCharm terminal to check whether playwright is installed or not.

As shown in the above picture playwright should be installed in the project.

If the playwright is not installed refer to Web Automation Testing using Playwright.

Mouse Operations:

We use the mouse to perform operations such as button click, button hover, etc on the web page. The playwright provides the different ways to perform this operation using the Sync and Async API.

A) Using Sync API:

Different ways to handle Mouse Operations:

Using Generic .click() method

We can use the Built-In method of the playwright to perform a click operation on the element.

2. Using .dblclick() method

We can use the Built-In method of the playwright to perform a double-click operation on the element.

3. Using click(button=’right’) method

We can perform a mouse right-click operation on the element, by specifying the argument in the button type of the click() method.

4. Using JS Click()

We can perform click operations on elements using the javascript code. In Playwright to execute the javascript code we have to use the evaluate() method.

5. Mouse hover

In playwright, we can perform a hover operation on an element using the .hover() method.

6. To perform Shift + Click

By using Shift + Click on the element it opens the New Browser Window. We have to pass the argument in click() method as .click(modifiers=[‘shift’])

7. To perform Drag & Drop

In Playwright we can perform Drap and drop operation on the DOM element using the Built-In .drag_and_drop() method. In this, we have to provide the source and target locator.

Test Case using Syc API:

Step 1: – Launch the browser.

Step 2: – Navigate to https://the-internet.herokuapp.com/add_remove_elements/

Step 3: – Perform different ways to click an element on DOM.

Step 4: – Close the page and browser.

Code Explanation:

Statement from 3 to 4 launches the browser and navigates to the website.
From line no. 7 to 11 we are performing the click operation on a button using the generic .click() method.
From lines no. 14 to 18 we are performing the click operation on a button using the javascript code. To run the javascript code in playwright we have to use the .evaluate() method.
From lines no. 21 to 23 we are performing the mouse hover operation in the element using the Built-In method of the playwright I.e .hover().
From lines no. 26 to 28 we are performing a Double click operation on the DOM element, using the Built-In method I.e .dbclick().
From lines no. 31 to 33 we are performing the right-click operation on the DOM element. To perform the mouse right-click operation we have to pass the parameter as button=’right’ in .click() method.
From line no. 36 to 38 we are performing the shift +click operation on the DOM element. When we perform shift +click the further operation is performed on a new tab.
From line no. 41 to 43 we are performing the drag and drop operation. In drag and drop operation we have to provide the source and destination location as parameters in the drag_and_drop() method.

B) Using Async API:

We can use the same syntax of Sync API for Async API also. Only we have to append the await command at the beginning of each playwright command.

Test Case using Async API:

Step 1: – Launch the browser.

Step 2: – Navigate to https://the-internet.herokuapp.com/add_remove_elements/

Step 3: – Perform different ways to click an element on DOM.

Step 4: – Close the page and browser.

Code Explanation:

The statement from 5 to 9 launches the browser and navigates to the website.
From lines no. 9 to 13 we are performing the click operation on a button using the generic .click() method.
From line no. 16 to 20 we are performing the click operation on a button using the javascript code. To run the javascript code in playwright we have to use the .evaluate() method.
From line no. 23 to 25 we are performing the mouse hover operation in the element using the Built-In method of the playwright I.e .hover().
From lines no. 28 to 30 we are performing a Double click operation on the DOM element, using the Built-In method I.e .dbclick().
From line no. 33 to 35 we are performing the right-click operation on the DOM element. To perform the mouse right-click operation we have to pass the parameter as button=’right’ in .click() method.
From line no. 38 to 40 we are performing the shift +click operation on the DOM element. When we perform shift +click the further operation is performed on a new tab.
From line no. 43 to 45 we are performing the drag and drop operation. In drag and drop operation we have to provide the source and destination location as parameters in the drag_and_drop() method.
The statement from line no. 47 to 48 is used to close the page and browser.

Keyboard Operation:

The playwright provides an API to perform keyboard virtual operations. Using the keyboard class, we can perform keys action such as pressing the Enter button of the keyboard, clicking Different arrow keys on the keyboard, etc.