textContent() method in Playwright, as the name suggests, is used to retrieve the text content of an element on a web page. This method is useful for web scraping and verifying the content of a page. This post will cover the textContent() method of the Playwright in detail.
The textContent() method has many implementations, but Playwright suggests using the Locator implementation of the textContent() method, so we will only discuss the Locator textContent() implementation.
There are a few points to note about the textContent() method –
- textContent() method returns the text content of an element and its descendants.
- It also reads the including
<script>and<style>elements. So textContent() method can also show the hidden text.
Locator provides us with two overloaded implementations of the textContent() method –
Let’s look at both one by one.
default String textContent()
It returns the text content of an element and its descendants while reading the <script> and <style> elements.
Let’s take the example of the below-highlighted element. This element is present on our playground website – https://testkru.com/Elements/TextMessages
Inspecting the highlighted area will reveal the DOM of the element, where we can see that the element itself doesn’t have any text, but the descendants do.
So, the textContent() should return the text content of the descendants. Let’s try it on our element.
- First, we will locate the highlighted element using the locator() method. We can see in the above image that the id of the element is “textMessagesElements“.
page.locator("#textMessagesElements");- And then, we will use the textContent() method on the locator.
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/TextMessages");
Locator textMessagesLocator = page.locator("#textMessagesElements");
// Using "textContent()" method
System.out.println(textMessagesLocator.textContent());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
1) Plain Text
A Plain Text
2) Hidden Text
A Hidden Text
3) A Bold Text
A Bold Text
4) Underlined Text
Underlined Text
5) Italic Text
Italic Text
6) Text with uneven spaces
A Text with uneven spaces
7) Color change on Hover
Hover on the text
Here, we can see that the output contains many whitespaces. This is because the textContent() method also reads the <script> and the <style> elements, and we got those spaces in the result.
Internal Implementation of the textContent() method
default String textContent() {
return textContent(null);
}
textContent() method internally uses the textContent(TextContentOptions options) method. So, let’s discuss that now.
String textContent(TextContentOptions options)
It accepts options as an argument and returns the element’s text content.
What are the options that we can pass?
Here, options is an object of the TextContentOptions class, which has only one variable and a method.
class TextContentOptions {
public Double timeout;
public TextContentOptions setTimeout(double timeout) {
this.timeout = timeout;
return this;
}
}
So, we can change the timeout while using the textContent() method.
Where is the timeout used?
timeout is the maximum time the textContent() method will wait to retrieve the text content. If text content is not retrieved in the specified time, it throws a TimeoutError exception.
By default, the timeout is set to 30 seconds.
We can now change the timeout using the TextContentOptions class and pass it in the textContent() method.
TextContentOptions textContentOptions = new TextContentOptions();
textContentOptions.setTimeout(10);
textMessagesLocator.textContent(textContentOptions)The timeout is passed in milliseconds.
Let’s set the timeout to 10 milliseconds. As it takes more than 10ms to get the text content for our element, it should throw the TimeoutError exception.
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Locator.TextContentOptions;
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/TextMessages");
Locator textMessagesLocator = page.locator("#textMessagesElements");
TextContentOptions textContentOptions = new TextContentOptions();
textContentOptions.setTimeout(10); // setting a timeout of 10 milliseconds
// Using "textContent()" method
System.out.println(textMessagesLocator.textContent(textContentOptions));
// 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("#textMessagesElements")
============================================================
name='TimeoutError
stack='TimeoutError: Timeout 10ms exceeded.
=========================== logs ===========================
waiting for locator("#textMessagesElements")Few QnA
Does the textContent() method also return the hidden text?
Yes, it does. The textContent() also reads the <script> and <style> elements. So, it also knows about the hidden elements and texts.
Let us show you an example. We have highlighted a hidden text below and will try to find that text using the textContent() method.
We can see that the id of the hidden element is “hiddenText” and use it to locate the element using the locator() method provided by the Playwright.
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/TextMessages");
Locator textMessagesLocator = page.locator("#hiddenText");
// Using "textContent()" method
System.out.println(textMessagesLocator.textContent());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
A Hidden Text
What if we use the textContent() method on a null element?
It will throw a NullPointerException, as illustrated by 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/TextMessages");
Locator textMessagesLocator = null;
// Using "textContent()" method
System.out.println(textMessagesLocator.textContent());
// closing the instances
browser.close();
playwright.close();
}
}
Output –
Exception in thread "main" java.lang.NullPointerException: Cannot invoke "com.microsoft.playwright.Locator.textContent()" because "textMessagesLocator" 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.