diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | test/screens/new-ui.js | 225 |
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' }) +} |