css - 如何在 CSS 回归测试 backstopjs 中检查 Bootstrap 模式

Question

我正在尝试模拟我页面上 CSS 元素的点击，并在每个阶段自动截取窗口的屏幕截图以用于测试目的。我使用 backstopJS 作为 CSS 测试/屏幕截图框架。对于第一个元素，一切似乎都很好。当我单击主标题菜单中的注册链接时，会触发一个模式。但它不会生成模态的任何引用屏幕截图。

请帮助触发下面给定脚本中模态的引用截图

这是脚本:

{
  "viewports": [
    {
      "name": "desktop",
      "width": 1600,
      "height": 900
    },
    {
      "name": "phone",
      "width": 320,
      "height": 480
    },
    {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    },
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "grabConfigs" : [
    {
      "testName":"vawizard"
      ,"url":"http://localhost/vawizard/index.html"
      ,"hideSelectors": [

      ]

      ,"removeSelectors": [
        "header.banner--clone"
      ]
      ,"selectors":[
        "#outer_wrapper header"
        ,".banner_box"
        ,".help_desk"
        ,".big_search_box"
        ,".look_specific"
        ,".smart_tool_box"
        ,"footer"
        ,".copyright_box"
      ]
    }
  ]
}

这是链接 http://wizard.hodgesdigital.com/

知道是什么导致了这种行为吗？

Answer 1

BackstopJS 主要专注于测试不同屏幕尺寸下的布局状态，不支持用户交互测试。

对于您的情况，我可以提出两个建议。 1) 你可以在你的 URL 中添加一个状态，当你的页面加载时触发模式，或者 2) 你可以编写一个自定义的 CasperJS 脚本来测试像这样需要一些用户交互的用例。更多细节如下...

方法一: 在第一种情况下，您可以向您的 URL 添加一个哈希值，这将触发您的模态，根据我的经验，网络应用程序(例如 Angular 和 Ember)通常以这种方式表示模态状态....

// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",


// then as part of a jQuery script
$(document).ready(function(){
  if ( /openModal/.test(location.hash) )
    {
      // Do your open modal action here
      // Then trigger BackstopJS
    }
});

方法二: 如果以上不是您的风格，还有另一个不错的选择。作为 BackstopJS 安装的一部分，您还拥有完整版的 CasperJS——因此我建议您访问 CasperJS.org 查看一些基本示例，看看是否可以编写您自己的脚本。从短期来看，这会花费更多时间，但您现在编写的元素特定样板可能对 future 的边缘情况(用于测试表单、其他交互等)很有用。