使用PhantomJS进行响应式设计测试

Question

我有一个javascript应用程序(RequireJS with Backbone),我正在使用PhantomJS和Jasmine进行测试.经过多次痛苦,我终于进行了简单的测试.我正在使用基于run-jasmine.js中的测试运行器.

我的应用程序响应的是,随着视口宽度的变化,各种DOM元素的宽度也会发生变化.我知道当我创建用于测试的"页面"时,我可以在'run-jasmine.js'中设置视口宽度.我想知道的是.....你能以某种方式在一个测试套件中循环一系列视口宽度.使用'run-jasmine.js'似乎设置了'page',然后运行测试,一旦运行测试,您就无法从测试代码访问以将视口宽度设置为新值.

如果有任何人有这样做的经验,我会有兴趣知道"页面"对象是否可以从测试代码以某种方式访问​​,以便我可以循环通过不同的视口宽度并测试是否存在/缺席/各种DOM元素的维度.

感谢您的关注和任何建议.

Answer 1

找到了解决方案.在测试代​​码中,您可以这样做:

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

在测试运行器(run-jasmine.js)代码中,您可以这样做:

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

希望这对尝试使用PhantomJS进行测试的任何人都有用.在这里找到了这个文档