diff options
Diffstat (limited to 'test/e2e/beta/metamask-beta-responsive-ui.spec.js')
| -rw-r--r-- | test/e2e/beta/metamask-beta-responsive-ui.spec.js | 291 |
1 files changed, 123 insertions, 168 deletions
diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js index b93563b25..6df1da051 100644 --- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js +++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js @@ -18,6 +18,7 @@ const { loadExtension, verboseReportOnFailure, } = require('./helpers') +const fetchMockResponses = require('./fetch-mocks.js') describe('MetaMask', function () { let extensionId @@ -32,23 +33,50 @@ describe('MetaMask', function () { this.bail(true) before(async function () { + let extensionUrl switch (process.env.SELENIUM_BROWSER) { case 'chrome': { const extPath = path.resolve('dist/chrome') driver = buildChromeWebDriver(extPath, { responsive: true }) extensionId = await getExtensionIdChrome(driver) - await driver.get(`chrome-extension://${extensionId}/popup.html`) + await delay(largeDelayMs) + extensionUrl = `chrome-extension://${extensionId}/home.html` break } case 'firefox': { const extPath = path.resolve('dist/firefox') driver = buildFirefoxWebdriver({ responsive: true }) await installWebExt(driver, extPath) - await delay(700) + await delay(largeDelayMs) extensionId = await getExtensionIdFirefox(driver) - await driver.get(`moz-extension://${extensionId}/popup.html`) + extensionUrl = `moz-extension://${extensionId}/home.html` + break } } + // Depending on the state of the application built into the above directory (extPath) and the value of + // METAMASK_DEBUG we will see different post-install behaviour and possibly some extra windows. Here we + // are closing any extraneous windows to reset us to a single window before continuing. + const [tab1] = await driver.getAllWindowHandles() + await closeAllWindowHandlesExcept(driver, [tab1]) + await driver.switchTo().window(tab1) + await driver.get(extensionUrl) + }) + + beforeEach(async function () { + await driver.executeScript( + 'window.origFetch = window.fetch.bind(window);' + + 'window.fetch = ' + + '(...args) => { ' + + 'if (args[0] === "https://ethgasstation.info/json/ethgasAPI.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasBasic + '\')) }); } else if ' + + '(args[0] === "https://ethgasstation.info/json/predictTable.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } else if ' + + '(args[0].match(/chromeextensionmm/)) { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.metametrics + '\')) }); } else if ' + + '(args[0] === "https://dev.blockscale.net/api/gasexpress.json") { return ' + + 'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.gasExpress + '\')) }); } ' + + 'return window.origFetch(...args); }' + ) }) afterEach(async function () { @@ -69,189 +97,111 @@ describe('MetaMask', function () { await driver.quit() }) - describe('New UI setup', async function () { - it('switches to first tab', async function () { - await delay(tinyDelayMs) - const [firstTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(firstTab) - await delay(regularDelayMs) - }) - - it('selects the new UI option', async () => { - try { - const overlay = await findElement(driver, By.css('.full-flex-height')) - await driver.wait(until.stalenessOf(overlay)) - } catch (e) {} - - let button - try { - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } catch (e) { - await loadExtension(driver, extensionId) + describe('Going through the first time flow', () => { + it('clicks the continue button on the welcome screen', async () => { + await findElement(driver, By.css('.welcome-page__header')) + const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button')) + welcomeScreenBtn.click() await delay(largeDelayMs) - button = await findElement(driver, By.xpath("//button[contains(text(), 'Try it now')]")) - } - await button.click() - await delay(regularDelayMs) + }) - // Close all other tabs - const [tab0, tab1, tab2] = await driver.getAllWindowHandles() - await driver.switchTo().window(tab0) - await delay(tinyDelayMs) - - let selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (tab0 && selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab0) - } else if (tab1) { - await driver.switchTo().window(tab1) - selectedUrl = await driver.getCurrentUrl() - await delay(tinyDelayMs) - if (selectedUrl.match(/popup.html/)) { - await closeAllWindowHandlesExcept(driver, tab1) - } else if (tab2) { - await driver.switchTo().window(tab2) - selectedUrl = await driver.getCurrentUrl() - selectedUrl.match(/popup.html/) && await closeAllWindowHandlesExcept(driver, tab2) - } - } else { - throw new Error('popup.html not found') - } - await delay(regularDelayMs) - const [appTab] = await driver.getAllWindowHandles() - await driver.switchTo().window(appTab) - await delay(tinyDelayMs) - - await loadExtension(driver, extensionId) - await delay(regularDelayMs) - - const continueBtn = await findElement(driver, By.css('.welcome-screen__button')) - await continueBtn.click() - await delay(regularDelayMs) - }) - }) - - describe('Going through the first time flow', () => { - it('accepts a secure password', async () => { - const passwordBox = await findElement(driver, By.css('.create-password #create-password')) - const passwordBoxConfirm = await findElement(driver, By.css('.create-password #confirm-password')) - const button = await findElement(driver, By.css('.create-password button')) - - await passwordBox.sendKeys('correct horse battery staple') - await passwordBoxConfirm.sendKeys('correct horse battery staple') - await button.click() - await delay(regularDelayMs) - }) + it('clicks the "Create New Wallet" option', async () => { + const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Create a Wallet')]`)) + customRpcButton.click() + await delay(largeDelayMs) + }) - it('clicks through the unique image screen', async () => { - const nextScreen = await findElement(driver, By.css('.unique-image button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + it('clicks the "I agree" option on the metametrics opt-in screen', async () => { + const optOutButton = await findElement(driver, By.css('.btn-confirm')) + optOutButton.click() + await delay(largeDelayMs) + }) - it('clicks through the ToS', async () => { - // terms of use - const canClickThrough = await driver.findElement(By.css('.tou button')).isEnabled() - assert.equal(canClickThrough, false, 'disabled continue button') - const bottomOfTos = await findElement(driver, By.linkText('Attributions')) - await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos) - await delay(regularDelayMs) - const acceptTos = await findElement(driver, By.css('.tou button')) - driver.wait(until.elementIsEnabled(acceptTos)) - await acceptTos.click() - await delay(regularDelayMs) - }) + it('accepts a secure password', async () => { + const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password')) + const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password')) + const button = await findElement(driver, By.css('.first-time-flow__form button')) - it('clicks through the privacy notice', async () => { - // privacy notice - const nextScreen = await findElement(driver, By.css('.tou button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + await passwordBox.sendKeys('correct horse battery staple') + await passwordBoxConfirm.sendKeys('correct horse battery staple') - it('clicks through the phishing notice', async () => { - // phishing notice - const noticeElement = await driver.findElement(By.css('.markdown')) - await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement) - await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('.tou button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox')) + await tosCheckBox.click() - let seedPhrase + await button.click() + await delay(regularDelayMs) + }) - it('reveals the seed phrase', async () => { - const byRevealButton = By.css('.backup-phrase__secret-blocker .backup-phrase__reveal-button') - await driver.wait(until.elementLocated(byRevealButton, 10000)) - const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) - await revealSeedPhraseButton.click() - await delay(regularDelayMs) + let seedPhrase - seedPhrase = await driver.findElement(By.css('.backup-phrase__secret-words')).getText() - assert.equal(seedPhrase.split(' ').length, 12) - await delay(regularDelayMs) + it('reveals the seed phrase', async () => { + const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') + await driver.wait(until.elementLocated(byRevealButton, 10000)) + const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) + await revealSeedPhraseButton.click() + await delay(regularDelayMs) - const nextScreen = await findElement(driver, By.css('.backup-phrase button')) - await nextScreen.click() - await delay(regularDelayMs) - }) + seedPhrase = await driver.findElement(By.css('.reveal-seed-phrase__secret-words')).getText() + assert.equal(seedPhrase.split(' ').length, 12) + await delay(regularDelayMs) - async function clickWordAndWait (word) { - const xpathClass = 'backup-phrase__confirm-seed-option backup-phrase__confirm-seed-option--unselected' - const xpath = `//button[@class='${xpathClass}' and contains(text(), '${word}')]` - const word0 = await findElement(driver, By.xpath(xpath), 10000) + const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) + await nextScreen.click() + await delay(regularDelayMs) + }) - await word0.click() - await delay(tinyDelayMs) - } + async function clickWordAndWait (word) { + const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]` + const word0 = await findElement(driver, By.xpath(xpath), 10000) - async function retypeSeedPhrase (words, wasReloaded, count = 0) { - try { - if (wasReloaded) { - const byRevealButton = By.css('.backup-phrase__secret-blocker .backup-phrase__reveal-button') - await driver.wait(until.elementLocated(byRevealButton, 10000)) - const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) - await revealSeedPhraseButton.click() - await delay(regularDelayMs) - - const nextScreen = await findElement(driver, By.css('.backup-phrase button')) - await nextScreen.click() - await delay(regularDelayMs) - } + await word0.click() + await delay(tinyDelayMs) + } - for (let i = 0; i < 12; i++) { - await clickWordAndWait(words[i]) - } - } catch (e) { - if (count > 2) { - throw e - } else { - await loadExtension(driver, extensionId) - await retypeSeedPhrase(words, true, count + 1) + async function retypeSeedPhrase (words, wasReloaded, count = 0) { + try { + if (wasReloaded) { + const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button') + await driver.wait(until.elementLocated(byRevealButton, 10000)) + const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000) + await revealSeedPhraseButton.click() + await delay(regularDelayMs) + + const nextScreen = await findElement(driver, By.css('button.first-time-flow__button')) + await nextScreen.click() + await delay(regularDelayMs) + } + + for (let i = 0; i < 12; i++) { + await clickWordAndWait(words[i]) + } + } catch (e) { + if (count > 2) { + throw e + } else { + await loadExtension(driver, extensionId) + await retypeSeedPhrase(words, true, count + 1) + } } } - } - it('can retype the seed phrase', async () => { - const words = seedPhrase.split(' ') + it('can retype the seed phrase', async () => { + const words = seedPhrase.split(' ') - await retypeSeedPhrase(words) + await retypeSeedPhrase(words) - const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) - await confirm.click() - await delay(regularDelayMs) - }) + const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`)) + await confirm.click() + await delay(regularDelayMs) + }) - it('clicks through the deposit modal', async () => { - const byBuyModal = By.css('span .modal') - const buyModal = await driver.wait(until.elementLocated(byBuyModal)) - const closeModal = await findElement(driver, By.css('.page-container__header-close')) - await closeModal.click() - await driver.wait(until.stalenessOf(buyModal)) - await delay(regularDelayMs) + it('clicks through the success screen', async () => { + await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`)) + const doneButton = await findElement(driver, By.css('button.first-time-flow__button')) + await doneButton.click() + await delay(regularDelayMs) + }) }) - }) describe('Show account information', () => { it('show account details dropdown menu', async () => { @@ -322,19 +272,24 @@ describe('MetaMask', function () { const inputValue = await inputAmount.getAttribute('value') assert.equal(inputValue, '1') + await delay(regularDelayMs) + }) + it('opens and closes the gas modal', async function () { // Set the gas limit - const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button')) + const configureGas = await findElement(driver, By.css('.advanced-gas-options-btn')) await configureGas.click() await delay(regularDelayMs) const gasModal = await driver.findElement(By.css('span .modal')) - const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`)) + const save = await findElement(driver, By.css('.page-container__header-close-text')) await save.click() - await driver.wait(until.stalenessOf(gasModal)) + await driver.wait(until.stalenessOf(gasModal), 10000) await delay(regularDelayMs) + }) + it('clicks through to the confirm screen', async function () { // Continue to next screen const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`)) await nextScreen.click() |