ArcGIS JS API – Automate Testing of Web App Based on ArcGIS JS API

arcgis-javascript-apiarcgis-serverjavascripttestingunit testing

So, there are multiple products that can let you automate testing interaction with web pages. I have used Selenium IDE for some time now and it works great for creating unit tests for HTML elements on the client side (make sure URLs work, you can access values in the drop-down list etc).

However, I have not found on the Internet any evidence that someone is using any out-of-the-box product for automating testing of web pages that are using ArcGIS JS API.

What I have found:

Consider testing an Editing template widget web page. You cannot capture selecting a feature template and creating a feature on the map using, for instance, with Selenium IDE. This is because those things don't happen at the client side, and the testing software is not aware of JS API and considers editing templates to be just a group of CSS elements.

Of course I automate testing of the feature services via the REST and can verify that the services are capable of creating and storing features, but I am interested specifically in the web page (feature service can be working, but the editing template may get broken and user won't be able to create a feature).

Before I will go and try all trial versions of the testing software that are out there, maybe someone can say if there is a product (can be either commercial or free, doesn't matter) that is capable of recording and reproducing a user page interaction workflow when having functionality from ArcGIS JS API embedded? If recording/playing is not an option, then at least a piece of software that would create a test case with some manual configuration, but without becoming a JS guru.

Best Answer

You cannot capture selecting a feature template and creating a feature on the map using, for instance, with Selenium IDE. This is because those things don't happen at the client side, and the testing software is not aware of JS API and considers editing templates to be just a group of CSS elements.

Actually, you can test those kinds of interactions. They are initiated on the client-side and (after some requests/responses from the server) have verifiable client-side results (DOM elements that can be queried by CSS selectors). I have done this sort of functional (a.k.a. integration, end to end, or e2e) testing of feature layers using The Intern (once). You are correct in that the WebDriver API is not aware of the Esri JSAPI and unless you use global variables, you will have to query the DOM (such as the number of paths in the SVG element that represents that feature layer) to verify that the feature was added to the map. This type of testing can be cumbersome and brittle. Furthermore, getting Selenium and the browser drivers installed and working has always been a problem for me

For those reasons, I tend to place an emphasis on unit testing instead of functional testing. I use Karma/mocha to unit test application code that uses the Esri JSAPI. My tutorial on how to do this, is a bit out of date, but should be enough to get you started if you're interested in unit testing. I know your question is more about functional tests, but you mention @dbouwman's blog post on automated unit testing being along the lines of what you are looking for. You can find all the resources from last year's DevSummit presentation (including a video of the presentation) here: https://github.com/tomwayson/esri-js-testing-tools-and-patterns

Related Question