Show all screenshots for a run in a tab (#3045)

* Support multiple screenshots * new browsertime
2020-06-18 16:15:37 +02:00 · 2020-06-18 16:15:37 +02:00 · e732567361
parent c7ff852ca7
commit e732567361
7 changed files with 150 additions and 11 deletions
--- a/lib/plugins/browsertime/index.js
+++ b/lib/plugins/browsertime/index.js
@ -300,6 +300,8 @@ module.exports = {

            run.errors = result[resultIndex].errors[runIndex];

+            run.screenshots = result[resultIndex].files.screenshot[runIndex];
+
            // calculate errors
            for (let error of result[resultIndex].errors) {
              errorStats.push(error.length);
--- a/lib/plugins/html/templates/url/iteration/index.pug
+++ b/lib/plugins/html/templates/url/iteration/index.pug
@ -162,7 +162,7 @@ block content
              a(href=screenshotName)
                img.screenshot(src=screenshotName, alt='Screenshot')
            else if hasScreenShots
-              - screenshotName = 'data/screenshots/' + iteration + '.' + screenShotType
+              - screenshotName = 'data/screenshots/' + iteration + '/afterPageCompleteCheck.' + screenShotType
              - const width = options.mobile ? 150 : '100%';
              a(href=screenshotName)
                img.screenshot(src=screenshotName, width=width, alt='Screenshot')
@ -201,6 +201,10 @@ block content
      section#thirdparty-panel
        include ../thirdparty/index.pug

+    if d.browsertime && d.browsertime.run
+      section#screeenshots-panel
+        include ../screenshots/index.pug
+
    each pageRun in pageRuns
      - const panelName = pageRun.id + '-panel'
      section(id=panelName)
--- a/lib/plugins/html/templates/url/iteration/tabs.pug
+++ b/lib/plugins/html/templates/url/iteration/tabs.pug
@ -24,7 +24,10 @@
      | CPU    
  if d.thirdparty && d.thirdparty.run
    a(id='thirdparty', href='#thirdparty', onclick='return selectTab(this, true);')
-      | Third party    
+      | Third party
+  if d.browsertime && d.browsertime.run
+    a(id='screeenshots', href='#screenshots', onclick='return selectTab(this, true);')
+      | Screenshots
  each pageRun in pageRuns
    a(id=pageRun.id, href='#' + pageRun.id, onclick='return selectTab(this, true);')
      | #{pageRun.name}
--- a/lib/plugins/html/templates/url/screenshots/index.pug
+++ b/lib/plugins/html/templates/url/screenshots/index.pug
@ -0,0 +1,13 @@
+a
+h2 Screenshots
+
+if pageInfo.data.browsertime.run  && pageInfo.data.browsertime.run.screenshots
+     each screenshot in pageInfo.data.browsertime.run.screenshots
+        - filename = screenshot.substring(screenshot.lastIndexOf('/') + 1, screenshot.length)
+        - screenshotName = rootPath + screenshot
+        - style = options.mobile || options.android || options.safari.ios ? 'max-width: 50%' : 'max-width: 100%'
+        a(href=screenshotName)
+            img.screenshot(src=screenshotName, alt=filename, style=style)
+        p #{filename}
+else
+    p No screenshots.
--- a/lib/plugins/html/templates/url/summary/index.pug
+++ b/lib/plugins/html/templates/url/summary/index.pug
@ -154,7 +154,7 @@ block content
            if hasScreenShots
              - const width = options.mobile ? 150 : '100%';
              - const screenshotNo = medianRun ? medianRun.runIndex : 1
-              - const screenshotName = 'data/screenshots/' + screenshotNo + '.' + screenShotType
+              - const screenshotName = 'data/screenshots/' + screenshotNo + '/afterPageCompleteCheck.' + screenShotType
              a(href=screenshotName)
                img.screenshot(src=screenshotName, width=width, alt='Screenshot of run ' + screenshotNo)
            else if !d.browsertime && d.webpagetest
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@ -1526,9 +1526,9 @@
      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw=="
    },
    "browsertime": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-8.14.0.tgz",
-      "integrity": "sha512-GSfh8DOHmWDUyK4OazJcogtJhqneyD7XqyFeJmk6LFQ87U76R+hMHoDhZYqOZjzuDkhjQLO4n0BUfm5h+kZ3FQ==",
+      "version": "9.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-9.0.0-beta.1.tgz",
+      "integrity": "sha512-dXXZ/4ft2LLBbahvn/7j04vAHK7EOxGAqbtNIhajDsOG0smrlpwpAfYdyvvCwOBruE2H2wCZdIPliHd+HqjxEg==",
      "requires": {
        "@cypress/xvfb": "1.2.4",
        "@sitespeed.io/chromedriver": "83.0.4103-39",
@ -1556,9 +1556,46 @@
        "lodash.set": "4.3.2",
        "selenium-webdriver": "4.0.0-alpha.7",
        "speedline-core": "1.4.2",
-        "yargs": "15.1.0"
+        "yargs": "15.3.1"
      },
      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
        "cross-spawn": {
          "version": "7.0.3",
          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -1574,6 +1611,11 @@
          "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.27.tgz",
          "integrity": "sha512-Jpa2acjWIeOkg8KURUHICk0EqnEFSSF5eMEscsOgyJ92ZukXwmpmRkPSUka7KHSfbj5eKH30ieosYip+ky9emQ=="
        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
        "execa": {
          "version": "4.0.2",
          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.2.tgz",
@ -1590,6 +1632,11 @@
            "strip-final-newline": "^2.0.0"
          }
        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
        "get-stream": {
          "version": "5.1.0",
          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
@ -1598,6 +1645,11 @@
            "pump": "^3.0.0"
          }
        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
        "is-stream": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
@ -1625,6 +1677,11 @@
            "once": "^1.3.1"
          }
        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
        "shebang-command": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -1638,6 +1695,24 @@
          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
        "which": {
          "version": "2.0.2",
          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -1645,6 +1720,48 @@
          "requires": {
            "isexe": "^2.0.0"
          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+        },
+        "yargs": {
+          "version": "15.3.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
+          "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
        }
      }
    },
@ -4955,9 +5072,9 @@
      }
    },
    "jszip": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.4.0.tgz",
-      "integrity": "sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.5.0.tgz",
+      "integrity": "sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA==",
      "requires": {
        "lie": "~3.3.0",
        "pako": "~1.0.2",
--- a/package.json
+++ b/package.json
@ -74,7 +74,7 @@
    "@tgwf/co2": "0.6.1",
    "aws-sdk": "2.613.0",
    "axe-core": "3.5.3",
-    "browsertime": "8.14.0",
+    "browsertime": "9.0.0-beta.1",
    "coach-core": "5.0.1",
    "cli-color": "1.4.0",
    "concurrent-queue": "7.0.2",