Responsive design testing with PhantomJS

Question

I have a javascript application (RequireJS with Backbone ) which I am testing using PhantomJS with Jasmine. After much pain I finally have simple tests running. I am using a test runner based on the one found here run-jasmine.js.

My application is responsive in that as the viewport width changes, the widths of various DOM elements will also change. I am aware that I can set the viewport width in 'run-jasmine.js' when I create the 'page' for testing. What I would like to know is.....Are you able to somehow loop through a series of viewport widths in a single test suite. Using 'run-jasmine.js' it seems that the 'page' is set up and then the tests are run and once you are running the tests you have no access from the test code to set the viewport width to a new value.

If there is anyone out there who has experience of doing this I would be interested to know if the 'page' object is in some way accessible from the test code so that I can cycle through different viewport widths and test for the presence / absence / dimensions of various DOM elements.

Thanks for looking and any advice.

Answer 1

Found a solution. In the test code you can do this:

if (typeof window.callPhantom === 'function') {
    window.callPhantom({ width: 1200 });
}

and in the test runner (run-jasmine.js) code you can do this:

page.onCallback = function(data) {
    page.viewportSize = {width: data.width, height: 400};
};

Hope this is of some use to anyone trying to get tests set up with PhantomJS. Found the documentation for this here