I am looking for automated testing tools to test a webpage heavily written using ExtJS. Initially I was using casperJS/phantomJS. Since, those tests work best in a CI environment and are super-light and easy to code. But I found a limitation that casperJs does not support TrifleJS for IE testing. It only supports phantomJS(chrome and safari) and slimerJS(firefox).
I need to test our web-app on IE9, IE10 and IE11 too. Squish seems to be very flexible and well-developed. I want to know whether it is suitable for testing the ExtJS web-app.
Thanks
According to the matrix at this link Squish does support ExtJS framework. Of course main problem of testing ExtJS apps is that all the element IDs are dynamically generated and one cannot rely on these for UI testing. However Squish provides XPath-based search that can be used instead.
I'm actively evaluating Squish for our ExtJS 4.2.x based web app so in a while if you interested I would be able to provide more insights but it does look very promising especially since you can use Eclipse-based plugin to build your tests visually
Related
i have to Test a Vaadin application with cucumber and Selenium web driver(using Java script Executor).is it a good approach for vaadin application Testing?
Yes, You can use Selenium and cucumber but you need to manage your framework to handle multiple windows and using Event firing and event listener classes.
My understanding of Vaadin application in which a UI is a viewport running in a web page. A web page can actually have multiple such UIs within it. Such situation is typical especially with portlets in a portal
--So your framework or test should handle multiple windows.
-- Need to handle Vaadin Sessions.
Vaadin follows an event-driven programming paradigm, in which events, and listeners that handle the events, are the basis of handling user interaction in an application
You need to have good knowledge of Selenium to automate Vaadin
It is possible to test a Vaadin application using only Selenium. However, it might be better to use Vaadin TestbenchVaadin. Testbench is based on Selenium, but provides better integration with Vaadin. The main advantages are:
1. There is no need to provide manual delays between actions, because it waits for UI Components to load.
2. It provides additional selectors to select Vaadin components.
3. It can provide screenshots of failed tests.
The only downside is that Testbench is a commercial feature that requires you to pay money.
For a more detailed analysis of pros/cons is see: Official Blog Entry
There is a Github repository that shows a basic setup of testbench as well as plain Selenium.
I used to have same problem, and I used the Selenium IDE for identifying the XPATH for each element in vaadin, then use it like this:
driver.findElement(By.xpath("//div[#id='thalamusboapp-218829419']/div/div[2]/div[3]/div/div/div[2]/div/span/span") );
I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.
I want to start developing a mobile hybrid app using angularjs, css3 and html5. Was searching for a framework and found these two. Both are looking very nice however I was not able to get a good comparison between both of them. Can anyone please list down pros and cons for both.
A comparison between them in terms of scalable, out of the box components, speed and compatibility with Angular and devices targeted will be very helpful
One year has passed since both frameworks were released. Onsen UI is currently in stable 1.2 version while Ionic is in the last release candidate state.
I have worked with both of them so let me give you a short overview, I also wrote a much larger blog article, you'll find it at the end of this answer.
I won't go into much details about the core framework; if you have a previous AngularJS knowledge you will easily transition to Ionic or Onsen UI.
Both frameworks are built around AngularJS and they heavily depend on directives, you can also easily build your custom directives. Onsen UI also features a jQuery support (unnecessary if you ask me).
Both frameworks support Android 4+, iOS 6+ (some features are available on Android 2.3), Onsen UI also officially supports Firefox OS and desktop browsers. Ionic don't have an official desktop support, but it will still work (it will not be pretty, imagine ).
Ionic currently don't support Windows Mobile platform (it will have it in the future); Onsen UI support is currently in development (since November 2014).
Both frameworks support some kind of splitview feature so they can be used for table development.
Both frameworks have a distinctive beautiful looking flat UI. I prefer Ionic over Onsen UI look and feel, but this is a matter of personal taste. Both default themes look iOS 7 like.
Onsen UI supports native looking themes for Android and iOS. Ionic framework uses the same theme for all platforms, but some features will depend on the platform (for example tab look and feel)
Both frameworks have a working theme builder.
Ionic supports SASS while Onsen UI is built around Topcoat CSS library.
Both frameworks have a large widget support (directives)
Onsen UI has a better documentation. It is separated at two different locations. First one is “Components” where you can see different directives and each one has a working example you can use and replicate. Second part is a “Guide” where you are guided through the application creation process.
Ionic has a disorganized documentation (heavily fragmented). It lacks a real “getting started” tutorial, even if you have previous AngularJS experience. It shows you pieces, but not how to connect them correctly.
On the other hand Ionic has much larger community so you will easily find problem solutions.
Ionic framework has a great official forum + large StackOverflow community. At the same time, Onsen UI uses only StackOverflow as a help center (I would call this a fail).
Onsen UI has an HTML5 IDE called MONACA IDE (great tool), Ionic IDE is currently in production; you can participate in beta test.
Ionic has a growing 3rd party plugin community (for example date picker); I couldn't find any 3rd party Onsen UI plugin
I wrote a much larger article covering Ionic / Onsen UI changes, find it here.
Since both frameworks are pretty new and not very popular (yet!), I don't think anybody has taken the time to do an extensive comparison between the two. I don't even think the final set of out of the box components is determined by the developers themselves yet, active development is still going on.
As for compatibility, hybrid apps run in the native browsers of the devices where they are installed on. Both frameworks need CSS3, so old phones will never be supported by either of the frameworks.
The OnsenUI-tag here on StackOverflow is the only support OnsenUI offers (currently), and at the moment of writing there are 0 questions/answers. Ionic has a very active forum on their website + some questions/answers here on SO.
I think having an active community backing up a framework will eventually lead to a better framework. Therefore I'd go for Ionic. Personally, I find Ionic's standard-design more appealing as well, but you should judge that for yourself.
Ionic
more lean to Angular style like routes,controllers and template and it's structure is kind of complicated in first hand.
command like "ionic start myApp tabs" still don't available in onsenUI
Material Design like "Cardboard" are available
OnsenUI
simpler structure, easy to start
couple with Monaca IDE, some of features are only available only if you use Monaca. otherwise you have to create things by yourself.
supported ios8 design recently
Ionic has a more mature feature and CSS component set and out of the box. Injectable delegate services, representing the UI elements (directives) gives you more control over UI/UX interactions. The development community is (currently) very active and it's gaining traction.
I cannot properly speak to speed/performance between the two but know both are optimized for mobile.
As I develop more, I will report back with comparisons. Good luck.
Just started using ionic after some time native development. Must seriously say it has some great cli features! For example you can start your project from a gist in my opinion this is nice to have for poc's
Havent been able to test everything but what i've seen really impresses me!
It's well documented in there own way, active community and it keeps getting better.
Just wanted to share my thoughts for what it's worth
Im working in Ionic Framework during 1 year with a real project, i have created a game with Ionic, its very special because hybrid app is not best choice if you want create game. When you develop a game you need performance !
However if you develop simple game with few animation, its good.
Here is my game in playstore, its a memory game "Memory Party" :
https://play.google.com/store/apps/details?id=fr.jhaccoun
Why Ionic is a good choice :
very very very good documentation (tutorial, forum, article,...)
stable (ionic 1), you can find many apps in store
Easy to develop (ionic come with many tools to help the developer, you can develop and test in live in your phone without deploy thanks live reload
Many cordova modules are available
you don't need mobile skills, just angularjs, html, css...
Ionic provide beautiful components and you can custom the components if you like
I found Ionic the best for some reasons, like their community support and the documentation. I am still evaluating the onsen from a long time but still havent found the one unique thing that will drift me towards it compared to Ionic
I need to test an angular application and I'm thinking which testing framework to use.
Can someone please list the differences between those 2 testing framework, what is good / bad in each. when should each of them should be used? can the one replace the second?
Edit 1:
I'll try to focus my question. what I'm really interested in is the technical abilities of the 2 frameworks.
for example, some of the differences I have found:
selenium webdriver has the ability to run on grid in parallel on multiple machines, on the other side, angular scenarios runs much faster than selenium.
with selenium I can use keyboard keys such as Enter, Backspace and more and also do drag and drop actions.
selenium is not dependent on the app technology, angular is for angular apps only
Those are the type of differences I'm looking for - what can be done with one and can't be done with the other
thanks
Both should be used for testing an angular application. However, in my experience, they serve different purposes.
Angular e2e tests are your best friends when integrating new features into your application, or changing already existing features. They are there to make sure your application still behaves as expected if you are making changes to your code. These tests are much faster than selenium, do not need to be as in-depth, and, in my experience, are best executed before you push a new feature to your version control server.
Selenium tests should be used for regression testing. These tests should be far more in-depth than Angular e2e tests, and should be performed before pushing code into production.
UPDATE: This question may be less relevant now. As of January 2014, Angular plans to move from their own E2E suite to the protractor library for function tests, which use Selenium Webdriver.
If you're starting a new Angular project, you may want to look into using Protractor, as it is going to replace the current method of E2E Testing in the near future.
(Source: http://docs.angularjs.org/guide/dev_guide.e2e-testing)
I am struggling with this question as well.
Here is my thinking today:
1) Use Angular e2e testing for integration/regression testing the UI with mocks of your external dependencies (like the app server).
2) Use Selenium for integration/regression testing the complete system in a test/qa environment.
It seems Angular e2e testing helps fill in the gaps that unit testing leaves in testing view and controller logic that is tied to UI events. All of the Angular tests should mock external dependencies.
Selenium seems like the best fit for testing the entire system as the user will experience it.
This is such a subjective question, and therefore I'd first tell you to do some research. There is not much difference.
It is a very new project, whereas Selenium is a lot more mature. For instance, the JSON Wire Protocol that WebDriver is built on top of, is an actual W3C spec. This shows the project is very mature and very stable.
Due to the above, Selenium has a much much wider set of documentation, and a much wider community.
With Selenium you have a variety of different languages to use to code the tests in, as well as use the IDE. Angular limits use to pure JavaScript. For a lot of manual testers, this is a skill most do not have.
Both Selenium and Angular are open source, which (believe me) helps tremendously in debugging problems and understanding design decisions in their respective API's.
I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.