Problems implementing e2e test with AngularJS scenario and redi

Question

I'm starting to write e2e tests in my django app using angular-scenario and i've been blocked since the very begining.

I've opened a way in my app to fake user login so I can start testing the application features but I can't get it to work. This is my test code:

describe("E2E test", function () {

    beforeEach(function () {
        // This actually kills any session in the server
        browser().navigateTo('/backdoor/');
    });

    it('should "fake" login', function () {
        browser().navigateTo('/backdoor/?username=jane.doe');
        ....
    });
});

On the server side, When someone hits '/backdoor/?username=some.valid.user' I validate the user and then perform a redirect to '/messages/', which turns out to be a 302 response to the client.

I can see in my logs that karma is hitting /backdoor/, then /backdoor/?username=jane.doe', and it actually goes through the redirect and hits '/messages':

[20/Jun/2013 11:20:20] "GET /backdoor/ HTTP/1.1" 200 5844
[20/Jun/2013 11:20:20] "GET /backdoor/?username=jane.doe HTTP/1.1" 302 0
[20/Jun/2013 11:20:20] "GET /messages/ HTTP/1.1" 200 35632
[20/Jun/2013 11:20:20] "GET /static/css/bootstrap.min.css HTTP/1.1" 200 103314
..... tons of css and javascript fetching

But, at that point, I get the following error:

Chrome 27.0 (Linux) E2E test should "fake" login FAILED
browser navigate to '/backdoor/?username=jane.doe'
http://localhost:9203/base/spec/e2e/e2e.spec.js?1371726473000:20:13: Sandbox Error: Application document not accessible.
Chrome 27.0 (Linux): Executed 1 of 1 (1 FAILED) (14.336 secs / 13.967 secs)

When debugging in the browser, I even see the /messages view loaded for a fraction of second, and then it just dissapears. I'm getting this error in the console:

Blocked a frame with origin "http://localhost:9203" from accessing a frame with `origin "http://localhost:8000"`. Protocols, domains, and ports must match.

Which I guess is normal behaviour as karma uses an embedded iframe for testing purposes as opposed to webdriver.

This is my configuration file, which is a modified copy of my other midway and unit testing karma conf files that work just fine with jasmine. (I've downloaded the lastest angular-scenario.js file):

basePath = '.';

files = [
     // ANGULAR_SCENARIO,
    'js/libraries/angular-scenario/angular-scenario.js',
     ANGULAR_SCENARIO_ADAPTER,
    'js/libraries/jquery-1.7.2.min.js',
    'js/libraries/angular-unstable/angular.js',
    'helpers/angular-mocks.js',
    'js/libraries/lodash.js',
    'js/libraries/underscore.observable.js',
    'js/libraries/date.js',
    'js/variables.js',
    'js/angular/*.js',
    'spec/e2e/*.js'
];

autoWatch = true;

browsers = ['Chrome'];

singleRun = false;

colors = true;

logLevel = LOG_INFO;

port = 9203;
runnerPort = 9303;
captureTimeout = 5000;

proxies = {
  '/': 'http://localhost:8000/'
};

urlRoot = 'e2e';

I must be missing something trivial as this is such a basic thing to be tested, but I've been researching the whole day and I've been unable to find a solution.

Any help with this issue will be highly appreciated!

score 1 · Answer 1 · answered Jul 07 '13 at 20:02

I am also a beginner in this subject, but I have been suffering with a similar problem for a while here and I just found a solution. I hope it is the same problem as yours.

From whatever information I could get a hold of, it seems that the karma web server exists for proxying all the requests to your web server. This way, your tests are able to access the "frame" since the karma web server is running on the same domain as the tests.

So, your tests request whatever url with browser().navigateTo('/whatever/'); that request is received by the karma web server (i.e. localhost:9876), which proxies this request to the actual web server running your web app (i.e. localhost:8000). I have no idea what happens under the hood, but somehow your test code can work with the frame. Also, with the karma web server running, if you enter manually in the browser http://localhost:9876/whatever you can access the url like if you were accessing http://localhost:8000/whatever

All of this proxying seemed to work with my static examples, however, when I started using a django backend I started to get the same error as you are getting. Whenever I accessed http://localhost:9876/whatever directly in the browser I could view the URL normally, but for some reason the karma tests could not access the frame.

After pulling my hair a lot, I found out that what was actually happening, was that my http://localhost:9876/whatever url automatically redirected to http://localhost:8000/whatever/ (I still have no idea why) and with that redirection, the tests were trying then to access a frame from another domain. Just by appending a trailing '/' to the url I stopped this redirection and my tests were able to access the frame.

In your case, try to access manually in the browser all the urls (from the karma web server) while your karma web server is on and check if you are always accessing the urls through the karma web server and not through your web app web server (the address should always point to localhost:9876 and NOT localhost:8000). It seems to me that with these redirections, your tests are starting to access your web app directly.

I hope someone can clarify a bit more on how this proxying works and why the redirection escapes from it.

I also encountered that attacking url's without a trailing slash caused a redirect that karma follows but angular scenario doesn't render in its iframe. Changing all my url's to end with a '/' just bypasses the redirect problem, it does not fix it. By the way, the reason why you get redirected is django default behaviour, take a look at this: https://docs.djangoproject.com/en/dev/ref/settings/#append-slash — olmaygti, Jul 18 '13 at 10:34

Problems implementing e2e test with AngularJS scenario and redi

1 Answers1