title: Advanced scenarios with BackstopJS
body: <p>I'm experimenting with BackstopJS and I'm having trouble figuring out how to get a test for an hover element. </p>
  
  <p>backstop.json</p>
  
  <pre><code>{
    "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
  }
  </code></pre>
  
  <p>The <code>btn-default</code> is the button element that has a hover on it. Currently I only get a reference from the normal <code>btn-default</code> button. The <code>hoverSelector</code> doesn't seen to do anything. </p>
  
  <p>The docs say:</p>
  
  <blockquote>
    <p>hoverSelector // Move the pointer over the specified DOM element prior to screen shot (available with default onReadyScript)</p>
  </blockquote>
  
  <p>Am I misunderstanding the use of <code>hoverSelector</code>? </p>