development - create selenium screen shotter

package-lock.json

@@ -6674,6 +6674,12 @@
         "which": "1.3.0"
       }
     },
+    "find-index": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
+      "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=",
+      "dev": true
+    },
     "find-up": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -8232,6 +8238,12 @@
         "assert-plus": "1.0.0"
       }
     },
+    "gifencoder": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gifencoder/-/gifencoder-1.1.0.tgz",
+      "integrity": "sha512-MVh++nximxsp8NaNRfS1+MmCviZ4wi7HhuvX8eHrfNn//1mqi8Eb03tKs6Z+lIIcSEySJ6PmS1VPZ+HdtEMlfg==",
+      "dev": true
+    },
     "gl-mat4": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/gl-mat4/-/gl-mat4-1.1.4.tgz",
@@ -8351,6 +8363,15 @@
         "object.defaults": "1.1.0"
       }
     },
+    "glob2base": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
+      "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=",
+      "dev": true,
+      "requires": {
+        "find-index": "0.1.1"
+      }
+    },
     "global": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
@@ -10104,6 +10125,12 @@
       "integrity": "sha1-rI9DbyI5td+2bV8NOpBKh6xnzF4=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.2.tgz",
+      "integrity": "sha512-pH3vDzpczdsKHdZ9xxR3O46unSjisgVx0IImay7Zz2EdhRVbCkj+nthx9OuuWEhakx9FAO+fNVGrF0rZ2oMOvw==",
+      "dev": true
+    },
     "immediate": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.2.3.tgz",
@@ -16691,6 +16718,147 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "png-file-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-file-stream/-/png-file-stream-1.0.0.tgz",
+      "integrity": "sha1-4IPQ/lbgl6XL0NNBoThzeQUsrTU=",
+      "dev": true,
+      "requires": {
+        "glob-stream": "3.1.18",
+        "png-js": "0.1.1",
+        "through2": "0.2.3"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "4.5.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
+          "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=",
+          "dev": true,
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "2.0.10",
+            "once": "1.4.0"
+          }
+        },
+        "glob-stream": {
+          "version": "3.1.18",
+          "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
+          "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=",
+          "dev": true,
+          "requires": {
+            "glob": "4.5.3",
+            "glob2base": "0.0.12",
+            "minimatch": "2.0.10",
+            "ordered-read-streams": "0.1.0",
+            "through2": "0.6.5",
+            "unique-stream": "1.0.0"
+          },
+          "dependencies": {
+            "through2": {
+              "version": "0.6.5",
+              "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+              "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+              "dev": true,
+              "requires": {
+                "readable-stream": "1.0.34",
+                "xtend": "4.0.1"
+              }
+            }
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "2.0.10",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
+          "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        },
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=",
+          "dev": true
+        },
+        "ordered-read-streams": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
+          "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        },
+        "through2": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.2.3.tgz",
+          "integrity": "sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "1.1.14",
+            "xtend": "2.1.2"
+          },
+          "dependencies": {
+            "readable-stream": {
+              "version": "1.1.14",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+              "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+              "dev": true,
+              "requires": {
+                "core-util-is": "1.0.2",
+                "inherits": "2.0.3",
+                "isarray": "0.0.1",
+                "string_decoder": "0.10.31"
+              }
+            },
+            "xtend": {
+              "version": "2.1.2",
+              "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+              "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+              "dev": true,
+              "requires": {
+                "object-keys": "0.4.0"
+              }
+            }
+          }
+        },
+        "unique-stream": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
+          "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=",
+          "dev": true
+        }
+      }
+    },
+    "png-js": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-0.1.1.tgz",
+      "integrity": "sha1-HMfCEjA6yr50Jj7DrHgAlYAkLZM=",
+      "dev": true
+    },
     "pojo-migrator": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pojo-migrator/-/pojo-migrator-2.1.0.tgz",

package.json

@@ -263,6 +263,7 @@
     "react-test-renderer": "^15.6.2",
     "react-testutils-additions": "^15.2.0",
     "redux-test-utils": "^0.2.2",
+    "rimraf": "^2.6.2",
     "selenium-webdriver": "^3.5.0",
     "sinon": "^5.0.0",
     "stylelint-config-standard": "^18.2.0",

test/screens/new.spec.js

@@ -2,6 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const pify = require('pify')
 const mkdirp = require('mkdirp')
+const rimraf = require('rimraf')
 const webdriver = require('selenium-webdriver')
 const endOfStream = require('end-of-stream')
 const GIFEncoder = require('gifencoder')
