Selenium does not see AngularJS page elements

I have a problem writing a Selenium test to test my application. What I want to check is when the user enters the correct username / password, the correct page is displayed and the user is logged in.

The main problem is that my login form is created as an AngularJS directive (I have two different login pages, and this directive is reused in both places), and Selenium does not seem to be able to see the elements of this markup created by the directive. Most importantly, the tests took place on this page before I replaced the regular markup with the generated directive.

So it seems that Selenium cannot see the html elements that are generated by the directive.

Any suggestion how I could overcome this problem? Except, of course, returning this change introducing a directive :)

+5
source share
3 answers

Well, it looks like I misused Hebe with Selen. I did not specify a default driver, and Geb chose the one that does not work with AngularJS. After I manually changed the driver in Chrome, everything started to work.

+1
source

The source of the page will show the template before it is compiled by Angular. You should see the compiled template using the Chrome Developer Console: try right-clicking on an item and select "check item" to open it.

driver.getPageSource() ( ), driver.findElement() .

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

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

I do not think that it is angular connected, but rather connected with selenium, Selenium will have only the initial DOM before any JavaScript manipulation with it.

We saw the same problem with simple jQuery plugins that displayed DOM elements.

See if the tip here helps:

Why can't Selenium find dynamically added DOM elements? Capybara does not recognize dynamically added DOM elements?

+1
source

All Articles