Protractor End to End Tests Configure on CI/CD TFS/VSTS (Azure Devops) Publish HTML Results

Single Page applications (SPA)are in Trend now, Most of us are switching from older days Java, C# based End to End testing framework to light weight and faster javascript framework.

Protractor is widely used Javascript End to Testing framework which supports Typescript, Javascript Programming languages. Protractor also provides awesome Jasmine/JUnit Reports. When we run it locally its easy to open the results in browser. How about seeing awesome results on CI/CD that’s even more easier. Configure once and forget it. In this article I will guide you configuring protractor and HTML reports.

Step by Step Guide to Configuring protractor Framework on TFS/VSTS (Azure DevOps)

Pre-Requisites

  1. Download and Install Node on VM where TFS agents are running
  2. Download and Install TypeScript

Its Easy!, You are done with Set up!!

Configure CI build to Run End to End Tests

  1. Create a CI build Navigating to Repo , Specify the Name and your Agent queue

2. Add Agent Phase

3. Add Task, Search for Npm and add it to Phase

4. Configure your Npm task Command as install, Working Folder with package.son as <Directory Name> as shown below

5. Add Command Line Task

6. Configure your command line task to Update webdriver

Display Name : Update Webdriver,

Tool: node ,

Arguments : node_modules/protractor/bin/webdriver-manager update

Working Folder: Source/EndToEndTests/EndToEndTests

6. Add one command line task as shown in Step 5, Name it as Run test cases, Fill out below fields

Tool as :node and

Arguments : node_modules/protractor/bin/protractor e2e/protractor.conf.js

Working Folder: Source/EndToEndTests/EndToEndTests

7. Add Powershell Script Task (Simply search for powershell, Task appears Add it)

Display Name : Power Shell Script

Type : Inline Script

Inline Script : (Copy the below lines)

$date=$(Get-Date).ToUniversalTime().ToString(‘d-M-yyyy-HH’);
Write-Host “##vso[task.setvariable variable=time]$date”

Working Folder : Source/EndToEndTests/EndToEndTests/testResults/

8. Now you are ready to publish the reports, Simply Search for Publish Result Task in TFS, Add it

Display Name : Publish Test Results

Test Results Format : Junit

Test results files :xmlresults.xml

Search folder : $(System.DefaultWorkingDirectory)/Source/EndToEndTests/EndToEndTests/testResults/$(time)/

Great! you have configured the Protractor End to End Tests.

Trigger your Build, See the Magic.

Results will be displayed in HTML Format

Click on the Link Publish Results Task

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store