How to get the text of an element using the Playwright?

This post will discuss various ways of getting the text of an element using Playwright. Here we will only talk about the visible text on the webpage, not the hidden text.

We will get the text of the below-highlighted element. This is located on the URL – https://testkru.com/Elements/TextMessages.

Using innerText() method

innerText() method returns the visible text of an element and its descendants.

Let’s try to get the element’s text highlighted in the image above.

  • First, we will locate the element using the locator() method provided by the playwright.
  • locator() method accepts a selector string as a parameter. That selector string can be an XPath, an id, etc. As we can see in the DOM, the id attribute’s value of the element is “plainText“. So, we are going to use it and locate the element
page.locator("#plainText")
  • We can then use the innerText() method on the locator to get the visible text.
locator.innerText()
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
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(new BrowserType.LaunchOptions().setHeadless(false));

		Page page = browser.newContext().newPage();

		page.navigate("https://testkru.com/Elements/TextMessages");

		Locator textLocator = page.locator("#plainText"); // locating the element

		System.out.println("Text : " + textLocator.innerText()); // getting the text

		browser.close();
		playwright.close();

	}

}

Output –

Text : A Plain Text
Using textContent() method

textContent() and innerText() methods appear similar, but there are a few differences between them, and you can choose the one more suitable to your requirement.

  • textContent()  gets the content of all elements, including <script> and <style> elements, whereas innerText() only shows “human-readable” elements.
  • textContent() method also returns the hidden element, whereas innerText() is aware of styling and won’t return the text of “hidden” elements.

The below image might further clarify the differences –

difference between innerText and textContent

Now, let’s use the textContent() method –

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
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(new BrowserType.LaunchOptions().setHeadless(false));

		Page page = browser.newContext().newPage();

		page.navigate("https://testkru.com/Elements/TextMessages");

		Locator textLocator = page.locator("#plainText"); // locating the element

		System.out.println("Text : " + textLocator.textContent()); // getting the text

		browser.close();
		playwright.close();

	}

}

Output –

Text :   A Plain Text 

Although it is not visible, we got “A Plain Text” with the innerText() method and ” A Plain Text “ with the textContent() method. This is because the textContent() gets the content of all HTML elements as it is ( ” A Plain Text ” ), whereas innerText only gets the visible text (“A Plain Text”).

This is it. 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.

References
Related Articles
Liked the article? Share this on

Leave a Comment

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