textContent() method in Playwright

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

all text messages

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.

DOM of text messages
  • 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.

hidden text

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 null

We 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.

Related Articles
Liked the article? Share this on

Leave a Comment

Your email address will not be published. Required fields are marked *