Mouse Operations in Playwright Python

In this article, we will learn to use a mouse and keyboard with our automation scripts. There will be certain cases where you might need to use mouse actions such as clicking double-clicking right, clicking and drying, and dropping objects.

In other automation tools, we have to create an object for the mouse and then we have to use the methods from it but when we are using Playwright, we can directly call methods by calling the mouse.

Click:

The click method is the same as the click we use on the element. We can left-click, and right-click.

We are going to click the “Left Click Me” button.

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/popups.html")

page.locator("#leftClickButton").click()

In the output, you can see that a notification came under the buttons.

Context-click:

Context-click also known as right click, if you right-click the button “Right Click Me” it will show a menu, and select any option from the menu it take you to the respective site. The context click is similar to the normal, click but we have to set the parameter click(button="right")

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
resp = page.goto("https://demo.testercoder.com/popups.html")

page.locator("#contextButton").click(button="right")
page.locator("#bing").click()

Hover:

In a few automation tools, hovering on an element is called moveToElement, In playwright we call it hover() function. After hover you can further write code to click an element from the hover menu and so on.

from playwright.sync_api import sync_playwright

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
page.goto("https://demo.testercoder.com/popups.html")
page.locator("#sub-menu").hover()

Alternatively, you can use page.hover(), to mouse hover on the element

page.goto("https://demo.testercoder.com/popups.html")
page.hover("#sub-menu")

Double Click:

You can double-click an element using dblclick() function from playwright

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
page.goto("https://demo.testercoder.com/popups.html")

page.locator("#double-click").dblclick()

You may see the pop-up because the playwright accepts the pop-up by default.

Alternatively, you can use page.dblclick() to perform the double click in Playwright Python.

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
page.goto("https://demo.testercoder.com/popups.html")

page.dblclick("#double-click")

Drag and drop:

You can drag an element and drop the element in other sections of the webpage, this is bad design but in a few places, it is required (like webpages which has quizzes).

page.locator(to_be_dragged).drag_to(target_location_to_drop)

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
page.goto("https://demo.testercoder.com/popups.html")


dropbox = page.locator("#dropzone")
page.locator("#drag1").drag_to(dropbox)

Drag and Drop using page.drag_and_drop.

We can also use page.drag_and_drop(source, target), to drag a source element into the target element.

from playwright.sync_api import sync_playwright, expect

pw = sync_playwright().start()
page = pw.chromium.launch(headless=False).new_page()
page.goto("https://demo.testercoder.com/popups.html")

drag = "#drag1"
dropbox = "#dropzone"

page.drag_and_drop(source=drag, target=dropbox)

Note: There are other ways of doing the same using page.mouse.methods, but they require the x and y, coordinates, even when I provided they clicked different elements than I expected (so unless you know the exact location of the element do not use these methods..