diff -u b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
--- b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
@@ -121,17 +121,16 @@
    * window size. This overlay adds a indication of what is really visible for
    * the end user.
    *
-   * Important: Visibility tests, like the
-   * \Behat\Mink\Element\NodeElement::isVisible() method, on nodes will fail for
-   * elements below the overlay. So, it is advisable to remove the overlay after
-   * for example taking a screenshot.
-   *
    * @param string $border_color
-   *   The color of the overlay border, accepts any CSS color value.
-   * @param string $background_color
-   *   The color of the overlay background, accepts any CSS color value.
+   *   The color of the overlay border, accepts any CSS color value. Defaults to
+   *   a blue border (and label).
+   * @param string $background
+   *   The overlay background, accepts any CSS background value.
+   *   Defaults to a transparent blue background.
+   * @param bool $label
+   *   Determines if a label with the viewport size is shown. Default to TRUE.
    */
-  protected function addViewportOverlay($border_color = 'red', $background_color = 'rgba(255, 0, 0, 0.1)') {
+  protected function addViewportOverlay($border_color = 'blue', $background = 'rgba(0, 0, 255, 0.05)', $label = TRUE) {
     // Build the Javascript that creates a new, or moves an existing, overlay
     // DOM element. Viewport size and scroll offset are taken into account.
     $draw_viewport_javascript = <<<JS
@@ -143,20 +142,24 @@
         sy = w.scrollY,
         lx = (w.innerWidth || e.clientWidth),
         ly = (w.innerHeight || e.clientHeight),
-        c = 'display: block; position: absolute; border: 1px solid $border_color; box-sizing: border-box; background-color: $background_color';
-    
+        c = 'display: block; position: absolute; border: 1px solid $border_color; box-sizing: border-box; background: $background;';
+
         var v = d.getElementById('phantomjs-viewport');
         if (v == null) {
           v = d.createElement('div');
           v.id = 'phantomjs-viewport';
+          d.body.appendChild(v);
         }
+        
+        if ($label) {
+          v.innerHTML = '<div style="position: absolute; right: 0; padding: 5px; color:white; background: $border_color;">viewport: ' + lx + 'x' + ly + 'px</div>';
+        }
+
         v.style.cssText = c;
         v.style.width = lx + 'px';
         v.style.height = ly + 'px';
         v.style.top = sy + 'px';
         v.style.left = sx + 'px';
-    
-        d.body.appendChild(v);
       }());
 JS;