use waitForSelector instead of until (#10852)

* complete abstraction of until method * response to feedback
MetaMask · Apr 13, 2021 · 57be0e4 · 57be0e4
1 parent 7fb4e09
commit 57be0e4
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 98 deletions.
diff --git a/test/e2e/from-import-ui.spec.js b/test/e2e/from-import-ui.spec.js
@@ -1,6 +1,4 @@
 const assert = require('assert');
-const { until } = require('selenium-webdriver');
-
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const { regularDelayMs, largeDelayMs } = require('./helpers');
 const { buildWebDriver } = require('./webdriver');
@@ -126,11 +124,13 @@ describe('Using MetaMask with an existing account', function () {
         '[data-testid="account-options-menu__account-details"]',
       );
       await driver.findVisibleElement('.qr-code__wrapper');
-      const detailModal = await driver.findElement('span .modal');
+      // wait for details modal to be visible
+      const detailsModal = await driver.findVisibleElement('span .modal');
       await driver.delay(regularDelayMs);
 
       await driver.clickElement('.account-modal__close');
-      await driver.wait(until.stalenessOf(detailModal));
+      // wait for details modal to be removed from DOM
+      await detailsModal.waitForElementState('hidden');
       await driver.delay(regularDelayMs);
     });
   });
@@ -213,10 +213,11 @@ describe('Using MetaMask with an existing account', function () {
       await driver.clickElement('.advanced-gas-options-btn');
       await driver.delay(regularDelayMs);
 
-      const gasModal = await driver.findElement('span .modal');
+      // wait for gas modal to be visible
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement({ text: 'Save', tag: 'button' });
-      await driver.wait(until.stalenessOf(gasModal));
-      await driver.delay(regularDelayMs);
+      // wait for gas modal to be removed from DOM
+      await gasModal.waitForElementState('hidden');
 
       // Continue to next screen
       await driver.clickElement({ text: 'Next', tag: 'button' });

diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js
@@ -1,5 +1,4 @@
 const assert = require('assert');
-const { until } = require('selenium-webdriver');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers');
@@ -109,11 +108,13 @@ describe('MetaMask', function () {
       const addressInput = await driver.findElement('.readonly-input__input');
       publicAddress = await addressInput.getAttribute('value');
 
-      const accountModal = await driver.findElement('span .modal');
+      // wait for account modal to be visible
+      const accountModal = await driver.findVisibleElement('span .modal');
 
       await driver.clickElement('.account-modal__close');
 
-      await driver.wait(until.stalenessOf(accountModal));
+      // wait for account modal to be removed from DOM
+      await accountModal.waitForElementState('hidden');
       await driver.delay(regularDelayMs);
     });
   });
@@ -134,22 +135,24 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs);
       await driver.clickElement('#send');
 
-      const txStatus = await driver.findElement('#success');
-      await driver.wait(until.elementTextMatches(txStatus, /Success/u), 15000);
+      await driver.waitForSelector(
+        { css: '#success', text: 'Success' },
+        { timeout: 15000 },
+      );
     });
 
     it('switches back to MetaMask', async function () {
       await driver.switchToWindow(extension);
     });
 
     it('should have the correct amount of eth', async function () {
-      const balances = await driver.findElements(
-        '.currency-display-component__text',
-      );
-      await driver.wait(until.elementTextMatches(balances[0], /1/u), 15000);
-      const balance = await balances[0].getText();
+      const currencyDisplay = await driver.waitForSelector({
+        css: '.currency-display-component__text',
+        text: '1',
+      });
+      const balance = await currencyDisplay.getText();
 
-      assert.equal(balance, '1');
+      assert.strictEqual(balance, '1');
     });
   });
 
