WebElement Actions in PlayWright

Playwright Web Element Actions with Python

After identifying elements using locators, the next important step in automation is performing actions on those elements. Playwright provides many built-in methods that allow testers to interact with web elements such as buttons, input fields, links, and other components on the webpage.

In this tutorial, we will learn how to perform common web element actions using Playwright with Python.

---

Click Action

The click() method is used to click buttons, links, or other clickable elements.

page.get_by_text("Login").click()

This command finds the element containing the text "Login" and performs a click action.

---

Type / Fill Text

To enter text into an input field, Playwright provides the fill() method.

page.locator("#username").fill("admin")

page.locator("#password").fill("mypassword")

The fill() method clears the existing text and then enters the new value.

---

Clear Text Field

Sometimes we need to clear existing text from an input field before entering new data.

This can be done using the fill() method with an empty string.

page.locator("#username").fill("")

This clears the content present in the input field.

---

Keyboard Actions

Playwright allows automation scripts to simulate keyboard actions such as pressing keys or shortcuts.

Example: Pressing Enter key.

page.locator("#search").fill("Playwright Tutorial")

page.keyboard.press("Enter")

Example: Pressing Tab key.

page.keyboard.press("Tab")

---

Mouse Actions

Mouse actions simulate user interaction using the mouse such as hovering over elements.

Example: Hover over a menu item.

page.locator("#menu").hover()

This moves the mouse pointer over the specified element.

---

Double Click

Sometimes applications require a double click action. Playwright provides a built-in method for this.

page.locator("#file").dblclick()

This command performs a double-click action on the specified element.

---

Right Click

Right click (context click) can also be automated using Playwright.

page.locator("#options").click(button="right")

This simulates a right-click action on the element.

---

Playwright Web Element Actions – Quick Summary Table

The following table provides a quick reference of commonly used web element actions in Playwright. This helps testers quickly understand which method to use for different types of user interactions.

Action	Playwright Method	Description	Example
Click Element	click()	Clicks on buttons, links, or clickable elements	page.locator("button").click()
Enter Text	fill()	Types text into an input field	page.locator("#username").fill("admin")
Clear Text Field	fill("")	Clears existing text from an input field	page.locator("#username").fill("")
Press Keyboard Key	keyboard.press()	Simulates keyboard actions such as Enter, Tab, etc.	page.keyboard.press("Enter")
Mouse Hover	hover()	Moves the mouse pointer over an element	page.locator("#menu").hover()
Double Click	dblclick()	Performs a double-click action	page.locator("#file").dblclick()
Right Click	click(button="right")	Performs a right-click (context click)	page.locator("#menu").click(button="right")
Focus Element	focus()	Moves cursor focus to a specific element	page.locator("#email").focus()
Select All Text	keyboard.press("Control+A")	Selects all text inside an input field	page.keyboard.press("Control+A")

Using these web element actions effectively allows automation scripts to simulate real user interactions such as clicking buttons, entering text, navigating forms, and interacting with application UI components.

Conclusion

Web element actions are an essential part of automation testing because they simulate real user interactions with the application.

Playwright provides powerful and easy-to-use methods such as click, fill, hover, keyboard actions, and double click which allow testers to automate complex user workflows efficiently.

In the next tutorial, we will learn how to handle important web components such as dropdowns, checkboxes, radio buttons, alerts, frames, and file uploads using Playwright.