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

Question

我有一个 javascript 应用程序(RequireJS with Backbone)，我正在使用 PhantomJS 和 Jasmine 对其进行测试。在经历了很多痛苦之后，我终于可以运行简单的测试了。我正在使用基于此处找到的测试运行器 run-jasmine.js .

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

如果有人有这方面的经验，我很想知道“页面”对象是否可以通过某种方式从测试代码访问，以便我可以循环浏览不同的视口(viewport)宽度并测试是否存在/缺少/各种 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 设置测试的人都有用。找到了这个 here 的文档