Protractor is an end-to-end test framework for AngularJS. The official version is built on Node.js and Selenium WebDriverJS. Protractor.NET, a .NET port of Protractor built on top of Selenium WebDriver for .NET. It allows us to write Angular UI tests using .NET testing frameworks such as NUnit, MSTest or XUnit. This post is about writing End to End tests for angular app with XUnit and Protractor.Net. Unlike WebDriver, Protractor understands Angular digest cycle and blocks until the digest cycle has finished, which helps us to write better test code. As I want to test my ASP.NET Core application, I choose XUnit, instead of NUnit or MS Test. Here is my project.json. Protractor is not available for DNX Core, so I had to remove that reference.
And here is my test code, for this post, I am using the angular js application which is used in the Protractor tutorial, which is available here. It is simple calculator application. Unlike MS Test or NUnit, XUnit doesn’t have Setup or Teardown attributes, instead XUnit is using constructor and Dispose method. (You need to implement the IDisposable interface). Here is the constructor method, where I am launching the web browser (creating the instance of Chrome Web Driver) and execute code against it. And in Dispose method I am closing the browser instance. To execute this you need ChromeDriver.exe, which is available here.
And XUnit uses Fact attribute to identify the tests. Here the tests, I rewrote the tests from Protractor tutorial. And I have added one more, which changes the operator and execute that operation. The Display name parameter used to make the test names more readable.
_browser.Url = Url; navigates to the calculator page and waits until Angular is loaded. The NgBy and By classes are helps to identify the controls in the web page. You can write a wrapper class and encapsulate the common functionalities in every test method.
Here is the Result of XUnit running with Protractor.