Need guidance from you all on the below situation.
I am working on a IT concern where my client asked to me to do a POC to test web app(which has been build using angularJs).
Expectation from my client:
He wants the web app to be tested in a controlled way using BDD(Behavioral Driven Development)
His recommendation is to automate the testing of webpage(angularJS) using Cucumber with BDD approach
My Analysis Outcome:
we can automate a webpage (non angularJS web app) using Cucumber with BDD in a efficient way by providing element identification using common properties but when i think about the angular properties, there is no option to use the angularJS element in cucumber as per my knowledge.
Help required on:
Could any one please suggest me what is the efficient way that we can automate a angularJS page using Cucumber and how can we get the angularJs page element properties in cucumber?
check http://www.protractortest.org/#/frameworks
It has the basic setup for the protractor framework with protractor-cucumber-framework.
exports.config = {
// set to "custom" instead of cucumber.
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework')
// relevant cucumber command line options
cucumberOpts: {
format: "summary"
}
};
On the cucumberjs github page you have an overview of the options:
https://github.com/cucumber/cucumber-js. You can use these in the cucumberOpts part in the protractor.conf file.
Expl:
cucumberOpts: {
require: "test/features/mystep_definitions/**/*.js",
format: "pretty"
}
I am working on a very similar situation at my client. Only difference is, we are using .NET (and thus SpecFlow)
Now I can speak for .NET that protractor is the way to go for the Angular JS application. It works like a charm and I am able to locate all elements as I go.
If you are hesitant to use protractor, it is still possible to locate every element by using javascript executor or css locator. Both work perfectly for an Angular JS application. Just make sure you wait the right amount of time for your elements to get loaded, or else you will get a lot of NoSuchElement exceptions.
Good luck!
Related
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.
There are 2 things available in angular :
1.angular cli
2.angularjs
please describe briefly. thanks
Angular-cli a command line interface. and it helps to add new components, directives, and services, from the command line;
it builds application based on your input. you can add code, test cases via command itself...
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your ... you need angularjs library to develop application
Angular-CLI is a TOOL to create your angular 2 application. It provides commands to generate code such as components, services and directives to make angular 2 development easier to the developer. It also allows you to build your application and serve your application as you are developing.
AngularJS : Is the famous JavaScript based framework.
Resume : In general we install Angular-CLI globally to help us in initialization or modification of our Angular projects
In a very simple words,
Angular CLI is a command line interface for writing or easily setting/building up an angular application.
Its just like building a java application from a simple notepad (even though we have other IDEs to help)
Angular js - is a older version of Angular (version 1.x) which is a open-source JavaScript-based front-end web application framework.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.It controlls the code to what it actually to do...
Angular CLI is "Command Line Interface".it needs command to run and perform any operations and it is mandatory for angular 2 and not for angular 1.
The CLI is used to start an Angular 2 application, and add new components, directives, and services, from the command line; it builds application “scaffolding” based on your input. It lets you add code, and unit tests, to an application quickly. Afterward, you fill in the actual business code.
The quick start is just a pre-coded application to give you an idea of what you can do with Angular 2 without having to write any code of you own.
Angualrjs- is nothing but just angular package which you can install in your system for further development.
Angular-cli- comes up with additional feature to make developer life easy it basically create a boilerplate code for you
for ex: structure of your project and you want to add ant component class or service class in project so you can point to your directory and run this command
"ng generate service [name]" it will automatically create a service class for you with initial configuration.
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.).
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.
Can page object design pattern be implemented in angular e2e or does it follow some other design pattern ?
As far as I'm concerned there is this GitHub project called Astrolabe (by stuplum) which is an extension for protractor that adds page objects to your functional/e2e tests.
https://github.com/stuplum/astrolabe
However, at the time of writing this it has some bugs to fix and it seems to be a WIP project.
You can find here a question regarding Page Object pattern alternatives:
Page Object pattern and alternatives
The protractor getting started page now has a section about it.
Note protractor is now the AngularJS team preferred way for e2e testing.
Regarding Astrolabe i don't believe that's the way to go, see for example this leaking abstraction while using sendKeys on their readme
signInPage.username.sendKeys('a username'); // will fill the username input with the text 'a username'
While the proper way would be more like
signInPage.setUserName('a username');
I prefer to create my own page objects without the need of any extension like Andres shows here