E2e send tests (#14568)

* update fill method

* remove redundant steps

* remove arbitrary delays

test/e2e/tests/edit-gas-fee.spec.js

@@ -3,9 +3,7 @@ const {
   convertToHexValue,
   connectDappWithExtensionPopup,
   getWindowHandles,
-  largeDelayMs,
   withFixtures,
-  regularDelayMs,
 } = require('../helpers');
 
 describe('Editing Confirm Transaction', function () {
@@ -69,7 +67,6 @@ describe('Editing Confirm Transaction', function () {
 
         // confirms the transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
-        await driver.delay(regularDelayMs);
 
         await driver.clickElement('[data-testid="home__activity-tab"]');
         await driver.wait(async () => {
@@ -124,55 +121,35 @@ describe('Editing Confirm Transaction', function () {
           tag: 'span',
         });
         await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]');
-        await driver.delay(regularDelayMs);
 
         // enter max fee
-        const maxBaseFee = await driver.findElement(
-          '[data-testid="base-fee-input"]',
-        );
-        await maxBaseFee.clear();
-        await maxBaseFee.sendKeys('8');
-        await driver.delay(regularDelayMs);
+        await driver.fill('[data-testid="base-fee-input"]', '8');
 
         // enter priority fee
-        const priorityFee = await driver.findElement(
-          '[data-testid="priority-fee-input"]',
-        );
-        await priorityFee.clear();
-        await priorityFee.sendKeys('8');
-        await driver.delay(regularDelayMs);
+        await driver.fill('[data-testid="priority-fee-input"]', '8');
 
         // save default values
         await driver.clickElement('input[type="checkbox"]');
-        await driver.delay(regularDelayMs);
 
         // edit gas limit
         await driver.clickElement('[data-testid="advanced-gas-fee-edit"]');
-        await driver.delay(regularDelayMs);
-        const gasLimit = await driver.findElement(
-          '[data-testid="gas-limit-input"]',
-        );
-        await gasLimit.clear();
-        await gasLimit.sendKeys('100000');
-        await driver.delay(regularDelayMs);
+        await driver.fill('[data-testid="gas-limit-input"]', '100000');
 
         // Submit gas fee changes
         await driver.clickElement({ text: 'Save', tag: 'button' });
-        await driver.delay(largeDelayMs);
 
         // has correct updated value on the confirm screen the transaction
-        const editedTransactionAmounts = await driver.findElements(
-          '.transaction-detail-item__row .transaction-detail-item__detail-values .currency-display-component__text:last-of-type',
-        );
-        const editedTransactionAmount = editedTransactionAmounts[0];
-        assert.equal(await editedTransactionAmount.getText(), '0.0008');
-
-        const editedTransactionFee = editedTransactionAmounts[1];
-        assert.equal(await editedTransactionFee.getText(), '2.2008');
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(1) h6:nth-of-type(2)',
+          text: '0.0008 ETH',
+        });
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(2) h6:nth-of-type(2)',
+          text: '2.2008 ETH',
+        });
 
         // confirms the transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
-        await driver.delay(regularDelayMs);
 
         await driver.clickElement('[data-testid="home__activity-tab"]');
         await driver.wait(async () => {
@@ -226,7 +203,6 @@ describe('Editing Confirm Transaction', function () {
         // check transaction in extension popup
         const windowHandles = await getWindowHandles(driver, 3);
         await driver.switchToWindow(windowHandles.popup);
-        await driver.delay(largeDelayMs);
         await driver.waitForSelector({ text: '🌐' });
         await driver.waitForSelector({
           text: 'Site suggested',
@@ -240,7 +216,6 @@ describe('Editing Confirm Transaction', function () {
         await driver.clickElement(
           '[data-testid="edit-gas-fee-item-dappSuggested"]',
         );
-        await driver.delay(regularDelayMs);
 
         const transactionAmounts = await driver.findElements(
           '.currency-display-component__text',
@@ -260,7 +235,6 @@ describe('Editing Confirm Transaction', function () {
 
         // confirms the transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
-        await driver.delay(regularDelayMs);
 
         // transaction should correct values in activity tab
         await driver.switchToWindow(windowHandles.extension);

test/e2e/tests/send-edit.spec.js

@@ -1,11 +1,5 @@
 const { strict: assert } = require('assert');
-const {
-  convertToHexValue,
-  withFixtures,
-  tinyDelayMs,
-  regularDelayMs,
-  largeDelayMs,
-} = require('../helpers');
+const { convertToHexValue, withFixtures } = require('../helpers');
 
 describe('Editing Confirm Transaction', function () {
   it('goes back from confirm page to edit eth value, gas price and gas limit', async function () {
@@ -46,36 +40,27 @@ describe('Editing Confirm Transaction', function () {
 
         await driver.clickElement({ text: 'Next', tag: 'button' });
 
-        await driver.delay(regularDelayMs);
-
         await driver.clickElement({ text: 'Edit', tag: 'button' });
 
         const [gasLimitInput, gasPriceInput] = await driver.findElements(
           'input[type="number"]',
         );
-
         await gasPriceInput.fill('8');
-        await driver.delay(tinyDelayMs);
-
         await gasLimitInput.fill('100000');
-        await driver.delay(largeDelayMs);
-
         await driver.clickElement({ text: 'Save', tag: 'button' });
-        await driver.delay(largeDelayMs);
 
         // has correct updated value on the confirm screen the transaction
-        const editedTransactionAmounts = await driver.findElements(
-          '.transaction-detail-item__row .transaction-detail-item__detail-values .currency-display-component__text:last-of-type',
-        );
-        const editedTransactionAmount = editedTransactionAmounts[0];
-        assert.equal(await editedTransactionAmount.getText(), '0.0008');
-
-        const editedTransactionFee = editedTransactionAmounts[1];
-        assert.equal(await editedTransactionFee.getText(), '2.2008');
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(1) h6:nth-of-type(2)',
+          text: '0.0008 ETH',
+        });
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(2) h6:nth-of-type(2)',
+          text: '2.2008 ETH',
+        });
 
         // confirms the transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
-        await driver.delay(regularDelayMs);
 
         await driver.clickElement('[data-testid="home__activity-tab"]');
         await driver.wait(async () => {
@@ -137,55 +122,34 @@ describe('Editing Confirm Transaction', function () {
         // open gas fee popover
         await driver.clickElement({ text: 'Edit', tag: 'button' });
 
-        // show gas limit
-        await driver.clickElement('[data-testid="advanced-gas-fee-edit"]');
-        await driver.delay(largeDelayMs);
-
         // enter max fee
-        const maxBaseFee = await driver.findElement(
-          '[data-testid="base-fee-input"]',
-        );
-        await maxBaseFee.clear();
-        await maxBaseFee.sendKeys('8');
-        await driver.delay(regularDelayMs);
+        await driver.fill('[data-testid="base-fee-input"]', '8');
 
         // enter priority fee
-        const priorityFee = await driver.findElement(
-          '[data-testid="priority-fee-input"]',
-        );
-        await priorityFee.clear();
-        await priorityFee.sendKeys('8');
-        await driver.delay(regularDelayMs);
+        await driver.fill('[data-testid="priority-fee-input"]', '8');
 
         // edit gas limit
-        const gasLimit = await driver.findElement(
-          '[data-testid="gas-limit-input"]',
-        );
-        await gasLimit.clear();
-        await gasLimit.sendKeys('100000');
-        await driver.delay(regularDelayMs);
+        await driver.clickElement('[data-testid="advanced-gas-fee-edit"]');
+        await driver.fill('[data-testid="gas-limit-input"]', '100000');
 
         // save default values
         await driver.clickElement('input[type="checkbox"]');
-        await driver.delay(regularDelayMs);
 
         // Submit gas fee changes
         await driver.clickElement({ text: 'Save', tag: 'button' });
-        await driver.delay(largeDelayMs);
 
         // has correct updated value on the confirm screen the transaction
-        const editedTransactionAmounts = await driver.findElements(
-          '.transaction-detail-item__row .transaction-detail-item__detail-values .currency-display-component__text:last-of-type',
-        );
-        const editedTransactionAmount = editedTransactionAmounts[0];
-        assert.equal(await editedTransactionAmount.getText(), '0.0008');
-
-        const editedTransactionFee = editedTransactionAmounts[1];
-        assert.equal(await editedTransactionFee.getText(), '2.2008');
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(1) h6:nth-of-type(2)',
+          text: '0.0008 ETH',
+        });
+        await driver.waitForSelector({
+          css: '.transaction-detail-item:nth-of-type(2) h6:nth-of-type(2)',
+          text: '2.2008 ETH',
+        });
 
         // confirms the transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
-        await driver.delay(regularDelayMs);
 
         await driver.clickElement('[data-testid="home__activity-tab"]');
         await driver.wait(async () => {

test/e2e/tests/send-eth.spec.js

@@ -225,8 +225,6 @@ describe('Send ETH from dapp using advanced gas controls', function () {
         });
         const inputs = await driver.findElements('input[type="number"]');
         const gasPriceInput = inputs[1];
-        await gasPriceInput.press(driver.Key.BACK_SPACE);
-        await gasPriceInput.press(driver.Key.BACK_SPACE);
         await gasPriceInput.fill('100');
         await driver.waitForSelector({
           css: '.transaction-total-banner',

test/e2e/webdriver/driver.js

@@ -15,7 +15,9 @@ function wrapElementWithAPI(element, driver) {
   element.press = (key) => element.sendKeys(key);
   element.fill = async (input) => {
     // The 'fill' method in playwright replaces existing input
-    await element.clear();
+    await element.sendKeys(
+      Key.chord(driver.Key.MODIFIER, 'a', driver.Key.BACK_SPACE),
+    );
     await element.sendKeys(input);
   };
   element.waitForElementState = async (state, timeout) => {
@@ -54,6 +56,9 @@ class Driver {
       BACK_SPACE: '\uE003',
       ENTER: '\uE007',
       SPACE: '\uE00D',
+      CONTROL: '\uE009',
+      COMMAND: '\uE03D',
+      MODIFIER: process.platform === 'darwin' ? Key.COMMAND : Key.CONTROL,
     };
   }
 
@@ -275,9 +280,7 @@ class Driver {
     await this.executeScript(
       `navigator.clipboard.writeText("${contentToPaste}")`,
     );
-    const modifierKey =
-      process.platform === 'darwin' ? Key.COMMAND : Key.CONTROL;
-    await this.fill(element, Key.chord(modifierKey, 'v'));
+    await this.fill(element, Key.chord(this.Key.MODIFIER, 'v'));
   }
 
   // Navigation