Merge pull request #4868 from MetaMask/further-e2e-improvements

Further new ui e2e test improvements

mascara/src/app/first-time/confirm-seed-screen.js

@@ -106,6 +106,7 @@ class ConfirmSeedScreen extends Component {
                               key={i}
                               className={classnames('backup-phrase__confirm-seed-option', {
                                 'backup-phrase__confirm-seed-option--selected': isSelected,
+                                'backup-phrase__confirm-seed-option--unselected': !isSelected,
                               })}
                               onClick={() => {
                                 if (!isSelected) {

test/e2e/beta/contract-test/contract.js

@@ -50,15 +50,20 @@ deployButton.addEventListener('click', async function (event) {
 
         console.log(`contract`, contract)
 
+        document.getElementById('contractStatus').innerHTML = 'Deployed'
+
         depositButton.addEventListener('click', function (event) {
+          document.getElementById('contractStatus').innerHTML = 'Deposit initiated'
           contract.deposit({ from: web3.eth.accounts[0], value: '0x3782dace9d900000' }, function (result) {
             console.log(result)
+            document.getElementById('contractStatus').innerHTML = 'Deposit completed'
           })
         })
 
         withdrawButton.addEventListener('click', function (event) {
           contract.withdraw('0xde0b6b3a7640000', { from: web3.eth.accounts[0] }, function (result) {
             console.log(result)
+            document.getElementById('contractStatus').innerHTML = 'Withdrawn'
           })
         })
       }

test/e2e/beta/contract-test/index.html

@@ -10,6 +10,9 @@
       <button id="depositButton">Deposit</button>
       <button id="withdrawButton">Withdraw</button>
     </div>
+    <div id="contractStatus" style="display: flex; font-size: 1rem;">
+      Not yet deployed
+    </div>
   </div>
   <div style="display: flex; flex-flow: column;">
     <div style="display: flex; font-size: 1.25rem;">Send eth</div>

test/e2e/beta/from-import-beta-ui.spec.js

@@ -232,7 +232,7 @@ describe('Using MetaMask with an existing account', function () {
 
       const [localhost] = await findElements(driver, By.xpath(`//span[contains(text(), 'Localhost')]`))
       await localhost.click()
-      await delay(largeDelayMs * 2)
+      await delay(largeDelayMs)
     })
 
     it('choose Create Account from the account menu', async () => {

test/e2e/beta/metamask-beta-ui.spec.js

@@ -195,7 +195,16 @@ describe('MetaMask', function () {
       await delay(regularDelayMs)
     })
 
-    async function retypeSeedPhrase (words, wasReloaded) {
+    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)
+
+      await word0.click()
+      await delay(tinyDelayMs)
+    }
+
+    async function retypeSeedPhrase (words, wasReloaded, count = 0) {
       try {
         if (wasReloaded) {
           const byRevealButton = By.css('.backup-phrase__secret-blocker .backup-phrase__reveal-button')
@@ -209,67 +218,26 @@ describe('MetaMask', function () {
           await delay(regularDelayMs)
         }
 
-        const word0 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[0]}')]`), 10000)
+        await clickWordAndWait(words[0])
+        await clickWordAndWait(words[1])
+        await clickWordAndWait(words[2])
+        await clickWordAndWait(words[3])
+        await clickWordAndWait(words[4])
+        await clickWordAndWait(words[5])
+        await clickWordAndWait(words[6])
+        await clickWordAndWait(words[7])
+        await clickWordAndWait(words[8])
+        await clickWordAndWait(words[9])
+        await clickWordAndWait(words[10])
+        await clickWordAndWait(words[11])
 
-        await word0.click()
-        await delay(tinyDelayMs)
-
-        const word1 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[1]}')]`), 10000)
-
-        await word1.click()
-        await delay(tinyDelayMs)
-
-        const word2 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[2]}')]`), 10000)
-
-        await word2.click()
-        await delay(tinyDelayMs)
-
-        const word3 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[3]}')]`), 10000)
-
-        await word3.click()
-        await delay(tinyDelayMs)
-
-        const word4 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[4]}')]`), 10000)
-
-        await word4.click()
-        await delay(tinyDelayMs)
-
-        const word5 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[5]}')]`), 10000)
-
-        await word5.click()
-        await delay(tinyDelayMs)
-
-        const word6 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[6]}')]`), 10000)
-
-        await word6.click()
-        await delay(tinyDelayMs)
-
-        const word7 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[7]}')]`), 10000)
-
-        await word7.click()
-        await delay(tinyDelayMs)
-
-        const word8 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[8]}')]`), 10000)
-
-        await word8.click()
-        await delay(tinyDelayMs)
-
-        const word9 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[9]}')]`), 10000)
-
-        await word9.click()
-        await delay(tinyDelayMs)
-
-        const word10 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[10]}')]`), 10000)
-
-        await word10.click()
-        await delay(tinyDelayMs)
-
-        const word11 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[11]}')]`), 10000)
-        await word11.click()
-        await delay(tinyDelayMs)
       } catch (e) {
-        await loadExtension(driver, extensionId)
+        if (count > 2) {
-        await retypeSeedPhrase(words, true)
+          throw e
+        } else {
+          await loadExtension(driver, extensionId)
+          await retypeSeedPhrase(words, true, count + 1)
+        }
       }
     }
 
@@ -516,7 +484,7 @@ describe('MetaMask', function () {
 
     it('displays the contract creation data', async () => {
       const dataTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Data')]`))
-      dataTab.click()
+      await dataTab.click()
       await delay(regularDelayMs)
 
       await findElement(driver, By.xpath(`//div[contains(text(), '127.0.0.1')]`))
@@ -526,7 +494,7 @@ describe('MetaMask', function () {
       assert.equal(confirmDataText.match(/0x608060405234801561001057600080fd5b5033600160006101000a81548173ffffffffffffffffffffffffffffffffffffffff/))
 
       const detailsTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Details')]`))
-      detailsTab.click()
+      await detailsTab.click()
       await delay(regularDelayMs)
     })
 
@@ -547,9 +515,15 @@ describe('MetaMask', function () {
       await driver.switchTo().window(dapp)
       await delay(regularDelayMs)
 
+      let contractStatus = await driver.findElement(By.css('#contractStatus'))
+      await driver.wait(until.elementTextMatches(contractStatus, /Deployed/))
+
       const depositButton = await findElement(driver, By.css('#depositButton'))
       await depositButton.click()
-      await delay(regularDelayMs)
+      await delay(largeDelayMs)
+
+      contractStatus = await driver.findElement(By.css('#contractStatus'))
+      await driver.wait(until.elementTextMatches(contractStatus, /Deposit\sinitiated/))
 
       await driver.switchTo().window(extension)
       await delay(largeDelayMs)