“Getting Hands-On with Elements: The Second Step in Your Playwright Journey”
This represents the second phase of “Getting Comfortable with Playwright: A Selenium Engineer’s Starting Point.” In our previous exploration, we initiated our knowledge migration from Selenium to Playwright by understanding browser contexts. Now we’ll advance to the next crucial step: mastering element interactions and manipulation.
An ElementHandle is a reference to a DOM element on the page. Created via methods like page.querySelector(), it extends JSHandle.
⚠️ Discouraged: Playwright recommends using Locator instead of ElementHandle for most use cases.
A Locator is not a single element, but a pointer to a selector that always resolves to the current DOM state.
// Locator for button with text “Submit”Locator submitButton = page.locator(“button:has-text(\”Submit\”)”);submitButton.click();
Unlike ElementHandle, Locator:
Auto-retries on actions until the element is ready (e.g., visible, enabled).
Avoids stale element problems.
Is safe for dynamic web pages.
1.Click element
Let say we want to click on enter button
<button id=”loginBtn”>Login</button>
2. Fill input
Let say we want to fill up with the text “abc”
<input id=”username” type=”text” />
3. “Hover over element”
Simulate hovering your mouse over a web element, such as a dropdown menu or tooltip trigger.
5.screenshot of a single element
Take a screenshot of a single element (not the full page).
<img id=”logo” src=”logo.png”>
Why This Comparison Matters
Choosing between Playwright and Selenium isn’t just about syntax — it’s about productivity, reliability, and how easily your automation adapts to modern web applications.
This function-by-function comparison reveals key differences in:
1) Simplicity & Readability
2) Built-in Waits vs Manual Waiting
3) Modern vs Legacy Design
4) Cross-Browser and Tooling Support
What’s Next
This blog covered the fundamental browser management operations. In our next posts, we’ll explore:
Frame:At every point of time, page exposes its current frame tree via the Page.mainFrame() and Frame.childFrames() methods.
Looking Forward
Technology evolves to become more intelligent and user-friendly. Playwright embodies this progression in web automation — delivering the familiar power of Selenium while introducing contemporary architecture, superior developer workflows, and advanced features. Making this shift doesn’t mean discarding your valuable experience; it means enhancing your skillset to remain competitive in the evolving automation field.
