使用PhantomJS进行响应式设计测试 [英] Responsive design testing with PhantomJS

问题描述

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

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

如果有人有这方面的经验我会很有兴趣知道页面对象是否可以通过测试代码以某种方式访问​​，以便我可循环浏览不同的视口宽度并测试各种DOM元素的存在/不存在/尺寸。

感谢您寻找和任何建议。

解决方案

找到解决方案。在测试代​​码中，您可以这样做：

  if（typeof window.callPhantom ==='function'）{
 window.callPhantom（{width：1200}）; 
} 
  

以及测试运行器（run-jasmine.js）代码，你可以做这个：

  page.onCallback = function（data）{
 page.viewportSize = {width：data.width，身高：400}; 
}; 
  

希望这对任何试图使用PhantomJS进行测试的人都有用。找到此此处的文档

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.

解决方案

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

这篇关于使用PhantomJS进行响应式设计测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！