How to Mock HTTP Requests in Protractor

This post is part of a ten-part series on how to write better Protractor tests. You can find the rest of the series here.

Last time we talked about how to add Angular Modules to your Protractor tests. One of the main reasons you’d want to add a module during test time is for HTTP mocking.

Of course, if you can avoid it, you want your Protractor app to test against a real server. The idea is that our tests should be truly end-to-end. But of course, the real world is rarely that simple. You can’t always have your robot Protractor monkeys writing and deleting data in production. So what can we do in that case?

We can mock some or all of our HTTP requests.

Here’s how:

What we’re doing here is

  1. using addMockModule to add the httpMocker module to our Angular app
  2. using ngMockE2E to give us the functionality to mock our HTTP requests
  3. using run and injecting $httpBackend
  4. using $httpBackend.whenGET to specify that when this particular URL (http://jsonplaceholder.typicode.com/photos) is fetched using a GET request, we should instead intercept it and respond with an array with this single, specific object.

Pretty neat right?

Pros: We can mock HTTP requests and specifically control for API responses. We don’t have to worry about our tests failing because the API is down or changed.

Cons: Our end-to-end test is not really end-to-end any longer. Maybe the API changed but we wouldn’t know it because we mocked the result. Also, this only intercepts calls made using the $http service. So if you have a library that is using another HTTP library, it won’t be intercepted using this method.

Learn Protractor in a few hours with our online course

Protractor is a one of the best ways to ensure your app is working correctly because you can write code that acts like a real user. But Protractor can also be confusing and difficult to work with when you're just starting out. We've put together an online course that will help you become a master at Protractor.

You'll save tons of time and frustration learning Protractor because we've worked out everything you need to know. Become a Protractor testing master today!

  • http://nicholls.azurewebsites.net/ Juan David Nicholls

    Hi guys!
    Thanks for this post, but in my local tests doesn’t work, check please http://screencast.com/t/YwALt0VB

  • http://www.google.com Murali Mohan

    I just followed what you said but i got the following error.
    Executing: [execute script: angular.resumeBootstrap(arguments[0]);, [[protractorBaseModule_, httpMocker]]])
    21:30:03.880 WARN – Exception thrown
    org.openqa.selenium.WebDriverException: [$injector:modulerr] Failed to instantiate module httpMocker due to:
    [$injector:modulerr] Failed to instantiate module ngMockE2E due to:
    [$injector:nomod] Module ‘ngMockE2E’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.6.2/$injector/nomod?p0=ngMockE2E

    Please help me how do i proceed to fix this issue?