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
- Download and Install Node on VM where TFS agents are running
- Download and Install TypeScript
Its Easy!, You are done with Set up!!
Configure CI build to Run End to End Tests
- 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
