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.).
Related
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!
I'm running an Angular app and I'm trying to get the current URL when testing on protractor. Which one to use?
browser.driver.getCurrentUrl() or browser.getCurrentUrl() ?
If this is an Angular application under test - use browser, otherwise - browser.driver.
To quote #jmr from a relevant github issue:
If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver.
Though, note that both are gonna work if this is Angular application under test. Some people even said that found browser.driver more reliable if it the sync time is longer than usual:
Just to add to this - I find that browser.driver works better on AngularJS apps that take time to sync. I have tried both and for some reason browser.driver is more reliable.
Though, I've personally used browser.getCurrentUrl() and cannot recall any problems.
How can I tell whether a (Drupal 7) web app was built using Angular by looking at the page source, and not having to ask the developers?
The best way to check is to write "angular" on browser console. If you get any object [With child objects as "bind","bootstrap","callbacks","module" etc.] then its an angular web app.
You can install a chrome or firefox extension called Wappalyzer. It tells you which site you are navigated on in your browser and the stack they use.
Find it here: https://www.wappalyzer.com
You could try: angular.version.full first. If this doesn't work, try getAllAngularRootElements()[0].attributes["ng-version"]. The reason being in Angular 1 the former will work and from angular 2 onwards the later will work.
If it's an online site you can use http://builtwith.com/ and it usually can give you a good and useful bunch of information about that site.
However if they are using angular you can take a look at their page sources to see if they are using any attributes of angular like ng-repeat for example
You can also take a look at the sources that your browser get while browsing that site to see if javascript files for angularjs are included among the sources.
Application declared using ng-app directive
very simple controller and directive
check for ng-model, ng-repeater attributes in the code. All these attibutes are written in small letters.
Also you can check by typing in the console(ctrl + shift + i) and navigate to console tab. There type in window.angular.version --> it displays the version of the site your are currently inspecting.
Try
https://builtwith.com/
This is the website that currently gives you the most detailed information about what technologies a site uses. They will let you do 5 free lookups a day.
https://wappalyzer.com/
is a good one too, and serve as a complement to builtwith. I don't think there is a limit of lookups, but the results are less detailed.
Those two used together may give you more insight.
use window.getAllAngularRootElements() in the browser console if it return some value its an angular application
For Angular, in Chrome's inspector, in the Elements tab, inside the body element is an element called app-root containing ng-version, which shows the Angular version it's using.
There is a Google Chrome extension called 'ng-detector'. It may be obtained from the Google webstore:
https://chrome.google.com/webstore/detail/ng-detector/fedicaemhcfcmelihceehhaodggfeffm
It creates a small icon next to the URL bar that indicates whether or not it thinks the page was created using Angular, although I have not thoroughly tested its validity.
Install chrome extension React-Detector, it works!
window.getAllAngularRootElements() worked for me
You can install a Chrome or Firefox extension called Augury. It tells you if app is an angular or not.
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.
i would like to use Behat for testing my angular.js application. But the problem i'm experiencing is that when you go to a route and want to click on a link Behat doesn't know when the template is rendered, so sometimes it clicks while the content isn't available. Anyone that has experience with testing an angular.js application using Behat?
Or does anyone know how you can check in javascript if the template of the current route is done rendering? And how to check if angular.js is done bootstrapping the application on page load?
I know angular.js has ngScenario, but i want to use Behat because:
The Gherkin language which is human readable
Our backend is written in Symfony, so we can use the same framework for testing both
kind regards,
Daan
The mink api has a method wait which allows you to pause the execution of your PHP contexts until your javascript application has finished processing 'something'. There's a simple example in the docs: http://mink.behat.org/#basic-browser-interaction
$session->wait(5000,
"$('.suggestions-results').children().length > 0"
);
In the example provided, the PHP context will be paused for up to 5 seconds until the list of suggestion results has been populated. You'll need to ascertain the equivalent javascript expression which will ascertain when your route has finished rendering.
We've had some trouble in the past using jQuery expressions and have reverted back to native browser methods such as getElementById.
You'll also need to use a mink driver capable of executing javascript. We use the ZombieDriver as it runs on the command line. There are a few alternatives which may suit you better.
http://mink.behat.org/#different-browsers-drivers