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
Related
I am developing my first Chrome extension and have a question related to where to put the main logic (and things like API calls).
I use React for the popup, so an option is to put all logic in these React components. This is what I would do if was making a normal web app.
But with extensions you also have background scripts. So if I for example have to implement OAuth logging-in logic, what is the best place to put all the code?
A simple logic: All the API calls should be done in background script and DOM manipulation in content script.
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 have a bundle of older ExtJs components that drive the UI, store management, and application logic in something that prior to the world of MVC I'd have called an application. I'm in the process of rewriting it, and wanted to take advantage of ExtJS MVC if possible.
The one thing that makes this unique from the tons of guides I'd otherwise be working from is that my Ext app doesn't own the whole page - instead of a full page viewport onready I have a modal Ext.window.Window that runs on an event from other non-ext javascript on the page.
I'd like to migrate this into a coherent ext application if possible, but as they seem to only properly launch when ext is ready I'm questioning if this is the right tool for the job.
My leading idea right now is to initialize the application on page load, but not actually render any views - exposing a static method on the app the external js can call to render and start my app's lifecycle on demand. Is this a good idea? Is there a better option I'm missing?
Yes, it is a very good idea. I have written an example of simple login system where the application is not actually started before the user logs-in.
It is very similar to your way in that that there is a method you call to actually start the app.
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.
I am using selenium to automate ExtJs(Ver 3) web application. My main challenge is, Wait for page(Elements) to be rendered. is there any build in function with Extjs or any javascript functions to verify the page is completely rendered. Currently i am managing with thread.sleep. But it sucks lots of execution time. I need a dynamic wait handler. Can any one help me
Using javascript we can make it. Here are two methods:
one is : document.readyState
another one is : document.body.readyState