development - create selenium screen shotter

feature/default_network_editable
kumavis 7 years ago
parent 592c2e5948
commit 5945c8cf67
  1. 168
      package-lock.json
  2. 1
      package.json
  3. 122
      test/screens/new.spec.js

168
package-lock.json generated

@ -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",

@ -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",

@ -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

Loading…
Cancel
Save