If you’re familiar with locating elements on a web page using Selenium’s findElement() and findElements() methods but are now using Playwright Java, you may be curious about the equivalent method that provides the same functionality. This article will explore Playwright Java’s equivalent of these methods and how they can improve your web automation workflows.
- The findElement() method in Selenium helps to locate a specific element. It returns the first matching element if multiple elements meet the criteria.
- findElements() method in Selenium is used to return all matching elements.
When it comes to locating elements, there are multiple strategies available, including XPath and ID. The above-listed methods can utilize these strategies, and it would be beneficial for Playwright’s method to allow commonly used ones like XPath, ID, and CSS selectors.
The Playwright method, locator(), functions similarly to Selenium’s findElement and findElements methods. It enables the selection of an element through a selector string, which can be an XPath, CSS selector, or ID.
Locating an element using the “id” and locator() method
Let’s take the below-highlighted element, which is present on our playground website – https://testkru.com/Elements/Buttons.
Inspecting the element would reveal its DOM, where we can see that the id of the element is “leftClick“.
Syntax of locating the element using the id attribute
Locator locator = page.locator("#id_attribute_name");The selector string should begin with “#” followed by the element’s id attribute name.
As our element’s id is “leftClick“, so we can find our element using the below syntax.
Locator locator = page.locator("#leftClick");Once we have found the element, we can execute our desired action on it. For instance, if we want to obtain the text displayed on the button, we can easily achieve this by utilizing the textContent() method.
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();
// creating a BrowserContext
BrowserContext browserContext = browser.newContext();
// creating the page
Page page = browserContext.newPage();
// Navigating to the URL
page.navigate("https://testkru.com/Elements/Buttons");
// Locating the element
Locator locator = page.locator("#leftClick");
System.out.println("Text written on the element: " + locator.textContent());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Text written on the element: Left click on me
Locating an element using the XPath expression and locator() method
The below syntax can be used to locate elements using XPath.
Locator locator = page.locator("xpath_expression");Let’s use the same element from the image above as an example. We can write its XPath as “//button[@id='leftClick']“. So, below line of code will locate the desired element.
Locator locator = page.locator("//button[@id='leftClick']");Let’s again retrieve the text written on the button, but this time, we will use the XPath to locate the element.
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();
// creating a BrowserContext
BrowserContext browserContext = browser.newContext();
// creating the page
Page page = browserContext.newPage();
// Navigating to the URL
page.navigate("https://testkru.com/Elements/Buttons");
// Locating the element
Locator locator = page.locator("//button[@id='leftClick']");
System.out.println("Text written on the element: " + locator.textContent());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Text written on the element: Left click on me
Retrieving all matching elements
So far, we have only located a single element. However, if a particular selector string matches multiple elements, we can also retrieve a list of those elements.
We can use a combination of locator() and all() methods to retrieve a list of elements in Playwright.
// Retrieving all elements
List<Locator> locators = page.locator("selector_string").all();
Let’s try to use this on the below-highlighted elements. You can find this element on our playground website.
In this case, the “//input[@id='firstName']” XPath is matching two elements. We will proceed to incorporate it into our code and observe the number of retrieved elements.
import java.util.List;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
public class CodekruTest {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();
// creating a BrowserContext
BrowserContext browserContext = browser.newContext();
// creating the page
Page page = browserContext.newPage();
// Navigating to the URL
page.navigate("https://testkru.com/Elements/TextFields");
// Retrieving all elements
List<Locator> locators = page.locator("//input[@id='firstName']").all();
System.out.println("No. of elements: " + locators.size());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
No. of elements: 2
We can see that our code also returned the 2 elements, and now we can perform any desired actions on them.
Few points
- When using Selenium’s findElement() method, if the XPath or selector string matches multiple elements, the method will automatically return the first matching element. However, Playwright’s locator() method does not do this. To retrieve the first element using Playwright, we must explicitly specify that we want to do so.
- We can use Playwright’s first() method to retrieve the first matching element.
// Retrieving first element
Locator locators = page.locator("//input[@id='firstName']").first()
- We can also retrieve the last matching element using Playwright’s last() method.
// Retrieving last element
Locator locators = page.locator("//input[@id='firstName']").last()
We hope that you have liked this article. If you have any doubts or concerns, please feel free to write us in the comments or mail us at admin@codekru.com.