BackstopJS的高级方案

时间:2018-02-28 14:44:48

标签: javascript css

我正在试验BackstopJS,我无法弄清楚如何测试悬停元素。

backstop.json

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "chromy/onBefore.js",
  "onReadyScript": "chromy/onReady.js",
  "scenarios": [
    {
      "label": "My Local Test",
      "url": "../../index.html",
      "hideSelectors": [],
      "removeSelectors": [
      ],
      "selectors": [
        "nav",
        ".jumbotron",
        "body .col-md-4:nth-of-type(1)",
        "body .col-md-4:nth-of-type(2)",
        "body .col-md-4:nth-of-type(3)",
        "footer",
        ".btn-default"
      ],
      "hoverSelector": [
        ".btn-default"
      ],
      "readyEvent": null,
      "delay": 0,
      "onReadyScript": null,
      "onBeforeScript": null
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "chrome",
  "engineFlags": [],
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

btn-default是悬停在其上的按钮元素。目前我只从普通的btn-default按钮获得参考。 hoverSelector没有做任何事情。

文档说:

  

hoverSelector //在屏幕截图之前将指针移到指定的DOM元素上(默认使用onReadyScript)

我误解了hoverSelector的使用吗?

1 个答案:

答案 0 :(得分:0)

在我的backstop.json中,hoverSelector不是数组 试着改变

    "hoverSelector": [
    ".btn-default"
  ],

    "hoverSelector": ".btn-default",

如果您参考backstop.json文件的最新backstopjs文档,则hoverSelector不是数组。

https://github.com/garris/BackstopJS