Httpbackend not working with Protractor v5.0+

[rfodge]

• Node Version: 6.9.0
• Protractor Version: 5.1.1
• Browser(s): Chrome
• Breaking Change

I have my protractor tests set up to use http-backend-proxy which uses httpbackend, and everything works fine with protractor version 4.0.14, but in version 5.0+ they fail with an InvalidElementState error.

• InvalidElementStateError: invalid element state: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
  (Session info: chrome=57.0.2987.133)
  (Driver info: chromedriver=2.29.461585 (0be2cd95f834e9ee7c46bcc7cf405b483f5ae83b),platform=Mac OS X 10.11.4 x86_64) (WARNING: The server did not provide any stacktrace information)
  Command duration or timeout: 13 milliseconds
  Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
  System info: host: '...'..., ip: '......', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.11.4', java.version: '1.8.0_73'
  Driver info: org.openqa.selenium.chrome.ChromeDriver
  Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.29.461585 (0be2cd95f834e9ee7c46bcc7cf405b483f5ae83b), userDataDir=/var/folders/sz/n9py2wkd6zdg7nl5_phn7r497yn6vr/T/.org.chromium.Chromium.Wk2KMZ}, takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=57.0.2987.133, platform=MAC, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
  Session ID: 0a8f87dee00b4e60542806e0aa4e417e

Code that now fails:

httpBackend = new HttpBackend( browser );

httpBackend
.when('GET', this.URL + 'user/self')
.respond( function() {
       return [200, $httpBackend.context.userSelf];
});

I tried updating it to the following, just to see if that would help at all, but it still fails with the same error:

httpBackend
                .whenGET(this.URL + 'user/self')
                .respond( function() {
                    return [200, {}];
                });

Any advice would be greatly appreciated!! Thanks!

[NickTomlin]

I'm not super familiar with HTTPBackend but it isn't something we officially support. I'd suggest bringing this up on the HTTPBackend repo or on StackOverflow.

Good luck!

[rfodge]

hm, ok thanks!
FYI: https://docs.angularjs.org/api/ngMock/service/$httpBackend

[NickTomlin]

My apologies I mean to say http-backend-proxy, not HTTPBackend :)

[heathkit]

This error: InvalidElementStateError: invalid element state: Failed to execute 'querySelector' on 'Document': The provided selector is empty is what you get if you call document.querySelector() with an empty string.

There is a bug where appRoot can be the empty string in some cases, but after looking through clientsidescripts.js, I don't see a case where that would make it to a document.querySelector() call.

Could you provide an example repro case? Also, a few questions:

• What version of Angular is your app?
• Are you using by.cssContainingText?
• Do you set rootElement in your config? If you set it to 'body', does the problem go away?

[rfodge]

Apologizes for the delay. I didn't see a notification that you responded. Thank you for looking into this.

• Our Application is Angular version 1.5.3.
• I do not currently use .cssContainingText in any of my tests.
• I do not currently set rootElement in my config file.

I will send you more example information and try setting the body of root element today and get back to you!

[rfodge]

Adding rootElement: 'body' to my config file does fix the issue!

To try to simplify the code to show you for repo, I put everything in the onPrepare here:

Do you have a simple angular site that I could point to? I can't provide my app code for repo, but if you have an angular site that I could point to and set up to reproduce, I will do that.

Thanks again!!

[heathkit]

I like to just use angularjs.org. That's what I did for the BlockingProxy demo.

Also, protractor has a test app in the repo. If you clone the repo and run npm start it'll bring up an app you can use for testing.

[rfodge]

Hi!,
I have a working repo to demonstrate the issue for you: https://github.com/rfodge/protractor4249