AngularJs Testing using Cucumber BDD - angularjs

Question

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?

Answer 1

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"
}

Answer 2

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!