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.
- Using innerText() method
- Using textContent() method
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 TextUsing 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 –
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
- https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
- http://perfectionkills.com/the-poor-misunderstood-innerText/