Selenium does not see AngularJS page elements

Question

I have problem with writing Selenium test to check my application. What I want to test is when user types correct login/password, correct page is shown and user is logged in.

The main issue is that my login form is generated as a AngularJS directive (I have two different login pages and this directive is reused in both places) and Selenium seems to be unable to see elements from this directive-generated markup. What is most important, tests were passing on this page before I've replaced regular markup with generated by directive.

So it looks like somehow Selenium is not able to see html elements that are generated by directive.

Any suggestion how I could overcome this issue? Except of course reverting this change introducing directive :)

Answer 1

Ok, it looks like it was me misusing Geb with Selenium. I didn't specify default driver and Geb picked one not working with AngularJS. After I manually changed driver to Chrome, everything started to work.

Answer 2

The page source will show the template before it has been compiled by Angular. You should be able to see the compiled template using Chrome's developer console: try right clicking on an element and selecting 'inspect element' to open it up.

driver.getPageSource() will fail for the same reason (it gets the uncompiled template), but driver.findElement() should work just fine.

<input id="username" type="text" ng-model="foo"/>

Should be found using

driver.findElement(By.id("username"));