javascript - BackstopJS 的高级场景

Question

我正在尝试使用 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 // Move the pointer over the specified DOM element prior to screen shot (available with default onReadyScript)

我是否误解了 hoverSelector 的用法？

Answer 1

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

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

到

    "hoverSelector": ".btn-default",

如果您引用 backstop.json 文件的最新 backstopjs 文档，hoverSelector 不是数组。

https://github.com/garris/BackstopJS