@@ -213,13 +216,13 @@ describe('MetaMask', function () {
     });
 
     it('should have the correct amount of eth', async function () {
-      const balances = await driver.findElements(
-        '.currency-display-component__text',
-      );
-      await driver.wait(until.elementTextMatches(balances[0], /1/u), 15000);
-      const balance = await balances[0].getText();
+      const currencyDisplay = await driver.waitForSelector({
+        css: '.currency-display-component__text',
+        text: '1',
+      });
+      const balance = await currencyDisplay.getText();
 
-      assert.equal(balance, '1');
+      assert.strictEqual(balance, '1');
     });
 
     it('should not show a backup reminder', async function () {

diff --git a/test/e2e/metamask-responsive-ui.spec.js b/test/e2e/metamask-responsive-ui.spec.js
@@ -1,5 +1,4 @@
 const assert = require('assert');
-const { until } = require('selenium-webdriver');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers');
@@ -194,10 +193,10 @@ describe('MetaMask', function () {
     });
 
     it('balance renders', async function () {
-      const balance = await driver.findElement(
-        '[data-testid="eth-overview__primary-currency"]',
-      );
-      await driver.wait(until.elementTextMatches(balance, /100\s*ETH/u));
+      await driver.waitForSelector({
+        css: '[data-testid="eth-overview__primary-currency"]',
+        text: '100 ETH',
+      });
       await driver.delay(regularDelayMs);
     });
   });
@@ -224,10 +223,11 @@ describe('MetaMask', function () {
       await driver.clickElement('.advanced-gas-options-btn');
       await driver.delay(regularDelayMs);
 
-      const gasModal = await driver.findElement('span .modal');
-
+      // wait for gas modal to be visible
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement('.page-container__header-close-text');
-      await driver.wait(until.stalenessOf(gasModal), 10000);
+      // wait for gas modal to be removed from dom
+      await gasModal.waitForElementState('hidden');
       await driver.delay(regularDelayMs);
     });
 
@@ -250,10 +250,13 @@ describe('MetaMask', function () {
         return confirmedTxes.length === 1;
       }, 10000);
 
-      const txValues = await driver.findElement(
-        '.transaction-list-item__primary-currency',
+      await driver.waitForSelector(
+        {
+          css: '.transaction-list-item__primary-currency',
+          text: '-1 ETH',
+        },
+        { timeout: 10000 },
       );
-      await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/u), 10000);
     });
   });
 });
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -142,11 +142,11 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs);
 
       // wait for permission modal to be visible.
-      await driver.waitForSelector('span .modal');
+      const permissionModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement('.account-modal__close');
 
-      // wait for account modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      // wait for permission modal to be removed from DOM.
+      await permissionModal.waitForElementState('hidden');
       await driver.delay(regularDelayMs);
     });
   });
