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') 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 // 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}/home.html`) await delay(500) tabs = await driver.getAllWindowHandles() await driver.switchTo().window(tabs[0]) await delay(300) 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 delay(300) // 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('welcome-new-ui') // setup account await delay(1000) await driver.findElement(By.css('body')).click() await delay(300) await captureScreenShot('welcome') 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 driver.findElement(By.css('button')).click() await delay(500) await captureScreenShot('privacy note') await driver.findElement(By.css('button')).click() await delay(300) await captureScreenShot('terms') await delay(300) element = driver.findElement(By.linkText('Attributions')) await driver.executeScript('arguments[0].scrollIntoView(true)', element) await delay(300) await captureScreenShot('terms-scrolled') await driver.findElement(By.css('button')).click() await delay(300) await captureScreenShot('secret backup phrase') await driver.findElement(By.css('button')).click() await delay(300) await captureScreenShot('secret backup phrase') await driver.findElement(By.css('.backup-phrase__reveal-button')).click() await delay(300) await captureScreenShot('secret backup phrase - reveal') await driver.findElement(By.css('button')).click() await delay(300) await captureScreenShot('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) // }) // cleanup await driver.quit() 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 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: 1000, quality: 10 })) .pipe(fs.createWriteStream('./test-artifacts/screens/walkthrough.gif')) // wait for end await pify(endOfStream)(stream) } }