innerText() method in Playwright is used to retrieve the visible text of a web element and its sub-elements. This post will discuss the innerText() method in detail using Java.
What do we mean by visible text and sub-elements?
Visible text
The visible text means human-readable text on the webpage, which is not hidden by using any CSS property. The innerText() method would return an empty string for the hidden text or element.
<p>
This is a text
</p>innerText() method would return “This is a text” string.
<p style="visibility: hidden;">
This is also a text
</p>The innerText() method would return an empty string because the element is hidden.
Sub-elements
An HTML document is made of nodes which follow a tree structure. So, it’s a high probability that one element contains another.
Take a look at the below example.
<div id = "parent">
This is a parent text
<p id = "child">
This is a child text
</p>
</div>- Using innerText() on the parent element would return both “This is a parent text” and “This is a child text” strings.
- whereas using innerText() on the child element would return only the “This is a child text” string.
There are many implementations of the innerText() methods in Playwright, but it is recommended to use the Locator implementation of the innerText() method. So, we will discuss Locator’s innerText() method implementation in this post.
Locator has two overloaded innerText() methods –
Let’s discuss them one by one.
default String innerText()
It returns the visible text of an element and its subelements.
Let’s try to get the visible text of the below-highlighted element. This element is present on our playground website – https://testkru.com/Elements/TextFields.
To get the text of the highlighted element, we will first have to locate the element and then use the innerText() method on it.
- The id of the element is “firstNamePlaceholder“. We can use it to locate the element using the locator() method provided by the Playwright.
Locator locator = page.locator("#firstNamePlaceholder");- And then use the innerText() method.
locator.innerText()
import com.microsoft.playwright.Browser;
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 "Browser" instance
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/TextFields");
// locating element
Locator locator = page.locator("#firstNamePlaceholder");
// Using "innerText()" method
System.out.println(locator.innerText());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
1) First Name Without PlaceholderWe can see that it fetched the visible text of the element.
Internal Implementation of the innerText() method
default String innerText() {
return innerText(null);
}
innerText() method internally uses the innerText(InnerTextOptions options), so, let’s discuss that now.
String innerText(InnerTextOptions options)
It accepts options as an argument and returns the visible text of an element ( similar to the textContent() method ).
What are these options?
Option is an object of InnerTextOptions class, which only has a single variable and a method.
class InnerTextOptions {
public Double timeout;
public InnerTextOptions setTimeout(double timeout) {
this.timeout = timeout;
return this;
}
}
So, we can set the timeout while retrieving the visible text of the element.
What is the use of timeout in the innerText() method?
timeout is the maximum time the innerText() method will wait while retrieving the visible text. If the text isn’t retrieved in the specified time, it throws a TimeoutError exception.
The default timeout is 30 seconds.
How to set timeout using options?
timeout is set in milliseconds, as shown in the below code
InnerTextOptions innerTextOptions = new InnerTextOptions();
innerTextOptions.setTimeout(100); // setting 100 milliseconds timeout
// Using "innerText()" method
System.out.println(locator.innerText(innerTextOptions));
We will set a timeout of 10 milliseconds, and our code should give us a TimeoutError exception, as it takes more than 10 milliseconds to fetch the visible text of our element.
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Locator.InnerTextOptions;
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 "Browser" instance
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/TextFields");
// locating element
Locator locator = page.locator("#firstNamePlaceholder");
InnerTextOptions innerTextOptions = new InnerTextOptions();
innerTextOptions.setTimeout(10); // setting 10 milliseconds timeout
// Using "innerText()" method
System.out.println(locator.innerText(innerTextOptions));
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Exception in thread "main" com.microsoft.playwright.TimeoutError: Error {
message='Timeout 10ms exceeded.
=========================== logs ===========================
waiting for locator("#firstNamePlaceholder")
============================================================
name='TimeoutError
stack='TimeoutError: Timeout 10ms exceeded.
=========================== logs ===========================
waiting for locator("#firstNamePlaceholder")Few QnA
Can the innerText() method return the hidden text of an element?
No, it doesn’t. Unlike the textContent() method, innerText() only returns the visible text of an element and its subelements.
What happens when we use the innerText() locator on a null element?
It will throw a NullPointerException as illustrated in the below example.
import com.microsoft.playwright.Browser;
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 "Browser" instance
Page page = browser.newContext().newPage(); // Creating a new page
page.navigate("https://testkru.com/Elements/TextFields");
// locating element
Locator locator = null;
// Using "innerText()" method
System.out.println(locator.innerText());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Exception in thread "main" java.lang.NullPointerException: Cannot invoke "com.microsoft.playwright.Locator.innerText()" because "locator" is nullWe hope that you have liked the article. If you have any doubts or concerns, please write to us in the comments or mail us at admin@codekru.com.