Playwright Get Text of Element

In Playwright, you can get the element's text using the textContent() method or a set of elements using the allTextContents() method.

Table of Content

  1. Syntax
  2. Demo Website
  3. Get Text of an Element
  4. Get First Element Text from the List
  5. Get Last Element Text from the List
  6. Get Nth Element Text from the List
  7. Get All Elements Text from the List
  8. Video Tutorial

1. Syntax

  • page.textContent(selector[, options]) - In options we can specify strict and timeout.
  • locator.textContent([options]) - In options you we can specify timeout.
  • locator.allTextContents()

We can also use textContent() method with frame and elementHandle.

2. Demo Website

For a single element, let's get the text Get An Answer To Your Technical Queries from the homepage's banner, and for a list of elements, let's use the header menu of the programsbuzz website.

Playwright Get Text of Element

 

3. Get Text of an Element

Using locator method

When single elements return, we can use the textContent() method with the locator.

// Returns Text - Get An Answer To Your Technical Queries
await page.locator('div#slide-7-layer-1').textContent();

Using page Fixture

We can also use the textContent() method with the page fixture.

// Returns Text - Get An Answer To Your Technical Queries
await page.textContent('div#slide-7-layer-1');

4. Get First Element Text from the List

Using locator method

The locator method will return a strict mode violation error because selector will resolved to 5 elements.

// Strict Mode Violation Error
await page.locator('ul.we-mega-menu-ul>li>a').textContent();

Here, we can use the first() method, nth() method, nth selector, Xpath, and CSS selector or any other technique. Let's use the first() method.

// Returns Text - Tutorials
await page.locator('ul.we-mega-menu-ul>li>a').first().textContent();

Using page Fixture

When multiple elements return, the page fixture will return the first element by default.

// Returns Text - Tutorials
await page.textContent('ul.we-mega-menu-ul>li>a');

However, if you will set the strict option to true, it will return a strict mode violation error.

// Strict Mode Violation Error
await page.textContent("ul.we-mega-menu-ul>li>a",{strict:true});

When strict mode is on, we can use the nth selector, XPath selector, or CSS selector to get the text of the first element. We can not use the nth(), first(), and last() methods with the page fixture. Let's use the nth selector with index 0 to get the first element.

// Returns Text - Tutorials 
await page.textContent("ul.we-mega-menu-ul>li>a>>nth=0",{strict:true});

5. Get Last Element Text from the List

Using locator method

Similarly, to avoid strict mode violation in case of multiple elements, we can use the last() method, nth() method, nth selector, CSS selector, or XPath selector. Let's use the last() method.

// Returns Text - Ask Doubt
await page.locator('ul.we-mega-menu-ul>li>a').last().textContent();

Using page Fixture

We can use the nth selector, CSS selector, or XPath selector with page fixture. Let's use the nth selector and index -1 to get the content of the last element.

// Returns Text - Ask Doubt
await page.textContent("ul.we-mega-menu-ul>li>a>>nth=-1",{strict:true})

6. Get Nth Element Text from the List

Using locator method

We can use the nth() method, nth selector, XPath, or CSS selector to get a text from the nth element. Let's get the text of the 2nd element using the nth() method and index 1.

// Returns Text - Interview Questions
await page.locator('ul.we-mega-menu-ul>li>a').nth(1).textContent()

Using page Fixture

We can use the nth selector, XPath, or CSS selector to get a text from the nth element. Let's get the text of the 2nd element using the nth selector and index 1.

// Returns Text - Interview Questions
await page.textContent("ul.we-mega-menu-ul>li>a>>nth=1",{strict:true})

7. Get All Elements Text from the List

With the locator method, you can use the allTextContent() method, which returns an array of textContent values for all matching nodes.

await page.locator('ul.we-mega-menu-ul>li>a').allTextContents()

It will return text of all 5 elements in header

[
  '\n      Tutorials    ',
  '\n      Interview Questions    ',
  '\n      MCQ    ',
  '\n      Certifications    ',
  '\n      Ask Doubt    '
]

You can iterate through each value of the array using a loop.

const mylist = await page.locator('ul.we-mega-menu-ul>li>a').allTextContents();

for (let i = 0; i < mylist.length;i++)
{
    if(mylist[i].trim()==='MCQ')
    {
        console.log("element found in list")    
        break;       
    }     
}

The Loop will break after finding MCQ in the list.

Mon, 07/18/2022 - 15:21

Authored by

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

Video Tutorial: Playwright Get Text of Element

Tags