Are you making end-to-end testing in your applications? Then you should. It’s possible to automate the testing process in a web application and forget about testing manually in every deployment you do, in case of someone has ‘broken’ something.
The end-to-end tests works for testing if the execution of the application is correct from the beginning to the end in a real environment, also with access to databases.
In this case we’re going to explain how to make end-to-end testing with Angularjs. Google provides the node.js protractor tool, a wrapper or selenium webdriver wrapping element, which gives us an API to access and manipulate the browser. Protractor provides some extra features beyond selenium to help us in Angular.js. Also, it launches tests written in javascript.
To ‘launch’ these tests, protractor allows us to use several frameworks (jasmine, mocha or cucumber) that provide syntax, scaffolding and reporting tools.
We’re going to explain how e2e tests work with protractor + cucumber.
Cucumber uses the Guerkin syntax, which allows describing how the software works without details about how the behavior is implemented. Let’s get to the point with an example:
This would be our file: users_management.feature
Feature: Users management
As administrator
I want to be able to create, edit, update and eliminate users
So that they can log in to the system
[java] Scenario: Create userGiven: I am an anonymous user
When: I browse to "/"
Then: I should be redirected to "/login"
When: I enter the text admin@test.com in the field "email"
And: I enter the text "password" in the field "password"
And: I click on the "Access" button
Then: I should be redirected to “/users”
When: I click on the “Create user” button
Then: I should be redirected to “/users/new”
When: I enter the text “user1” in the field “name”
And: I enter the text “user1” in the field “name”
And: I enter the text user1@gmail.com in the field “email”
And: I click on the “Save” button
Then: A modal window with the text “Saved successfully” should show up
[/java]
This could be a real example, where we can create tests based on a set of rules (steps) defined by us, since we use a natural language. The steps definition corresponding to our file step_definitions.js would be:
[java] // GIVENThis.Given (/^I am an anonymous user$/, clearCookies);
//WHEN
this.When (/^I browse to "([^"]*)"$/, browseToAngularUrl);
this.When (/^I enter the text "([^"]*)" in the field "([^"]*)
this.When (/^I click on "([^"]*)"$/, clickButton);
//THEN
this.Then (/^I should be redirected to "([^"]*)"$/, redirectedToUrl);
this.Then (/^A modal window with the text "([^"]*)" should show up$/, modalMsgShouldShow);
<p style="text-align: justify;">Where clearCookies, browseToAngularUrl, inputText, clickButton, redirectedToUrl and modalMsgShouldShow are javascript functions. Therefore the functions would be defined as follows, in the same step_definitions.js (or another file) so that our steps definition or dictionary would be more clear.</p>
function clearCookies() {
browser.manage().deleteAllCookies();
}
function browseToAngularUrl(url) {
browser.get(‘/#’ + url);
}
function inputText(inputTextEntry, inputName) {
return element(by.css(‘[name="’ + inputName + ‘"]’)).sendKeys(inputTextEntry);
}
function clickButton(buttonText) {
// buttonText would be our own function to search
var button = element(byButtonText(buttonText));
return button.click();
}
function redirectUrlContains(location) {
browser.getCurrentUrl().then(function (url) {
chai.expect(url).to.contain(location);
// where chai is a library that allows us
// to check the veracity of an expression
});
}
function modalMsgShouldShow(text) {
browser.waitForAngular().then(function(){
expect(element(by.css(‘modal’)).getText()).to.eventually.equal(text);
});
}
[/java]
As you see, protractor provides us an API to access the ‘browser’ or search an element with ‘element’ among other things. Once we have completed all the steps, anyone will be able to use them to make new tests.
To launch them, we just need to create a task in gulp or grunt, or call protractor directly, so that it can open the browser and follow all the steps automatically defined.
If everything’s OK, we’ll see on screen all the steps in green. In upcoming posts, we’ll explain how to configure protractor.
Conclusions
- Cucumber provides us a natural language syntax, so anyone can make new tests.
- Once we’ve defined our group of steps, we can use them in any of our projects if we code HTML in a similar way.
- It allows us to use development methodologies based on behavior or BDD (behavior-driven development).
- It allows us to launch our tests in a Continuous Integration environment, so if the test is not passed, we can cancel the deployment.
- We can create reports with the test results to deliver them to the client.
Leave a Reply