Test automation with Selenium
Recently, I've been looking into test automation and bumped into the Selenium IDE extensions for Chrome and Firefox. And I have to say: I never figured it was that easy.
Since then, I've been playing around with it and am looking for limitations. Because if it looks too good to be true, it usually is. Let's check that out.
After downloading the extension for Chrome or Firefox, you can fire up the IDE by clicking on the extension icon. This will open the IDE in a separate window and it will ask you if you want to create a new project or open an existing one. It also refers you to the Selenium IDE project page for more info.
Open a new project and give it an appropriate name. Now, we're presented with a blank slate.
On the left-hand side, you have an overview of all the tests in your project. There should be one named Untitled. On the right, you have an overview of all the commands for that test. And at the bottom, there is a log section which will display the test results.
To summarize the data model of the Selenium IDE:
- Every project consists of one or more tests.
- Every test consists of one or more commands.
- Every command can have a target and/or a value.
An example: Testing Hackernoon's newsletter sign-up
We'll start off with an example using Google Chrome. In the input field "Playback base URL" we'll put https://hackernoon.com/tagged/coding. If you head over to their site, you'll see they have a Subscribe button in their navigation which leads to the newsletter subscription form on the homepage via an anchor. The form looks like this:
And the HTML that goes along with it:
<form action="https://hackernoon.us19.list-manage.com/subscribe/post?u=b48b0ec2173fecf2586c00e80&id=fa796741e6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div class="subscribe-header">
<h2>Hackernoon Newsletter curates great stories by real tech professionals</h2>
<p>Get solid gold sent to your inbox. Every week!</p>
</div>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address *" aria-required="true">
</div>
<div class="fields-group">
<div class="mc-field-group">
<input type="text" value="" name="MMERGE1" class="" id="mce-MMERGE1" placeholder="First Name">
</div>
<div class="mc-field-group">
<input type="text" value="" name="MMERGE2" class="" id="mce-MMERGE2" placeholder="Last Name">
</div>
</div>
<div class="mc-field-group input-group topics-list">
<strong>Topics of interest </strong>
<ul>
<li class="checkbox">
<input checked="" type="checkbox" value="1" name="group[3757][1]" id="mce-group[3757]-3757-0">
<label for="mce-group[3757]-3757-0">Software Development</label>
</li>
<li class="checkbox">
<input checked="" type="checkbox" value="2" name="group[3757][2]" id="mce-group[3757]-3757-1">
<label for="mce-group[3757]-3757-1">Blockchain Crypto</label>
</li>
<li class="checkbox">
<input checked="" type="checkbox" value="4" name="group[3757][4]" id="mce-group[3757]-3757-2">
<label for="mce-group[3757]-3757-2">General Tech</label>
</li>
<li class="checkbox">
<input checked="" type="checkbox" value="8" name="group[3757][8]" id="mce-group[3757]-3757-3">
<label for="mce-group[3757]-3757-3">Best of Hacker Noon</label>
</li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_b48b0ec2173fecf2586c00e80_fa796741e6" tabindex="-1" value="">
</div>
<div class="submit-btn">
<input type="submit" value="Get great stories by email" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
So what do we need to test to assure that the form works?
- Open a page on Hackernoon e.g. https://hackernoon.com/tagged/coding
- Click Subscribe
- Fill in a valid e-mail address, first name and last name
- Click Get great stories by email.
- Leave the checkboxes untouched (for this example).
- Assert that the div with id mce-success-response is not empty.
This is what we'll usually refer to as the happy flow, although Wikipedia seems to prefer happy path. No fuss, the user goes straight through without any issues.
Now, there are two ways to handle this:
- Click on Start recording in Selenium IDE. Google Chrome will automatically open a new window and you can record the steps outlined above. When you've clicked on Get great stories by email, you can switch back to the Selenium IDE and click on Stop recording. If you haven't already done so, you will be prompted to enter a name for your test.
- Type in all the commands by yourself. This will take some more time but it's a good way to actually understand what's happening and how to transform that into code which Selenium can understand. We'll skip that for now.
The commands will look like this:
The only thing left for this example is to add our assertion to this commands list:
- Command: assert not text
- Target: id=mce-success-response
- Value: ""
And to add a final command close to close the browser at the end of the test.
We end up with this as a final commands list for the first test:
Run the test using CTRL + R or by clicking on the icon. You should see a detailed log at the bottom of the IDE and lots of green!
You can switch back to the test editor by clicking on the dropdown in the top left displaying Executing.
There's also a section Test Suites in there which we're not going to cover. Basically, that's a collection of tests that you can run in parallel or you could also persist sessions (which can avoid having to log in per test for example).
And that concludes our happy flow. I'll leave it up to you to figure out how to test the unhappy flow e.g. a user enters an invalid e-mail address. In that case we'd expect the form to return an error message.
Happy testing!