Unable to interact with third party angularJs application with phantomJs,capybara - angularjs

I am unable to interact with angularjs third party application. I have installed capybara-ng, capybara/angularjs and have changed the DSL to angularJs DSL.
I am using ruby2.0.3,phantomjs-2.0.0-windows.
The DOMs are not fully loaded and I am unable to proceed further.
Any help is much appreciated

Make sure you really are using phantomjs 2.0+, and turn on js_errors in your poltergeist driver config. The usual cause of this is the version of phantomjs you're using missing Function.prototype.bind support, which will show up in the js errors. You can polyfill support for it, but phantomjs 2 is supposed to have support built in

Related

which eclispe should be downloaded to automate angular js application

Is it possible to automate Angular JS application by using eclipse? If so, which version should I try?
Also, what are the languages I need to know before doing that.
I downloaded Angular JS from Help-->Eclipse Marketplace-->AngularJS
But somehow I feel like I am unable to connect the dots.
Please suggest me on this.
I'm not quite sure what you want to do, but if you have already installed Angular IDE into Eclipse, that's the most you can do from it. It supports projects, syntax and error handling in Ajs. In comment you've mentioned testing angular js application. Like every other website, you can use JUnit or TestNG automatic tests to verify work of your application. If you dont like approach from Eclipse, you can use Selenium IDE test that runs throught Mozilla Firefox.
On picture above you can enable or disable Angular support for your project.

Slow performance in hybrid AngularJS and Angular application in Safari

I have started recently the migration of an AngularJS application to Angular 4 using the upgrade module.
One of my AngularJS directives uses a third party library (ngFlow) to upload files using XMLHttpRequest.send(). When running in hybrid mode, uploads work fine both, in Chrome and in Firefox. However, in Safari the app becomes very slow during an upload and the browser process reaches 100% CPU used.
Using Safari web tools, I see that there is a lot of calls to globalZoneAwareCallback from zone.js.
My impression is that the Angular zone is kicking off change detection for every XMLHttpRequest progress event happening during the upload.
I am aware that I could use runOutsideAngular from NgZone to avoid this, but I don't know how to use it in the case where the async call is happening in a third party AngularJS library or if there is any other solution to address this issue.
Finally I managed to resolve the issue using runOutsideAngular.
First, I downgraded the NgZone module to use it in my AngularJS code:
factory('ngZone', downgradeInjectable(NgZone));
And then I injected the service in the upload directive and use it to run the file uploads out of the Angular zone:
ngZone.runOutsideAngular(() => $flow.upload());
To avoid all issues with $digest and performance I recommend using downgradeModule - it bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.

Can I use Angular1 plugin in Angular2 application?

I am very new to Angular 2 and would like to know if Angular 1 plugins can be used in Angular 2. I have used ng-knob in ionic 1 app. Some suggested to use jQuery knob instead but I really want to use ng-knob as it has many more options.
Is it possible to use ng-knob in angular 2? Even if there is a harder way I would not hesitate to try it but I really wan't to use ng-knob.
Any help with sample code is greatly appreciated.
As Angular2 framework is different from Angular1 framework, I'm afraid to say that you can't use Angular1 plugin(s) for Angular2.
Angular2 is a new framework and recently became stable. So, if you are looking for Angular2 plugin(s), its very hard to find them(as of now) as community is still developing Angular2 plugin(s).
Check out the Upgrading with The Upgrade Adapter section in angular.io - point 2 and other sections till 8.
https://angular.io/docs/ts/latest/guide/upgrade.html
Use angular.umd.js file instead of angular.dev.js or angular.js for 2.x. It supports both angular1 application and angular2 application to run side by side. This way you can use 1.x plugin with angular 1.x application and still run angular 2.x application side by side. You can use Zone.js to merge two way binding between angular 1.x application and 2.x application.
But this can be complex and if you are not comfortable with advanced hacks, you should take the answer of using 1.x plugins in 2.x versions. Unless you are ready to port your 1.x plugin to 2.x plugin yourself.
Zone.js intro - https://www.youtube.com/watch?v=V9Bbp6Hh2YE Good resource from Misko.

Trying to run selenium - test on angular site

I try to run a selenium test (using selenium IDE on Firefox) For an angular app.
I followed the instructions here in SO and added something like this:
Command=waitForElementPresent
Target=//h3
But even if there are a lot of H3s generated quite quickly by the app, Selenium does not seem to be able to find any them. (it keeps waiting on the WaitForElementPresent command)
Anything else I have to do to make this work?
I would highly recommend you to use protractor in addition to Selenium. Basically its a Javascript executor which can locate elements by ng tags. I tried to test an angular site with selenium only, but protractor really made my life easier!
If there are are many H3 tags in your application , it would be a good idea to give an unique Id to tags .
like :
<h3 id="someUniqueId"> heading </h3>
which can be accessed by :
Command=waitForElementPresent
Target=id=someUniqueId
If you don't want to make the entire switch to Protractor but you do want to wait for Angular I recommend using Paul Hammants ngWebDriver (Java).
For me the standard selenium implicit wait didn't work as our page is built asyncronously with Angular. I fixed this by writing an actions class in which I waited for Angular (using ngWebDriver's waitForAngularRequestsToFinish()) before carrying out the actions (click, fill, check etc.).

Can angularjs apps be automated with selenium? if yes, why should we use protractor?

I know that we can automate AngularJs apps with Selenium. But we have a separate E2E testing framework that is Protractor for AngularJs apps automation.
Can anyone help me understand why we should use Protractor? Why not Selenium?
Not sure I understand your question. Am I right to assume you'd rather use Selenium - but want to understand what you're missing?
Well - Selenium provides means to automate web browsers - and thus used for automated e2e tests. Selenium API has implementations in several major programming languages - allowing you to write your tests in Java, C#, python, ruby, JavaScript and more.
If you already have a selenium-based e2e testing framework in place - you can use it also for AngularJS web-apps. You can also write the necessary JavaScript scripts that, once ran using the webdriver - will let you do all that Protractor does - but you'll have to do it yourself (just borrow from Protractor source code).
Why is it doable? Because Protractor basically took the JavaScript implementation of Selenium Webdriver and wrapped it in a way that makes your life a bit easier when testing Angular JS web apps.
You can see specific explanations in this old post of mine:
http://testautomation.applitools.com/post/94994807787/protractor-vs-selenium-which-is-easier
I'd say that if you:
1. want to write your test code in JavaScript
2. are focused on mainly Angular JS apps
You might want to consider using Protractor. Again - no magic there. Everything they did is there in their source code - so you can just take your picks if you'd rather stick with selenium.
protractor is an end-to-end browser automation testing framework that works through WebDriverJs which is a javascript selenium webdriver.
Quote from How it works? documentation page:
Selenium is a browser automation framework. Selenium includes the
Selenium Server, the WebDriver APIs, and the WebDriver browser
drivers.
Protractor works in conjunction with Selenium to provide an automated
test infrastructure that can simulate a user’s interaction with an
Angular application running in a browser or mobile device.
Protractor is a wrapper around WebDriverJS, the JavaScript bindings
for the Selenium WebDriver API.
Also see:
Automated e2e testing- WebDriverJS, Jasmine and Protractor
With protractor, you can write e2e tests with JavaScript, the language you write with Angular app.
Also, it has Angular-specific features.
Its element finders wait for Angular's $digest loop and $http to finish. So you'll have less chance to struggle with sleep and timing issues.
You can select elements with some of common directives such as ng-model, ng-repeat, ng-bind and etc. This is somewhat handy because you may have relatively less ids and classes in Angular apps because you need them only for CSS.

Resources