Angular Protractor retrieve text from div element returns null

Question

I have the following structure I want to query for some e2e angular test with protractor:

<div id='parentId'>
   <div>First</div>
   <div>Second</div>
   <div>Third</div>
   <div>Four</div>
</div>

Currently I want to retrieve a list of the texts of the child div elements :

['First','Second', 'Third', 'Fourth']

I remember being able to do so with protractor in Angular some time ago but I can't get it to work now.

Current code I have is:

mytest.e2e-spec.ts:

import { browser, element, ElementArrayFinder, WebElement } from 'protractor';

describe('A test here ', () => { 
    it('should find the texts in all four divs', async () => {
          const elements: WebElement[] = await element.all(by.css('#parentId > div')).getWebElements();
          let array = await Promise.all(mocks.map(async (item)=>{
             let text = await item.getText();
             // let text = await item.getAttribute('innerText'); = null
             // let text = await item.getAttribute('innerHTML'); = null
             // let text = await item.getAttribute('value'); = null
             // let text = await item.getAttribute('textContent'); = null
            return text;
          }));
          console.log(array);
     
     }

});

The above code returns ['null', 'null', 'null', 'null']

I can get the tagName and length of the WebElement returned array from the query properly. However, so far the text query keeps returning 'null'.

I have tried without even looping and:

await elements[0].getText();

will also produce null.

Also tried following queries instead:

const elms0: WebElement[] = await (await browser.driver.findElement(by.id('parentId'))).findElements(by.tagName('div'));


const elms: WebElement[] = await browser.driver.findElements(by.css('#parentId > div'));

they both return the length of the elements correctly, however the text returns always null or empty. I suspect this has to do with my async operation somehow racing, but I have tried all remedies out there, nothing seems to work so far. :/

Currently using protractor 7.0.0 , although the same version has been working before. Already went through related questions, I don't think there is anything I haven't tried yet.

Using chrome driver on a MacOS.

EDIT: The parent div had display:none as its styling which made it impossible to fetch the text.

getText sounds like it is currently broken with Chrome 91. I would check the Chrome + ChromeDriver version. — cnishina, Jun 04 '21 at 21:22
Similar problems are noted here: https://stackoverflow.com/questions/67813538/element-getattributevalue-returns-null-in-protractor Possible fix is to get off of 91 or wait till Chrome / ChromeDriver fixes this issue. — cnishina, Jun 04 '21 at 21:24

score 0 · Answer 1 · answered Jun 04 '21 at 20:24

If this won't work

describe('A test here ', () => { 
    it('should find the texts in all four divs', async () => {
          const elements = element.all(by.css('#parentId > div'));
          let array = await elements.getText();
          console.log(array);
     })
});

then you likely to have either issue:

elements are not visible. But in this case .getText() would returns '' unless a recent update changed it
this is chrome version specific problem that has been reported element.getAttribute('value') returns null in Protractor

PS. I used javascript syntax

score 0 · Answer 2 · answered Jun 04 '21 at 21:09

As @Sergey assumed, it was indeed another issue on my side.

the parentDiv had display:none as its style. Selenium WebDriver was somehow detecting the whole DOM structure but not the texts. Further posts here, here and here led to more and more confusion. It seems it is not possible to get text of div element if it is hidden.

Angular Protractor retrieve text from div element returns null

2 Answers2