Responsive Design with PhantomJS

Question

I have a javascript application (RequireJS with Backbone) that I am testing with PhantomJS with Jasmine. After a lot of pain, I finally had simple tests. I am using a test runner based on run-jasmine.js found here.

My application reacts to the fact that when you change the width of the viewport, the widths of the various DOM elements will also change. I know that I can set the width of the viewport to "run-jasmine.js" when I create a "page" for testing. What I would like to know is ..... You can somehow go through a series of viewport widths in one set of tests. Using "run-jasmine.js", it seems that the "page" is configured, and then the tests run, and as soon as you run the tests, you do not have access to the test code to set the viewport width to a new value.

If there is someone who has experience with this, I would be interested to know if any “page” object is accessible from the test code so that I can iterate over different widths of the viewport and check for the presence / absence / sizes of various DOM elements.

Thank you for your attention 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 code of the test runner (run-jasmine.js) you can do this:

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

I hope this is useful for anyone trying to get the tests configured with PhantomJS. Found documentation for this here