test - add auto screen shotter

package.json

@@ -18,6 +18,7 @@
     "test:integration": "npm run test:integration:build && npm run test:flat && npm run test:mascara",
     "test:integration:build": "gulp build:scss",
     "test:e2e": "METAMASK_ENV=test mocha test/e2e/metamask.spec --recursive",
+    "test:screens": "METAMASK_ENV=test mocha test/screens/new.spec --recursive",
     "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
     "test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
     "test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
@@ -219,6 +220,7 @@
     "eslint-plugin-react": "^7.4.0",
     "eth-json-rpc-middleware": "^1.2.7",
     "fs-promise": "^2.0.3",
+    "gifencoder": "^1.1.0",
     "gulp": "github:gulpjs/gulp#6d71a658c61edb3090221579d8f97dbe086ba2ed",
     "gulp-babel": "^7.0.0",
     "gulp-eslint": "^4.0.0",
@@ -234,6 +236,7 @@
     "gulp-util": "^3.0.7",
     "gulp-watch": "^5.0.0",
     "gulp-zip": "^4.0.0",
+    "image-size": "^0.6.2",
     "isomorphic-fetch": "^2.2.1",
     "jsdom": "^11.2.0",
     "jsdom-global": "^3.0.2",
@@ -252,14 +255,15 @@
     "node-sass": "^4.7.2",
     "nyc": "^11.0.3",
     "open": "0.0.5",
+    "png-file-stream": "^1.0.0",
     "prompt": "^1.0.0",
     "qs": "^6.2.0",
     "qunitjs": "^2.4.1",
     "react-addons-test-utils": "^15.5.1",
     "react-test-renderer": "^15.6.2",
     "react-testutils-additions": "^15.2.0",
-    "selenium-webdriver": "^3.5.0",
     "redux-test-utils": "^0.2.2",
+    "selenium-webdriver": "^3.5.0",
     "sinon": "^5.0.0",
     "stylelint-config-standard": "^18.2.0",
     "tape": "^4.5.1",

test/screens/func.js

@@ -0,0 +1,18 @@
+require('chromedriver')
+const webdriver = require('selenium-webdriver')
+
+exports.delay = function delay (time) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
+
+
+exports.buildWebDriver = function buildWebDriver (extPath) {
+  return new webdriver.Builder()
+    .withCapabilities({
+      chromeOptions: {
+        args: [`load-extension=${extPath}`],
+      },
+    })
+    .forBrowser('chrome')
+    .build()
+}

test/screens/new.spec.js

@@ -0,0 +1,148 @@
+const path = require('path')
+const fs = require('fs')
+const pify = require('pify')
+const mkdirp = require('mkdirp')
+const webdriver = require('selenium-webdriver')
+const endOfStream = require('end-of-stream')
+const GIFEncoder = require('gifencoder')
+const pngFileStream = require('png-file-stream')
+const sizeOfPng = require('image-size/lib/types/png')
+const By = webdriver.By
+const { delay, buildWebDriver } = require('./func')
+
+captureAllScreens().catch(console.error)
+
+async function captureAllScreens() {
+  let screenshotCount = 0
+
+  // 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 delay(500)
+  const 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
+  await generateGif()
+  await driver.quit()
+  return
+
+
+  await captureScreenShot('privacy')
+
+  const privacy = await driver.findElement(By.css('.terms-header')).getText()
+  driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('terms')
+
+  await delay(300)
+  const terms = await driver.findElement(By.css('.terms-header')).getText()
+  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 delay(300)
+  await captureScreenShot('choose-password')
+
+  const passwordBox = await driver.findElement(By.id('password-box'))
+  const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
+  button = driver.findElement(By.css('button'))
+  passwordBox.sendKeys('123456789')
+  passwordBoxConfirm.sendKeys('123456789')
+  await delay(500)
+  await captureScreenShot('choose-password-filled')
+
+  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')
+  // it('should accept account password after lock', async () => {
+  //   await delay(500)
+  //   await driver.findElement(By.id('password-box')).sendKeys('123456789')
+  //   await driver.findElement(By.css('button')).click()
+  //   await delay(500)
+  // })
+  //
+  // it('should show QR code option', async () => {
+  //   await delay(300)
+  //   await driver.findElement(By.css('.fa-ellipsis-h')).click()
+  //   await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
+  //   await delay(300)
+  // })
+  //
+  // it('should show the account address', async () => {
+  //   this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+  //   await driver.findElement(By.css('.fa-arrow-left')).click()
+  //   await delay(500)
+  // })
+
+  // cleanup
+  await driver.quit()
+
+  async function captureScreenShot(label) {
+    const shotIndex = screenshotCount
+    screenshotCount++
+    const artifactDir = `./test-artifacts/screens/`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${artifactDir}/${shotIndex} - ${label}.png`, screenshot, { encoding: 'base64' })
+  }
+
+  async function generateGif(){
+    // calculate screenshot size
+    const screenshot = await driver.takeScreenshot()
+    const pngBuffer = Buffer.from(screenshot, 'base64')
+    const size = sizeOfPng.calculate(pngBuffer)
+
+    // 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(fs.createWriteStream('./test-artifacts/screens/walkthrough.gif'))
+
+    // wait for end
+    await pify(endOfStream)(stream)
+  }
+
+}

test/screens/old.spec.js

@@ -0,0 +1,105 @@
+const path = require('path')
+const fs = require('fs')
+const pify = require('pify')
+const mkdirp = require('mkdirp')
+const webdriver = require('selenium-webdriver')
+const By = webdriver.By
+const { delay, buildWebDriver } = require('./func')
+
+captureAllScreens().catch(console.error)
+
+async function captureAllScreens() {
+  // 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 delay(500)
+  const tabs = await driver.getAllWindowHandles()
+  await driver.switchTo().window(tabs[0])
+  await delay(300)
+
+  // common names
+  let button
+
+  await captureScreenShot('privacy')
+
+  const privacy = await driver.findElement(By.css('.terms-header')).getText()
+  driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('terms')
+
+  await delay(300)
+  const terms = await driver.findElement(By.css('.terms-header')).getText()
+  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 delay(300)
+  await captureScreenShot('choose-password')
+
+  const passwordBox = await driver.findElement(By.id('password-box'))
+  const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
+  button = driver.findElement(By.css('button'))
+  passwordBox.sendKeys('123456789')
+  passwordBoxConfirm.sendKeys('123456789')
+  await delay(500)
+  await captureScreenShot('choose-password-filled')
+
+  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')
+  // it('should accept account password after lock', async () => {
+  //   await delay(500)
+  //   await driver.findElement(By.id('password-box')).sendKeys('123456789')
+  //   await driver.findElement(By.css('button')).click()
+  //   await delay(500)
+  // })
+  //
+  // it('should show QR code option', async () => {
+  //   await delay(300)
+  //   await driver.findElement(By.css('.fa-ellipsis-h')).click()
+  //   await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
+  //   await delay(300)
+  // })
+  //
+  // it('should show the account address', async () => {
+  //   this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+  //   await driver.findElement(By.css('.fa-arrow-left')).click()
+  //   await delay(500)
+  // })
+
+  // cleanup
+  await driver.quit()
+
+  async function captureScreenShot(label) {
+    const artifactDir = `./test-artifacts/${label}`
+    const filepathBase = `${artifactDir}`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${filepathBase}/screenshot.png`, screenshot, { encoding: 'base64' })
+  }
+
+}