problems running angularjs e2e testing with protractor in phantomjs

Question

When doing E2E tests with Protractor and PhantomJS and doing things like

expect(element(by.repeater('book in library') row(0).column('{{book.name}}')).getText()).toBe('Some Text');

fails only in PhantomJS, but not in Firefox or Chrome.

Html

<div>
  <ui tabset> 
    <li tab ng-repeat="book in library track by id"> 
      <span tab-heading>{{book.name}}</span>      
      <div ui-view="test"></div>
    </li>
  </ui>
</div>

Protractor E2E test case:

 it('test', function () {
  var bookName = element(by.repeater('book in library track by id').row(0).column('{{book.name}}'));
  expect(bookName.getText()).toEqual('test');
 });

I am using angularjs 1.2.14, protractor:1.0.0-rc4, phantomjs:1.9.7-14 on linux This test case runs well in Chrome and Firefox but fails in PhantomJS and the error I get is

 Error:Expected '' to equal 'test'

When I do count on rows works fine but trying to fetch column value, I am getting the empty string.

// works fine:
expect(element.all(by.repeater('book in library track by id')).count()).toEqual(9); 
// test fails:
expect(bookName.getText()).toEqual('test');

Is there way to fix this?

Answer 1

It seems it's a WebDriver known behavior. The WebDriver returns an empty String when the getText() method is called on a non-visible element. And, sometimes, even is the element is visible, it still returns an empty String.

I've found several solutions in this other StackOverflow question, but none worked for me (Selenium, PhantomJS, and a ZK application). The innerText attribute was empty too.

I found my solution here. The trick was to use the textContent attribute, which returned the expected value when the getText() returned an empty String.

WebElement div = driver.findElement(By.xpath("//div[@id='myDiv']"));
assertEquals("expectedtext", div.getAttribute("textContent"));