If you are a Developer or Software Tester trying to flex your muscles to implement E2E automation testing for your angular application you have come to the right place
Protractor is an end-to-end test framework for Angular applications.Protractor run the test as a mock user using your application in a real browser.
Use npm to install Protractor globally with:
npm install -g protractor
To make sure protractor is installed correctly use protractor --version.
The webdriver-manager is a good tool to get an instance of a Selenium Server running easily.
Now start up a server with:
This will start the Selenium Server running .
Writing the first Test Suite
You should have an angular app running. If you have an angular app you can continue with it or you can easily generate one using AngularCLI
ng new my-new-pro
All we need to be concerned about is this folder, e2e
Let’s write a basic test case. Here’s is a sample code. I have obtained this code by editing the default angular cli code. The edited portion is highlighted in blue.
The first line import another AppPage class from our own file app.po residing in the same directory. App.po is a Page Object.Page Object Model is a highly recommended design pattern used when writing E2E automation.It will help you in test Maintenance , avoid duplication of code and readability. It help you write readable tests by encapsulating information about the elements on your page.For example in the code below app.po.ts we have declared a element
tourOfHeroLink which represent a
h2 element in the DOM .when ever we need the element in a test case we can use this instead of repeatedly calling the selector.We will talk more about selectors later. A Page Object can be reused across multiple tests and you only need to update the Page Object if there is change in the template of the page.
it syntax is from the Jasmine framework. The things inside a describe function is called as a suite by Jasmine.
describe function is for grouping related specs, typically each test file has one at the top level. The string parameter is for naming the collection of specs and will be concatenated with specs to make a spec's full name. This aids in finding specs in a large suite. If you name them well, your specs read as full sentences in traditional BDDstyle.
Specs are defined by calling the global Jasmine function
it, which, like
describe takes a string and a function. The string is the title of the spec and the function is the spec or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec.
Expectations are built with the function
expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.
Each matcher implements a boolean comparison between the actual value and the expected value. It is responsible for reporting to Jasmine if the expectation is true or false. Jasmine will then pass or fail the spec
When writing E2E tests our major tasks are finding DOM elements ,interacting with them,and getting information about the current state of your application.
Protractor help a lot in this.Here we uses the globals
by, which are created by Protractor. The
element function is used for finding HTML elements on your web page. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use
sendKeysto type into
click to click a button, and
getText to return the content of an element.
element takes one parameter, a Locator, which describes how to find the element. The
by object creates Locators. There are many locator functions provided by protractor which you can refer in protractor documentation .Now we can discuss some of them
by.css('h2')Locates elements using a CSS selector.
by.id('button')to find the element with the given id. This finds
by.buttonText('Save'). This finds the button with text 'Save'
Running The Test
Now, let's run our test suite using ng e2e
The test passes successfully.
You can refer our next blog for advanced techniques like taking a screenshot, spec reporting, and other useful techniques and best practices