Playwright

How to handle Keyboard and Mouse actions in Playwright

Keynoard & Mouse Actions

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:

  1. Project setup. 
  2. 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:
  1. 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:

  1. Statement from 3 to 4 launches the browser and navigates to the website. 
  2. From line no. 7 to 11 we are performing the click operation on a button using the generic .click() method. 
  3. 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. 
  4. 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()
  5. 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(). 
  6. 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. 
  7. 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. 
  8. 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:

  1. The statement from 5 to 9 launches the browser and navigates to the website. 
  2. From lines no. 9 to 13 we are performing the click operation on a button using the generic .click() method. 
  3. 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. 
  4. 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()
  5. 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(). 
  6. 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. 
  7. 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. 
  8. 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. 
  9. 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. 

A) Using Sync API:

  • Different methods of the keyboard:
  1. .type() method

The .type() method takes a raw character and mimics the keyboard operation. We can provide the different arguments for the .type() method such as delay, timeout, etc. 

Keyboard and Mouse operations in Playwright

2. In playwright we can perform different keyboard operations by using Built-In .press() method 

Following are the Examples of Keyboard Operations: 

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1 – F12, Digit0 – Digit9, KeyA – KeyZ, etc. 

Keyboard and Mouse operations in Playwright

3. .down() method

By using .down() method we can press the Key of the Keyboard and release the key press we have to use the .up() method. 

Keyboard and Mouse operations in Playwright

Test Case:

Step 1: – Launch the browser. 

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

Step 3 – Perform keyboard operations using different methods. 

Step 4: – Close the page and browser

Keyboard and Mouse operations in Playwright

 Code Explanation:

  1. The Statement from line no. 3 to 5 is used to launch the browser and navigate to a website. 
  2. The Statement in line no. 8 is used to click the element using the .press() method, here we are passing the parameter as ‘Enter’ to perform Enter operation of the keyboard. 
  3. The statement at line no. 12 is used to navigate to another website. 
  4. The statement in line no. 13 is used to perform a scroll operation on a web page using. down() method and here we are passing the PageDown as the key name.  
  5. Statement from 16 to 19 is used to navigate to another website and enter a value in the textbox, here we are using the .type() method, which mimics the action of key press on the keyboard. 
  6. The statement from lines no. 21 to 22 is used to close the page and browser. 

B) Using Async API:

The same method can be used to perform async operations. 

Test Case:

Step 1: – Launch the browser. 

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

Step 3 – Perform keyboard operations using different methods. 

Step 4: – Close the page and browser.

Keyboard and Mouse operations in Playwright

 Code Explanation:

  1. The Statement from line no. 3 to 5 is used to launch the browser and navigate to a website. 
  2. The Statement in line no. 8 is used to click the element using the .press() method, here we are passing the parameter as ‘Enter’ to perform Enter operation of the keyboard. 
  3. The statement at line no. 12 is used to navigate to another website. 
  4. The statement in line no. 13 is used to perform a scroll operation on a web page using. down() method and here we are passing the PageDown as the key name.  
  5. Statement from 16 to 19 is used to navigate to another website and enter a value in the textbox, here we are using the .type() method, which mimics the action of key press on the keyboard. 
  6. The statement from lines no. 21 to 22 is used to close the page and browser. 

Read the next Playwright blog Here.