aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Huang <tmashuang@users.noreply.github.com>2018-05-23 00:37:15 +0800
committerGitHub <noreply@github.com>2018-05-23 00:37:15 +0800
commita8e0d38cfbb1c01705b56288511c2a8ce392e25d (patch)
treeea4e0d938c2d8d29f9b0b688832bd6bb23697f33
parente8b2e11c5624d80f535c1344d9c9be48627b1319 (diff)
parent1fbf59cdd3db916d7753ffe058beee789dbe6220 (diff)
downloadtangerine-wallet-browser-a8e0d38cfbb1c01705b56288511c2a8ce392e25d.tar.gz
tangerine-wallet-browser-a8e0d38cfbb1c01705b56288511c2a8ce392e25d.tar.zst
tangerine-wallet-browser-a8e0d38cfbb1c01705b56288511c2a8ce392e25d.zip
Merge pull request #4338 from MetaMask/ci-job-screens-enhance
ci - screens - continue screenshots through account creation + export account
-rw-r--r--package.json1
-rw-r--r--test/screens/new-ui.js225
2 files changed, 131 insertions, 95 deletions
diff --git a/package.json b/package.json
index 9e4950734..e8e7861de 100644
--- a/package.json
+++ b/package.json
@@ -213,6 +213,7 @@
"browserify": "^16.1.1",
"chai": "^4.1.0",
"chromedriver": "2.36.0",
+ "clipboardy": "^1.2.3",
"compression": "^1.7.1",
"coveralls": "^3.0.0",
"cross-env": "^5.1.4",
diff --git a/test/screens/new-ui.js b/test/screens/new-ui.js
index 6a8822eb3..6b873ac85 100644
--- a/test/screens/new-ui.js
+++ b/test/screens/new-ui.js
@@ -5,29 +5,44 @@ const mkdirp = require('mkdirp')
const rimraf = require('rimraf')
const webdriver = require('selenium-webdriver')
const endOfStream = require('end-of-stream')
+const clipboardy = require('clipboardy')
+const Ethjs = require('ethjs')
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')
const localesIndex = require('../../app/_locales/index.json')
+// const localesIndex = []
+
+const eth = new Ethjs(new Ethjs.HttpProvider('http://localhost:8545'))
let driver
+let screenshotCount = 0
+
+captureAllScreens()
+.then(async () => {
+ // build screenshots into gif
+ console.log('building gif...')
+ await generateGif()
-captureAllScreens().catch((err) => {
+ await driver.quit()
+ process.exit()
+})
+.catch(async (err) => {
try {
console.error(err)
- verboseReportOnFailure()
- driver.quit()
+ verboseReportOnFailure({ title: 'something broke' })
} catch (err) {
console.error(err)
}
+
+ await driver.quit()
process.exit(1)
})
-async function captureAllScreens() {
- let screenshotCount = 0
+async function captureAllScreens() {
// common names
let button
let tabs
@@ -74,10 +89,11 @@ async function captureAllScreens() {
await driver.findElement(By.css('button')).click()
await captureLanguageScreenShots('create password')
+ const password = '123456789'
const passwordBox = await driver.findElement(By.css('input#create-password'))
const passwordBoxConfirm = await driver.findElement(By.css('input#confirm-password'))
- passwordBox.sendKeys('123456789')
- passwordBoxConfirm.sendKeys('123456789')
+ passwordBox.sendKeys(password)
+ passwordBoxConfirm.sendKeys(password)
await delay(500)
await captureLanguageScreenShots('choose-password-filled')
@@ -111,109 +127,123 @@ async function captureAllScreens() {
await delay(300)
await captureLanguageScreenShots('secret backup phrase - reveal')
+ const seedPhrase = await driver.findElement(By.css('.backup-phrase__secret-words')).getText()
+ const seedPhraseWords = seedPhrase.split(' ')
await driver.findElement(By.css('button')).click()
await delay(300)
await captureLanguageScreenShots('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')
- // 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)
- // })
-
- async function captureLanguageScreenShots(label) {
- const nonEnglishLocales = localesIndex.filter(localeMeta => localeMeta.code !== 'en')
- // take english shot
- await captureScreenShot(`${label} (en)`)
- for (let localeMeta of nonEnglishLocales) {
- // set locale and take shot
- await setLocale(localeMeta.code)
- await delay(300)
- await captureScreenShot(`${label} (${localeMeta.code})`)
- }
- // return locale to english
- await setLocale('en')
- await delay(300)
+ // enter seed phrase
+ const seedPhraseButtons = await driver.findElements(By.css('.backup-phrase__confirm-seed-options > button'))
+ const seedPhraseButtonWords = await Promise.all(seedPhraseButtons.map(button => button.getText()))
+ for (let targetWord of seedPhraseWords) {
+ const wordIndex = seedPhraseButtonWords.indexOf(targetWord)
+ if (wordIndex === -1) throw new Error(`Captured seed phrase word "${targetWord}" not in found seed phrase button options ${seedPhraseButtonWords.join(' ')}`)
+ await driver.findElement(By.css(`.backup-phrase__confirm-seed-options > button:nth-child(${wordIndex+1})`)).click()
+ await delay(100)
}
+ await captureLanguageScreenShots('confirm secret backup phrase - words selected correctly')
- async function setLocale(code) {
- await driver.executeScript('window.metamask.updateCurrentLocale(arguments[0])', code)
- }
+ await driver.findElement(By.css('.backup-phrase__content-wrapper .first-time-flow__button')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask post-initialize greeter screen deposit ether')
- async function setProviderType(type) {
- await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
- }
+ await driver.findElement(By.css('.page-container__header-close')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask account main screen')
- // cleanup
- await driver.quit()
+ // account details + export private key
+ await driver.findElement(By.css('.wallet-view__name-container > .wallet-view__details-button')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask account detail screen')
- async function cleanScreenShotDir() {
- await pify(rimraf)(`./test-artifacts/screens/`)
- }
+ await driver.findElement(By.css('.account-modal__button:nth-of-type(2)')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask account detail export private key screen - initial')
- async function captureScreenShot(label) {
- const shotIndex = screenshotCount.toString().padStart(4, '0')
- 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' })
- }
+ await driver.findElement(By.css('.private-key-password > input')).sendKeys(password)
+ await delay(300)
+ await captureLanguageScreenShots('metamask account detail export private key screen - password entered')
- async function generateGif(){
- // calculate screenshot size
- const screenshot = await driver.takeScreenshot()
- const pngBuffer = Buffer.from(screenshot, 'base64')
- const size = sizeOfPng.calculate(pngBuffer)
+ await driver.findElement(By.css('.btn-primary--lg.export-private-key__button')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask account detail export private key screen - reveal key')
- // read only the english pngs into gif
- const encoder = new GIFEncoder(size.width, size.height)
- const stream = pngFileStream('./test-artifacts/screens/* (en).png')
- .pipe(encoder.createWriteStream({ repeat: 0, delay: 1000, quality: 10 }))
- .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough (en).gif'))
+ await driver.findElement(By.css('.export-private-key__button')).click()
+ await delay(300)
+ await captureLanguageScreenShots('metamask account detail export private key screen - done')
- // wait for end
- await pify(endOfStream)(stream)
+ // get eth from Ganache
+ // const viewAddressButton = await driver.findElement(By.css('.wallet-view__address'))
+ // await driver.actions({ bridge: true }).move({ origin: viewAddressButton }).perform()
+ // console.log('driver.actions', driver.actions({ bridge: true }))
+ // await delay(300)
+ // await captureLanguageScreenShots('metamask home - hover copy address')
+
+ await driver.findElement(By.css('.wallet-view__address')).click()
+ await delay(100)
+ await captureLanguageScreenShots('metamask home - hover copy address')
+
+ const primaryAddress = clipboardy.readSync()
+ await requestEther(primaryAddress)
+ // wait for block polling
+ await delay(10000)
+ await captureLanguageScreenShots('metamask home - has ether')
+
+}
+
+
+async function captureLanguageScreenShots(label) {
+ const nonEnglishLocales = localesIndex.filter(localeMeta => localeMeta.code !== 'en')
+ // take english shot
+ await captureScreenShot(`${label} (en)`)
+ for (let localeMeta of nonEnglishLocales) {
+ // set locale and take shot
+ await setLocale(localeMeta.code)
+ await delay(300)
+ await captureScreenShot(`${label} (${localeMeta.code})`)
}
+ // return locale to english
+ await setLocale('en')
+ await delay(300)
+}
+
+async function setLocale(code) {
+ await driver.executeScript('window.metamask.updateCurrentLocale(arguments[0])', code)
+}
+
+async function setProviderType(type) {
+ await driver.executeScript('window.metamask.setProviderType(arguments[0])', type)
+}
+async function cleanScreenShotDir() {
+ await pify(rimraf)(`./test-artifacts/screens/`)
+}
+
+async function captureScreenShot(label) {
+ const shotIndex = screenshotCount.toString().padStart(4, '0')
+ 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 only the english pngs into gif
+ const encoder = new GIFEncoder(size.width, size.height)
+ const stream = pngFileStream('./test-artifacts/screens/* (en).png')
+ .pipe(encoder.createWriteStream({ repeat: 0, delay: 1000, quality: 10 }))
+ .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough (en).gif'))
+
+ // wait for end
+ await pify(endOfStream)(stream)
}
async function verboseReportOnFailure(test) {
@@ -227,3 +257,8 @@ async function verboseReportOnFailure(test) {
const htmlSource = await driver.getPageSource()
await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
}
+
+async function requestEther(address) {
+ const accounts = await eth.accounts()
+ await eth.sendTransaction({ from: accounts[0], to: address, value: 1 * 1e18, data: '0x0' })
+}