Better explain screenshot div

The fact that we use an overlay div is sort of a hack, and needed to be
explained better.

Also used a shared constant for the element id, to prevent drift.

src/Constants.js

@@ -0,0 +1,3 @@
+module.exports = {
+  SCREENSHOT_BOX_ID: 'happo-screenshot-box',
+};

src/HappoRunner.js

@@ -1,3 +1,4 @@
+import { SCREENSHOT_BOX_ID } from './Constants';
 import getFullRect from './getFullRect';
 import waitForImagesToRender from './waitForImagesToRender';
 
@@ -170,14 +171,16 @@ window.happo = {
             width,
           } = getFullRect(rootNodes);
 
-          const overlay = document.createElement('div');
-          overlay.style.position = 'absolute';
-          overlay.style.left = `${left}px`;
-          overlay.style.top = `${top}px`;
-          overlay.style.width = `${width}px`;
-          overlay.style.height = `${height}px`;
-          overlay.setAttribute('id', 'happo-screenshot-overlay');
-          document.body.appendChild(overlay);
+          // We place an (invisible) box on top of the visible rectangle. We
+          // then use it as the screenshot target.
+          const screenshotBox = document.createElement('div');
+          screenshotBox.style.position = 'absolute';
+          screenshotBox.style.left = `${left}px`;
+          screenshotBox.style.top = `${top}px`;
+          screenshotBox.style.width = `${width}px`;
+          screenshotBox.style.height = `${height}px`;
+          screenshotBox.setAttribute('id', SCREENSHOT_BOX_ID);
+          document.body.appendChild(screenshotBox);
 
           resolve({
             description: currentExample.description,

src/server/runVisualDiffs.js

@@ -4,6 +4,7 @@ const path = require('path');
 const { By } = require('selenium-webdriver');
 const mkdirp = require('mkdirp');
 
+const { SCREENSHOT_BOX_ID } = require('../Constants');
 const { config } = require('./config');
 const constructUrl = require('./constructUrl');
 const pathToSnapshot = require('./pathToSnapshot');
@@ -88,7 +89,7 @@ function getImageFromStream(stream) {
 
 function takeCroppedScreenshot({ driver }) {
   return new Promise((resolve, reject) => {
-    driver.findElement(By.id('happo-screenshot-overlay')).then((overlay) => {
+    driver.findElement(By.id(SCREENSHOT_BOX_ID)).then((overlay) => {
       overlay.takeScreenshot().then((screenshot) => {
         // This is deprecated in Node 6. We will eventually need to change
         // this to: