Merge pull request #3805 from MetaMask/ci-screens
CI - capture screenshotsfeature/default_network_editable
kumavis
7 years ago
committed by
GitHub
commit
40c3edb754
@ -0,0 +1,52 @@ |
||||
#!/usr/bin/env node
|
||||
const request = require('request-promise') |
||||
const { version } = require('../dist/chrome/manifest.json') |
||||
|
||||
const GITHUB_COMMENT_TOKEN = process.env.GITHUB_COMMENT_TOKEN |
||||
console.log('GITHUB_COMMENT_TOKEN', GITHUB_COMMENT_TOKEN) |
||||
const CIRCLE_PULL_REQUEST = process.env.CIRCLE_PULL_REQUEST |
||||
console.log('CIRCLE_PULL_REQUEST', CIRCLE_PULL_REQUEST) |
||||
const CIRCLE_SHA1 = process.env.CIRCLE_SHA1 |
||||
console.log('CIRCLE_SHA1', CIRCLE_SHA1) |
||||
const CIRCLE_BUILD_NUM = process.env.CIRCLE_BUILD_NUM |
||||
console.log('CIRCLE_BUILD_NUM', CIRCLE_BUILD_NUM) |
||||
|
||||
const CIRCLE_PR_NUMBER = CIRCLE_PULL_REQUEST.split('/').pop() |
||||
const SHORT_SHA1 = CIRCLE_SHA1.slice(0,7) |
||||
const BUILD_LINK_BASE = `https://${CIRCLE_BUILD_NUM}-42009758-gh.circle-artifacts.com/0` |
||||
|
||||
const MASCARA = `${BUILD_LINK_BASE}/builds/mascara/home.html` |
||||
const CHROME = `${BUILD_LINK_BASE}/builds/metamask-chrome-${version}.zip` |
||||
const FIREFOX = `${BUILD_LINK_BASE}/builds/metamask-firefox-${version}.zip` |
||||
const EDGE = `${BUILD_LINK_BASE}/builds/metamask-edge-${version}.zip` |
||||
const OPERA = `${BUILD_LINK_BASE}/builds/metamask-opera-${version}.zip` |
||||
const WALKTHROUGH = `${BUILD_LINK_BASE}/test-artifacts/screens/walkthrough%20%28en%29.gif` |
||||
|
||||
const commentBody = ` |
||||
<details> |
||||
<summary> |
||||
Builds ready [${SHORT_SHA1}]: |
||||
<a href="${MASCARA}">mascara</a>, |
||||
<a href="${CHROME}">chrome</a>, |
||||
<a href="${FIREFOX}">firefox</a>, |
||||
<a href="${EDGE}">edge</a>, |
||||
<a href="${OPERA}">opera</a> |
||||
</summary> |
||||
<image src="${WALKTHROUGH}"> |
||||
</details> |
||||
` |
||||
|
||||
const JSON_PAYLOAD = JSON.stringify({ body: commentBody }) |
||||
const POST_COMMENT_URI = `https://api.github.com/repos/metamask/metamask-extension/issues/${CIRCLE_PR_NUMBER}/comments` |
||||
console.log(`Announcement:\n${commentBody}`) |
||||
console.log(`Posting to: ${POST_COMMENT_URI}`) |
||||
|
||||
request({ |
||||
method: 'POST', |
||||
uri: POST_COMMENT_URI, |
||||
body: JSON_PAYLOAD, |
||||
headers: { |
||||
'User-Agent': 'metamaskbot', |
||||
'Authorization': `token ${GITHUB_COMMENT_TOKEN}`, |
||||
}, |
||||
}) |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,18 @@ |
||||
require('chromedriver') |
||||
const webdriver = require('selenium-webdriver') |
||||
|
||||
exports.delay = function delay (time) { |
||||
return new Promise(resolve => setTimeout(resolve, time)) |
||||
} |
||||
|
||||
|
||||
exports.buildWebDriver = function buildWebDriver (extPath) { |
||||
return new webdriver.Builder() |
||||
.withCapabilities({ |
||||
chromeOptions: { |
||||
args: [`load-extension=${extPath}`], |
||||
}, |
||||
}) |
||||
.forBrowser('chrome') |
||||
.build() |
||||
} |
||||
@ -0,0 +1,230 @@ |
||||
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') |
||||
const localesIndex = require('../../app/_locales/index.json') |
||||
|
||||
let driver |
||||
|
||||
captureAllScreens().catch((err) => { |
||||
try { |
||||
console.error(err) |
||||
verboseReportOnFailure() |
||||
driver.quit() |
||||
} catch (err) { |
||||
console.error(err) |
||||
} |
||||
process.exit(1) |
||||
}) |
||||
|
||||
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') |
||||
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(1000) |
||||
await setProviderType('localhost') |
||||
await delay(300) |
||||
|
||||
// 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() |
||||
// metamask homepage is opened on prod, not dev
|
||||
if (tabs.length > 2) { |
||||
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 captureLanguageScreenShots('welcome-new-ui') |
||||
|
||||
// setup account
|
||||
await delay(1000) |
||||
await driver.findElement(By.css('body')).click() |
||||
await delay(300) |
||||
await captureLanguageScreenShots('welcome') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await captureLanguageScreenShots('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 captureLanguageScreenShots('choose-password-filled') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await delay(500) |
||||
await captureLanguageScreenShots('unique account image') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await delay(500) |
||||
await captureLanguageScreenShots('privacy note') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await delay(300) |
||||
await captureLanguageScreenShots('terms') |
||||
|
||||
await delay(300) |
||||
element = driver.findElement(By.linkText('Attributions')) |
||||
await driver.executeScript('arguments[0].scrollIntoView(true)', element) |
||||
await delay(300) |
||||
await captureLanguageScreenShots('terms-scrolled') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await delay(300) |
||||
await captureLanguageScreenShots('secret backup phrase') |
||||
|
||||
await driver.findElement(By.css('button')).click() |
||||
await delay(300) |
||||
await captureLanguageScreenShots('secret backup phrase') |
||||
|
||||
await driver.findElement(By.css('.backup-phrase__reveal-button')).click() |
||||
await delay(300) |
||||
await captureLanguageScreenShots('secret backup phrase - reveal') |
||||
|
||||
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) |
||||
} |
||||
|
||||
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) |
||||
} |
||||
|
||||
// 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 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) { |
||||
const artifactDir = `./test-artifacts/${test.title}` |
||||
const filepathBase = `${artifactDir}/test-failure` |
||||
await pify(mkdirp)(artifactDir) |
||||
// capture screenshot
|
||||
const screenshot = await driver.takeScreenshot() |
||||
await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' }) |
||||
// capture dom source
|
||||
const htmlSource = await driver.getPageSource() |
||||
await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) |
||||
} |
||||
Loading…
Reference in new issue