development - create selenium screen shotter

1 files changed, 77 insertions, 45 deletions

diff --git a/test/screens/new.spec.js b/test/screens/new.spec.js
index c5a8ef859..f17781d7a 100644
--- a/test/screens/new.spec.js
+++ b/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')
+
+  // close metamask homepage and extra home.html
+  tabs = await driver.getAllWindowHandles()
+  await driver.switchTo().window(tabs[2])
+  driver.close()
+  await driver.switchTo().window(tabs[1])
+  driver.close()
+  await driver.switchTo().window(tabs[0])
   await delay(300)
-  await captureScreenShot('start-new4')
+  await captureScreenShot('welcome-new-ui')
+
+  // setup account
+  await delay(1000)
+  await driver.findElement(By.css('body')).click()
   await delay(300)
-  await captureScreenShot('start-new5')
+  await captureScreenShot('welcome')
 
-  // exit early for dev
-  await generateGif()
-  await driver.quit()
-  return
+  await driver.findElement(By.css('button')).click()
+  await captureScreenShot('create password')
+
+  const passwordBox = await driver.findElement(By.css('input[type=password]:nth-of-type(1)'))
+  const passwordBoxConfirm = await driver.findElement(By.css('input[type=password]:nth-of-type(2)'))
+  passwordBox.sendKeys('123456789')
+  passwordBoxConfirm.sendKeys('123456789')
+  await delay(500)
+  await captureScreenShot('choose-password-filled')
 
+  await driver.findElement(By.css('button')).click()
+  await delay(500)
+  await captureScreenShot('unique account image')
 
-  await captureScreenShot('privacy')
+  await driver.findElement(By.css('button')).click()
+  await delay(500)
+  await captureScreenShot('privacy note')
 
-  const privacy = await driver.findElement(By.css('.terms-header')).getText()
-  driver.findElement(By.css('button')).click()
+  await 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'))
+  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('choose-password')
+  await captureScreenShot('secret backup phrase')
 
-  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 driver.findElement(By.css('button')).click()
+  await delay(300)
+  await captureScreenShot('secret backup phrase')
 
-  await button.click()
-  await delay(700)
-  this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
-  await captureScreenShot('seed phrase')
+  await driver.findElement(By.css('.backup-phrase__reveal-button')).click()
+  await delay(300)
+  await captureScreenShot('secret backup phrase - reveal')
 
-  const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
-  await continueAfterSeedPhrase.click()
+  await driver.findElement(By.css('button')).click()
   await delay(300)
-  await captureScreenShot('main screen')
+  await captureScreenShot('confirm secret backup phrase')
 
-  await driver.findElement(By.css('.sandwich-expando')).click()
-  await delay(500)
-  await captureScreenShot('menu')
+  // 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