I'm using AngularJS 1.2.2 and I'm trying to use protractor (version: 2.1.0) to click on a link by it's ID with the following spec;
it 'allows adding levels', ->
element(By.id("add_level")).click()
If I use the test with the following I get an error
<a id="add_level" ng-click="add_level()"><div class="secondary_btn">Add Level</div></a>
ERROR:
ElementNotVisibleError: element not visible
(Session info: chrome=41.0.2272.89)
(Driver info: chromedriver=2.15.322448 (52179c1b310fec1797c81ea9a20326839860b7d3),platform=Linux 3.16.0-0.bpo.4-amd64 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 14 milliseconds
Build info: version: '2.45.0', revision: '5017cb8', time: '2015-02-26 23:59:50'
System info: host: 'ltsp', ip: '127.0.1.1', os.name: 'Linux', os.arch: 'amd64', os.version: '3.16.0-0.bpo.4-amd64', java.version: '1.7.0_65'
Session ID: f89f610e73e47854057e98c324a71e38
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{platform=LINUX, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, chrome={userDataDir=/tmp/.com.google.Chrome.sOTsvG}, rotatable=false, locationContextEnabled=true, mobileEmulationEnabled=false, version=41.0.2272.89, takesHeapSnapshot=true, cssSelectorsEnabled=true, databaseEnabled=false, handlesAlerts=true, browserConnectionEnabled=false, webStorageEnabled=true, nativeEvents=true, applicationCacheEnabled=false, takesScreenshot=true}]
However if I don't use an internal div then it works fine, except I loose my styling.
<a id="add_level" ng-click="add_level()">Add Level</a>
UPDATE
I've found a good work around, by moving the id to the inside div then my tests will work.
<a ng-click="add_level()"><div id="add_level" class="secondary_btn">Add Level</div></a>
