phantomjs, protractjs and .NET

Question

I have a page that is rendered using .NET and contains c# .net code. I am testing this with protractorjs using the phantomjs GhostDriver. However, I seem to be having an issue when the page loads.

If I run this test

it('should redirect to login', function () {
    targetUrl = 'http://localhost:52254/';
    ptor = protractor.getInstance();
    ptor.ignoreSychronization = true;
    ptor.get(targetUrl);
    ptor.wait(function () {
        return ptor.driver.getCurrentUrl().then(function (url) {
            return targetUrl = url;
        }, 2000, 'It\'s taking to long to load ' + targetUrl + '!');
    });
    expect(ptor.driver.getCurrentUrl()).toBe('http://localhost:52254/');
}, 5000);

all is fine and I am where I expect to be

but if I run the test below which is identical apart from I am searching for an element on the page

it('should redirect to login', function () {
    targetUrl = 'http://localhost:52254/';
    ptor = protractor.getInstance();
    ptor.ignoreSychronization = true;
    ptor.get(targetUrl);
    ptor.wait(function () {
        return ptor.driver.getCurrentUrl().then(function (url) {
            return targetUrl = url;
        }, 2000, 'It\'s taking to long to load ' + targetUrl + '!');
    });

    ptor.driver.findElement(by.id('headerLoginBtn')).click().then(function () {
        expect(ptor.driver.getCurrentUrl()).toBe('http://localhost:52254/Account/Login');
    });
}, 5000);

I get the exception shown below

UnknownError: Error Message => 'Element is not currently visible and may not be manipulated'    

The test runs fine when run with chrome driver but in phantomjs it fails. Am I missing something here or is this ia limitation on phantomjs that it will not run against front end .NET code.

Answer 1

Sometimes tests in phantomjs fail because the phantomjs window (that you can't see) is to small and protractor (selenium) only 'sees' elements that are visible (without having to scroll) on the page. So when phantomjs starts a relative small window, some content and the elements you want to use do not fit in the visible part.

In the post https://github.com/angular/protractor/issues/585 a solution is described to set a screenresolution. With it you can set a screenresolution for the browser(s) that protractor starts. I noticed phantomjs usually needs a bit more space than firefox and chrome do.

Also with protractor-html-screenshot-reporter you can take screenshots of the screen at the moment that a test fails so you can see if the element is visible yourself. This is specially helpfull with phantomjs because you can't stop protractor with debug and see what the problem is.

Answer 2

I agree with @Andre Paap.

I had same issue in phantom with python unit testing.

I solved by adding following line.

self.driver.set_window_size(1120, 550)