@@ -377,12 +377,13 @@ describe('MetaMask', function () {
       await driver.clickElement('.advanced-gas-options-btn');
       await driver.delay(regularDelayMs);
 
+      // wait for gas modal to be visible
+      const gasModal = await driver.findVisibleElement('span .modal');
+
       await driver.clickElement({ text: 'Save', tag: 'button' });
 
       // Wait for gas modal to be removed from DOM
-      await driver.waitForSelector('span .modal', {
-        state: 'detached',
-      });
+      await gasModal.waitForElementState('hidden');
       await driver.delay(regularDelayMs);
 
       // Continue to next screen
@@ -854,8 +855,8 @@ describe('MetaMask', function () {
 
       // Set the gas limit
       await driver.clickElement('.confirm-detail-row__header-text--edit');
-      // wait for gas modal to be detached from DOM
-      await driver.waitForSelector('span .modal');
+      // wait for gas modal to be visible.
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement('.page-container__tab:nth-of-type(2)');
       await driver.delay(regularDelayMs);
 
@@ -875,7 +876,7 @@ describe('MetaMask', function () {
       await driver.clickElement({ text: 'Save', tag: 'button' });
 
       // wait for gas modal to be detached from DOM
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      await gasModal.waitForElementState('hidden');
 
       await driver.clickElement({ text: 'Confirm', tag: 'button' });
       await driver.delay(regularDelayMs);
@@ -1044,12 +1045,12 @@ describe('MetaMask', function () {
     it('opens customize gas modal and saves options to continue', async function () {
       await driver.clickElement('.advanced-gas-options-btn');
 
-      // Wait for gas modal to be visible
-      await driver.waitForSelector('span .modal');
+      // wait for gas modal to be visible
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.findElement('.page-container__title');
       await driver.clickElement({ text: 'Save', tag: 'button' });
       // wait for gas modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      await gasModal.waitForElementState('hidden');
     });
 
     it('transitions to the confirm screen', async function () {
@@ -1152,16 +1153,14 @@ describe('MetaMask', function () {
       );
       const transactionAmount = transactionAmounts[0];
       assert(await transactionAmount.getText(), '1.5 TST');
+    });
 
+    it('customizes gas', async function () {
       // Set the gas limit
       await driver.clickElement('.confirm-detail-row__header-text--edit');
       await driver.delay(regularDelayMs);
-
       // wait for gas modal to be visible
-      await driver.waitForSelector('span .modal');
-    });
-
-    it('customizes gas', async function () {
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement('.page-container__tab:nth-of-type(2)');
       await driver.delay(regularDelayMs);
 
@@ -1178,10 +1177,8 @@ describe('MetaMask', function () {
 
       await driver.clickElement('.page-container__footer-button');
 
-      // Wait for gas modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', {
-        state: 'detached',
-      });
+      // wait for gas modal to be removed from DOM.
+      await gasModal.waitForElementState('hidden');
 
       const gasFeeInputs = await driver.findElements(
         '.confirm-detail-row__primary',
@@ -1286,17 +1283,14 @@ describe('MetaMask', function () {
       );
     });
 
-    it('opens the gas edit modal', async function () {
+    it('customizes gas', async function () {
       await driver.clickElement(
         '.confirm-approve-content__small-blue-text.cursor-pointer',
       );
       await driver.delay(regularDelayMs);
 
-      // Wait for the gas modal to be visible
-      await driver.waitForSelector('span .modal');
-    });
-
-    it('customizes gas', async function () {
+      // wait for gas modal to be visible
+      const gasModal = await driver.findVisibleElement('span .modal');
       await driver.clickElement('.page-container__tab:nth-of-type(2)');
       await driver.delay(regularDelayMs);
 
@@ -1313,10 +1307,8 @@ describe('MetaMask', function () {
 
       await driver.clickElement('.page-container__footer-button');
 
-      // wait for the gas modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', {
-        state: 'detached',
-      });
+      // wait for gas modal to be removed from DOM.
+      await gasModal.waitForElementState('hidden');
 
       const gasFeeInEth = await driver.findElement(
         '.confirm-approve-content__transaction-details-content__secondary-fee',
@@ -1331,7 +1323,7 @@ describe('MetaMask', function () {
       await editButtons[1].click();
 
       // wait for permission modal to be visible
-      await driver.waitForSelector('span .modal');
+      const permissionModal = await driver.findVisibleElement('span .modal');
       const radioButtons = await driver.findClickableElements(
         '.edit-approval-permission__edit-section__radio-button',
       );
@@ -1343,7 +1335,7 @@ describe('MetaMask', function () {
       await driver.clickElement({ text: 'Save', tag: 'button' });
 
       // wait for permission modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      await permissionModal.waitForElementState('hidden');
 
       const permissionInfo = await driver.findElements(
         '.confirm-approve-content__medium-text',
@@ -1521,14 +1513,14 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="token-options__hide"]');
 
       // wait for confirm hide modal to be visible
-      await driver.waitForSelector('span .modal');
+      const confirmHideModal = await driver.findVisibleElement('span .modal');
 
       await driver.clickElement(
         '[data-testid="hide-token-confirmation__hide"]',
       );
 
       // wait for confirm hide modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      await confirmHideModal.waitForElementState('hidden');
     });
   });
 
@@ -1649,15 +1641,15 @@ describe('MetaMask', function () {
       await driver.clickElement('.btn-danger');
       await driver.delay(regularDelayMs);
 
-      // wait for confirm delete modal to be visible.
-      await driver.waitForSelector('span .modal');
+      // wait for confirm delete modal to be visible
+      const confirmDeleteModal = await driver.findVisibleElement('span .modal');
 
       await driver.clickElement(
         '.button.btn-danger.modal-container__footer-button',
       );
 
       // wait for confirm delete modal to be removed from DOM.
-      await driver.waitForSelector('span .modal', { state: 'detached' });
+      await confirmDeleteModal.waitForElementState('hidden');
 
       const newNetworkListItems = await driver.findElements(
         '.networks-tab__networks-list-name',