How to Cheat on Your Site Functionality Tests
All web developers understand the tedium and frustration of repeatedly performing the same tasks over and over to test the functionality of their site. Going through a long checkout process several times on an e commerce site, for example, can be rather time consuming. Fortunately, there is a handy tool called Selenium that you can use to automate these tasks, saving you a great deal of time.
Selenium has a few components you can use, including drivers that you can be written in several different languages, such as Java, C#, Ruby and Python. The subject of this post, however, is Selenium IDE, which is a plug-in for Firefox which basically writes your tests for you as you perform actions on your site. In other words, it automatically sets up automated tests for you to run on your website — So easy!
Here's an overview of how to use it: Go to http://www.seleniumhq.org/download/, download and install Selenium IDE (For Firefox). When you bring it up, there's a little record button on the UI. Hit this button, and as you do things in your browser, it keeps track of every action you make. You can later load a test, click the "play" button, and it will go through the all of the actions that have been recorded.
As an example, suppose you want to check some sort of fancy functionality that occurs after credit card validation on an ecommerce site. You have your test set up already, so you go to your site and hit play. Selenium IDE then takes over, doing exactly what you did when you first went through the checkout — adding products to the cart, going to the view-cart page, filling out your name address, etc.. It then clicks a little radio button to use your credit card and proceeds to fill out the credit card number field which has unfortunately not loaded because the Ajax request that loads that particular field has not been completed. Selenium IDE fills out the rest of the fields and attempts to go to the next stage of the checkout, but fails because the blank credit card field did not pass validation.
So that didn't quite work out. Unfortunately Selenium has a bit of difficulty when it comes to Ajax requests. The problem is that Selenium has no way of knowing which elements have Ajax requests on them, or what those Ajax requests do. So if you need to click on an element that is created by an Ajax request immediately after clicking an element with that Ajax request, Selenium will (usually) try to perform the action on the new element before it has been rendered. In these cases, it will just move on as if nothing had gone wrong.
Of course, you could try to be strategic in the way you go through your page — clicking on the ones that have Ajax requests first and allowing the elements to load while Selenium IDE works on the elements that don't have Ajax requests — but this isn't entirely reliable, as you may not have enough elements for Selenium to get through before it tries to access the new element that isn't there. Fortunately, there's still a fairly easy way to fix this.
Selenium tests are basically written as HTML tables, with each command as a table row and the details of the command as table data. You can see these commands either by opening up your saved test case in a text editor or IDE, or by viewing it in Selenium IDE itself by clicking on the "Source" tab. You can even watch Selenium IDE write these commands in real-time as you perform different actions on the site.
Here's an example command:
The first <td> tag is the action, the second is the element it is being performed on and the third is the value used in that action (if necessary). This command basically says TYPE the value "Drew" into the element "id-edit-submitted-name". In order to fix the problem with Ajax you will have to manually add a command to wait for the element loaded by Ajax. The command for this is "waitForElementPresent".
This will have Selenium IDE wait until the element with the name "panes[billing][billing_zone]" is on the page. One last fun little thing — if your form elements are being generated by your system, you will need to be aware of whether or not they have the same ID each time they're loaded. If not, you'll have to select the element by its name, or some other attribute that you know will be the same every time the element is loaded.
Once you have your test case working, you can save it as an html file to be loaded later. But you don’t have to load a single test case — you can create what is called a test suite, which is essentially just a collection of test cases. When you load a test suite, you have the option of playing an individual test or playing all test cases in the suite. You can also save an entire test suite that you have in your IDE, which saves each individual case as an html file. You can also create a test suite file that basically references a bunch of test cases. When you load this file, it will automatically load all test cases referenced by the test suite.
Here’s a very basic test suite that loads a single test case:
<table id="suiteTable" cellpadding="1" cellspacing="1" border="1' class="selenium">
The first td tag is the name of the test suite with each td after it being the path to an individual test case. Loading this file will load all test cases found in those paths. Once you have a test suite open, you can load even more test cases if you want, as well as play all test cases loaded, or an individual test case.
If you are gearing up to launch an e commerce site and don’t want to do all your cart testing one by one, Selenium IDE is a pretty handy tool. If you are looking for someone that can do all this for you, well you found us!
If you have no idea what you just read BUT you’re looking for help with Software Development then contact us!