@@ -15,84 +16,111 @@ captureAllScreens().catch(console.error)
 async function captureAllScreens() {
   let screenshotCount = 0
 
+  // common names
+  let button
+  let tabs
+  let element
+
+  await cleanScreenShotDir()
+
   // setup selenium and install extension
   const extPath = path.resolve('dist/chrome')
   const driver = buildWebDriver(extPath)
   await driver.get('chrome://extensions-frame')
   const elems = await driver.findElements(By.css('.extension-list-item-wrapper'))
   const extensionId = await elems[1].getAttribute('id')
-  await driver.get(`chrome-extension://${extensionId}/popup.html`)
+  await driver.get(`chrome-extension://${extensionId}/home.html`)
   await delay(500)
-  const tabs = await driver.getAllWindowHandles()
+  tabs = await driver.getAllWindowHandles()
   await driver.switchTo().window(tabs[0])
   await delay(300)
 
-  // common names
-  let button
-
   await captureScreenShot('start-old')
 
   // click try new ui
   await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-row.flex-center.flex-grow > p')).click()
-  await captureScreenShot('start-new')
   await delay(300)
-  await captureScreenShot('start-new2')
-  await delay(300)
-  await captureScreenShot('start-new3')
-  await delay(300)
-  await captureScreenShot('start-new4')
-  await delay(300)
-  await captureScreenShot('start-new5')
 
-  // exit early for dev
+  // close metamask homepage and extra home.html
-  await generateGif()
+  tabs = await driver.getAllWindowHandles()
-  await driver.quit()
+  await driver.switchTo().window(tabs[2])
-  return
+  driver.close()
-
+  await driver.switchTo().window(tabs[1])
-
+  driver.close()
-  await captureScreenShot('privacy')
+  await driver.switchTo().window(tabs[0])
-
-  const privacy = await driver.findElement(By.css('.terms-header')).getText()
-  driver.findElement(By.css('button')).click()
   await delay(300)
-  await captureScreenShot('terms')
+  await captureScreenShot('welcome-new-ui')
 
+  // setup account
+  await delay(1000)
+  await driver.findElement(By.css('body')).click()
   await delay(300)
-  const terms = await driver.findElement(By.css('.terms-header')).getText()
+  await captureScreenShot('welcome')
-  await delay(300)
-  const element = driver.findElement(By.linkText('Attributions'))
-  await driver.executeScript('arguments[0].scrollIntoView(true)', element)
-  await delay(300)
-  button = await driver.findElement(By.css('button'))
-  const buttonEnabled = await button.isEnabled()
-  await delay(500)
-  await captureScreenShot('terms-scrolled')
 
-  await button.click()
+  await driver.findElement(By.css('button')).click()
-  await delay(300)
+  await captureScreenShot('create password')
-  await captureScreenShot('choose-password')
 
-  const passwordBox = await driver.findElement(By.id('password-box'))
+  const passwordBox = await driver.findElement(By.css('input[type=password]:nth-of-type(1)'))
-  const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
+  const passwordBoxConfirm = await driver.findElement(By.css('input[type=password]:nth-of-type(2)'))
-  button = driver.findElement(By.css('button'))
   passwordBox.sendKeys('123456789')
   passwordBoxConfirm.sendKeys('123456789')
   await delay(500)
   await captureScreenShot('choose-password-filled')
 
-  await button.click()
+  await driver.findElement(By.css('button')).click()
-  await delay(700)
-  this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
-  await captureScreenShot('seed phrase')
-
-  const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
-  await continueAfterSeedPhrase.click()
-  await delay(300)
-  await captureScreenShot('main screen')
-
-  await driver.findElement(By.css('.sandwich-expando')).click()
   await delay(500)
-  await captureScreenShot('menu')
+  await captureScreenShot('unique account image')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(500)
+  await captureScreenShot('privacy note')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('terms')
+
+  await delay(300)
+  element = driver.findElement(By.linkText('Attributions'))
+  await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+  await delay(300)
+  await captureScreenShot('terms-scrolled')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('secret backup phrase')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('secret backup phrase')
+
+  await driver.findElement(By.css('.backup-phrase__reveal-button')).click()
+  await delay(300)
+  await captureScreenShot('secret backup phrase - reveal')
+
+  await driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('confirm secret backup phrase')
+
+  // finish up
+  console.log('building gif...')
+  await generateGif()
+  await driver.quit()
+  return
+
+  //
+  // await button.click()
+  // await delay(700)
+  // this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
+  // await captureScreenShot('seed phrase')
+  //
+  // const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
+  // await continueAfterSeedPhrase.click()
+  // await delay(300)
+  // await captureScreenShot('main screen')
+  //
+  // await driver.findElement(By.css('.sandwich-expando')).click()
+  // await delay(500)
+  // await captureScreenShot('menu')
 
   // await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click()
   // await captureScreenShot('main screen')
@@ -119,8 +147,12 @@ async function captureAllScreens() {
   // cleanup
   await driver.quit()
 
+  async function cleanScreenShotDir() {
+    await pify(rimraf)(`./test-artifacts/screens/`)
+  }
+
   async function captureScreenShot(label) {
-    const shotIndex = screenshotCount
+    const shotIndex = screenshotCount.toString().padStart(4, '0')
     screenshotCount++
     const artifactDir = `./test-artifacts/screens/`
     await pify(mkdirp)(artifactDir)
@@ -138,7 +170,7 @@ async function captureAllScreens() {
     // read all pngs into gif
     const encoder = new GIFEncoder(size.width, size.height)
     const stream = pngFileStream('./test-artifacts/screens/*.png')
-      .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 }))
+      .pipe(encoder.createWriteStream({ repeat: -1, delay: 1000, quality: 10 }))
       .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough.gif'))
 
     // wait for end