I am trying to test if an Angular ng-click link is being clicked with Geb. Link does not really navigate anywhere, so test should stay on the same page. But seems that test can't find my link definition on my Geb UI page.
Angular:
<a ng-click="menuAction('open')">...</a>
Geb UI Page "MainPage":
openLink { $("a", "ng-click":"menuAction('open')") }
Test:
given:
to MainPage
when:
openLink.click()
then:
at MainPage
Getting the following error:
org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (898, 147). Other element would receive the click: <div ng-show="processing" class="my-new-container ng-scope">...</div>
Found similar problem here.
Testing Angular dynamic page content (ng-if) with Geb
But unfortunately it did not help me to resolve my problem.
Appreciate any help!
This was solution to my problem.
openLink(to: OtherPage) { $("a", "ng-click": "menuAction('open')") }
Related
I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following error:
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)I }) => {
I.amOnPage('/');
I.click('ADD');
I.seeElement('#product_form');
I.fillField('#sku', 'SKUTest000');
I.fillField('#name', 'NameTest000');
I.fillField('#price', '25');
I.waitForElement('#productType');
I.selectOption('#productType','DVD');
I.waitForElement('#size');
I.fillField('#size','200');
I.click('Save');
My add element looks like this:
<Link title="ADD" to="/add-product">ADD</Link>
Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!
Update:
I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:
http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc
My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?
Seems like the problem was I put the whole home page's load after the rest api call by accident.
So I have been trying to implement google single sign on into my angular application; however, sometimes when I reload the page the button disappear. My angular application is using angular routing. If I were to put my button outside of this it would work as expected. It just runs into problem when its loaded through a partial. Any idea how I can fix this?
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div ng-view></div>
As #agektmr said, the problem is related to the way angular and platform.js interact with each other.
In order to use the auto rendered button you need to trigger the library when the DOM is loaded.
What I did is calling the following code in the onComplete method (I'm working with AngularMaterial dialogs, but you should be able to find a similar method quite easily):
$timeout(function() {
$window.gapi.signin2.render('g-signin2');
});
The only difference is in your html you should change your div and instead of adding it a g-signin2 class you should add an g-signin2 id:
<div id='g-signin2' data-onsuccess='yourMethod'></div>
If you're willing to learn more about Google's implementation you could take a look here.
I'd recommend using imperative approach for implementing the button for this.
<div id="signin">
<button>sign-in</button>
</div>
<script>
document.querySelector('#signin').addEventListener('click', function() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signIn();
});
</script>
Find more concrete example here
https://github.com/GoogleChrome/google-sign-in
The code you indicated didn't work because of timing. platform.js library tries to take care of it but fails because it's before angular renders DOM.
I have app and admin modules responsible for example.com/ and example.com/admin respectively.
In each of them I use the same <user-list> directive. there is a link to user profile inside <user-list> directive.
so when accessed from localhost/admin/users, I want the link to be example.com/admin/user/id
and when accessed from localhost, I want the link to be example.com/user/id
admin.html: <user-list from="admin"></user-list>
directive.html: <md-button ui-sref="{{from}}.user.profile({user.id})">profile</md-button>
config: $stateProvider.state('admin.user.profile', {
url: '/details/:id',
....
this is not working. the link is not generated. no error or something. how I can I achieve this?
Nothing wrong with the code there. The problem was that I didn't have the corresponding state and somehow expected to see a link even when it was a wrong link.
All I am trying to do is include an anchor tag inside the html of a partial that links to an external site. Were this standard html, the code would simply be:
google
As simple as this is, I cannot seem to find a working solution for getting past angular intercepting the route (or perhaps replacing my anchor with the https://docs.angularjs.org/api/ng/directive/a directive unintentionally?).
I have scoured SO and the rest of the web and seen a myriad of solutions for dealing with: links within the same domain, routing within the SPA, routing within a page (ala $anchorScroll) but none of these are my issue exactly.
I suspect it may having something to do with using $sce but I am an Angular n00b and not really sure how to properly use that service. I tried the following in my view controller:
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
with the corresponding:
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
(as described here: Binding external URL in angularjs template)
but that did not seem to do the trick (I ended up with just href="{{" in the rendered page).
Using a plain vanilla anchor link like this:
google
also failed to do the trick (even though some online advised that standard href would cause a complete page reload in angular: AngularJS - How can I do a redirect with a full page load?).
I also tried adding the target=_self" attribute but that seemed to have no effect either.
Do I need to write a custom directive as described here?
Conditionally add target="_blank" to links with Angular JS
This all seems way too complicated for such a simple action and I feel like I am missing something obvious in my n00bishness, at least I hope so because this process is feeling very onerous just to link to another url.
Thanks in advance for any solutions, advice, refs or direction.
It turns out that I did in fact have all anchor links in the page bound to an event listener and being overridden. Since that code was fundamental to the way the page worked I did not want to mess with it. Instead I bypassed it by using ng-click to call the new url as follows:
HTML:
<a class="navLinkHcp" href="{{hcpurl}}" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>
Controller:
$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';
$scope.linkModelFunc = function (url){
console.log('link model function');
$window.open(url);
}
And voila! Good to go.
Thanks again to KevinB for cluing me in that this was probably the issue.
I am in the middle of a reasonably size AngularJS app and our BDD's have started failing recently. It turns out that they are failing because after the first load of the site in firefox (i.e. reloading the page) causes the NG-View to render
function () { return html; }
the html for this is
<div data-ng-view="">
<span class="ng-scope">function () { return html; }</span>
</div>
I can reproduce this error in firefox easily by reloading the page but in Chrome/IE10 and IE10 in IE7 mode i can't reproduce it.
When debugging the app is 'booting' up normally - making a few service calls to get lookup data etc, registering services, directives and loading controllers.
When the page is in this state i can execute
angular.element($0).scope()
on the console and see the scope of
<html data-ng-controller="app.controller">
There are no errors in the console when the app is in this state, and if i set the debugger to pause on errors i get one error in jquery-min and nothing else.
Any ideas would be greatly appreciated. I can also post code samples to particular areas like routing if required.
*EDIT *
The issue was related to dynamically loading the controllers/html using some code from this google group
https://groups.google.com/forum/#!msg/angular/rs1dj097oHA/cPwPZfLvX4EJ
the fix to the code can be seen in the thread.
I haven't marked it as an answer because i feel there is a deeper issue in the way angular is treating 'routeDefinition.template' otherwise i would see either the html or the printing of the entire function ALL the time - not some seemingly random switching.
routeDefinition.template = function () {
return html;
};
cheers
kle