add key literals to driver (#10854)

test/e2e/benchmark.js

@@ -3,7 +3,6 @@
 const path = require('path');
 const { promises: fs, constants: fsConstants } = require('fs');
 const ttest = require('ttest');
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('./helpers');
 const { PAGES } = require('./webdriver/driver');
 
@@ -14,9 +13,8 @@ async function measurePage(pageName) {
   let metrics;
   await withFixtures({ fixtures: 'imported-account' }, async ({ driver }) => {
     await driver.navigate();
-    const passwordField = await driver.findElement('#password');
+    await driver.fill('#password', 'correct horse battery staple');
-    await passwordField.sendKeys('correct horse battery staple');
+    await driver.press('#password', driver.Key.ENTER);
-    await passwordField.sendKeys(Key.ENTER);
     await driver.findElement('.selected-account__name');
     await driver.navigate(pageName);
     await driver.delay(1000);

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

@@ -1,5 +1,5 @@
 const assert = require('assert');
-const { Key, until } = require('selenium-webdriver');
+const { until } = require('selenium-webdriver');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const { regularDelayMs, largeDelayMs } = require('./helpers');
@@ -79,16 +79,14 @@ describe('Using MetaMask with an existing account', function () {
     });
 
     it('imports a seed phrase', async function () {
-      const [seedTextArea] = await driver.findElements(
+      await driver.fill(
         'input[placeholder="Paste seed phrase from clipboard"]',
+        testSeedPhrase,
       );
-      await seedTextArea.sendKeys(testSeedPhrase);
       await driver.delay(regularDelayMs);
 
-      const [password] = await driver.findElements('#password');
+      await driver.fill('#password', 'correct horse battery staple');
-      await password.sendKeys('correct horse battery staple');
+      await driver.fill('#confirm-password', 'correct horse battery staple');
-      const [confirmPassword] = await driver.findElements('#confirm-password');
-      confirmPassword.sendKeys('correct horse battery staple');
 
       await driver.clickElement('.first-time-flow__terms');
 
@@ -151,9 +149,8 @@ describe('Using MetaMask with an existing account', function () {
     });
 
     it('accepts the account password after lock', async function () {
-      const passwordField = await driver.findElement('#password');
+      await driver.fill('#password', 'correct horse battery staple');
-      await passwordField.sendKeys('correct horse battery staple');
+      await driver.press('#password', driver.Key.ENTER);
-      await passwordField.sendKeys(Key.ENTER);
       await driver.delay(largeDelayMs);
     });
   });
@@ -176,10 +173,7 @@ describe('Using MetaMask with an existing account', function () {
     });
 
     it('set account name', async function () {
-      const [accountName] = await driver.findElements(
+      await driver.fill('.new-account-create-form input', '2nd account');
-        '.new-account-create-form input',
-      );
-      await accountName.sendKeys('2nd account');
       await driver.delay(regularDelayMs);
 
       await driver.clickElement({ text: 'Create', tag: 'button' });
@@ -208,13 +202,12 @@ describe('Using MetaMask with an existing account', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
-      const inputAmount = await driver.findElement('.unit-input__input');
+      await driver.fill('.unit-input__input', '1');
-      await inputAmount.sendKeys('1');
 
       // Set the gas limit
       await driver.clickElement('.advanced-gas-options-btn');
@@ -262,8 +255,7 @@ describe('Using MetaMask with an existing account', function () {
     });
 
     it('enter private key', async function () {
-      const privateKeyInput = await driver.findElement('#private-key-box');
+      await driver.fill('#private-key-box', testPrivateKey2);
-      await privateKeyInput.sendKeys(testPrivateKey2);
       await driver.delay(regularDelayMs);
       await driver.clickElement({ text: 'Import', tag: 'button' });
       await driver.delay(regularDelayMs);
@@ -299,8 +291,7 @@ describe('Using MetaMask with an existing account', function () {
     });
 
     it('enter private key', async function () {
-      const privateKeyInput = await driver.findElement('#private-key-box');
+      await driver.fill('#private-key-box', testPrivateKey3);
-      await privateKeyInput.sendKeys(testPrivateKey3);
       await driver.delay(regularDelayMs);
       await driver.clickElement({ text: 'Import', tag: 'button' });
       await driver.delay(regularDelayMs);

test/e2e/incremental-security.spec.js

@@ -77,16 +77,15 @@ describe('MetaMask', function () {
     });
 
     it('accepts a secure password', async function () {
-      const passwordBox = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #create-password',
+        'correct horse battery staple',
       );
-      const passwordBoxConfirm = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #confirm-password',
+        'correct horse battery staple',
       );
 
-      await passwordBox.sendKeys('correct horse battery staple');
-      await passwordBoxConfirm.sendKeys('correct horse battery staple');
-
       await driver.clickElement('.first-time-flow__checkbox');
 
       await driver.clickElement('.first-time-flow__form button');
@@ -131,10 +130,8 @@ describe('MetaMask', function () {
     });
 
     it('sends eth to the current account', async function () {
-      const addressInput = await driver.findElement('#address');
+      await driver.fill('#address', publicAddress);
-      await addressInput.sendKeys(publicAddress);
       await driver.delay(regularDelayMs);
-
       await driver.clickElement('#send');
 
       const txStatus = await driver.findElement('#success');

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

@@ -66,16 +66,15 @@ describe('MetaMask', function () {
     });
 
     it('accepts a secure password', async function () {
-      const passwordBox = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #create-password',
+        'correct horse battery staple',
       );
-      const passwordBoxConfirm = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #confirm-password',
+        'correct horse battery staple',
       );
 
-      await passwordBox.sendKeys('correct horse battery staple');
-      await passwordBoxConfirm.sendKeys('correct horse battery staple');
-
       await driver.clickElement('.first-time-flow__checkbox');
 
       await driver.clickElement('.first-time-flow__form button');
@@ -172,15 +171,11 @@ describe('MetaMask', function () {
 
       await driver.clickElement('.import-account__checkbox-container');
 
-      const seedTextArea = await driver.findElement('textarea');
+      await driver.fill('.import-account__secret-phrase', testSeedPhrase);
-      await seedTextArea.sendKeys(testSeedPhrase);
-      await driver.delay(regularDelayMs);
-
-      const passwordInputs = await driver.findElements('input');
       await driver.delay(regularDelayMs);
 
-      await passwordInputs[0].sendKeys('correct horse battery staple');
+      await driver.fill('#password', 'correct horse battery staple');
-      await passwordInputs[1].sendKeys('correct horse battery staple');
+      await driver.fill('#confirm-password', 'correct horse battery staple');
       await driver.clickElement({
         text: enLocaleMessages.restore.message,
         tag: 'button',
@@ -212,13 +207,12 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
-      const inputAmount = await driver.findElement('.unit-input__input');
+      const inputAmount = await driver.fill('.unit-input__input', '1');
-      await inputAmount.sendKeys('1');
 
       const inputValue = await inputAmount.getAttribute('value');
       assert.equal(inputValue, '1');

test/e2e/metamask-ui.spec.js

@@ -1,5 +1,4 @@
 const assert = require('assert');
-const { Key } = require('selenium-webdriver');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
 const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers');
@@ -67,16 +66,15 @@ describe('MetaMask', function () {
     });
 
     it('accepts a secure password', async function () {
-      const passwordBox = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #create-password',
+        'correct horse battery staple',
       );
-      const passwordBoxConfirm = await driver.findElement(
+      await driver.fill(
         '.first-time-flow__form #confirm-password',
+        'correct horse battery staple',
       );
 
-      await passwordBox.sendKeys('correct horse battery staple');
-      await passwordBoxConfirm.sendKeys('correct horse battery staple');
-
       await driver.clickElement('.first-time-flow__checkbox');
 
       await driver.clickElement('.first-time-flow__form button');
@@ -167,9 +165,8 @@ describe('MetaMask', function () {
     });
 
     it('accepts the account password after lock', async function () {
-      const passwordField = await driver.findElement('#password');
+      await driver.fill('#password', 'correct horse battery staple');
-      await passwordField.sendKeys('correct horse battery staple');
+      await driver.press('#password', driver.Key.ENTER);
-      await passwordField.sendKeys(Key.ENTER);
       await driver.delay(largeDelayMs * 4);
     });
   });
@@ -184,10 +181,7 @@ describe('MetaMask', function () {
     });
 
     it('set account name', async function () {
-      const accountName = await driver.findElement(
+      await driver.fill('.new-account-create-form input', '2nd account');
-        '.new-account-create-form input',
-      );
-      await accountName.sendKeys('2nd account');
       await driver.delay(regularDelayMs);
 
       await driver.clickElement({ text: 'Create', tag: 'button' });
@@ -227,15 +221,11 @@ describe('MetaMask', function () {
 
       await driver.clickElement('.import-account__checkbox-container');
 
-      const seedTextArea = await driver.findElement('textarea');
+      await driver.fill('.import-account__secret-phrase', testSeedPhrase);
-      await seedTextArea.sendKeys(testSeedPhrase);
-      await driver.delay(regularDelayMs);
-
-      const passwordInputs = await driver.findElements('input');
       await driver.delay(regularDelayMs);
 
-      await passwordInputs[0].sendKeys('correct horse battery staple');
+      await driver.fill('#password', 'correct horse battery staple');
-      await passwordInputs[1].sendKeys('correct horse battery staple');
+      await driver.fill('#confirm-password', 'correct horse battery staple');
       await driver.clickElement({
         text: enLocaleMessages.restore.message,
         tag: 'button',
@@ -257,13 +247,13 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
       const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.sendKeys('1000');
+      await inputAmount.fill('1000');
 
       const errorAmount = await driver.findElement('.send-v2__error-amount');
       assert.equal(
@@ -272,11 +262,11 @@ describe('MetaMask', function () {
         'send screen should render an insufficient fund error message',
       );
 
-      await inputAmount.sendKeys(Key.BACK_SPACE);
+      await inputAmount.press(driver.Key.BACK_SPACE);
       await driver.delay(50);
-      await inputAmount.sendKeys(Key.BACK_SPACE);
+      await inputAmount.press(driver.Key.BACK_SPACE);
       await driver.delay(50);
-      await inputAmount.sendKeys(Key.BACK_SPACE);
+      await inputAmount.press(driver.Key.BACK_SPACE);
       await driver.delay(tinyDelayMs);
 
       await driver.assertElementNotPresent('.send-v2__error-amount');
@@ -294,7 +284,7 @@ describe('MetaMask', function () {
 
       assert.equal(await inputAmount.isEnabled(), true);
 
-      await inputAmount.sendKeys('1');
+      await inputAmount.fill('1');
 
       inputValue = await inputAmount.getAttribute('value');
       assert.equal(inputValue, '1');
@@ -331,13 +321,13 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
       const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.sendKeys('1');
+      await inputAmount.fill('1');
 
       const inputValue = await inputAmount.getAttribute('value');
       assert.equal(inputValue, '1');
@@ -372,13 +362,13 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
       const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.sendKeys('1');
+      await inputAmount.fill('1');
 
       const inputValue = await inputAmount.getAttribute('value');
       assert.equal(inputValue, '1');
@@ -519,14 +509,14 @@ describe('MetaMask', function () {
 
       await gasPriceInput.clear();
       await driver.delay(50);
-      await gasPriceInput.sendKeys('10');
+      await gasPriceInput.fill('10');
       await driver.delay(50);
       await driver.delay(tinyDelayMs);
       await driver.delay(50);
 
-      await gasLimitInput.clear();
+      await gasLimitInput.fill('');
       await driver.delay(50);
-      await gasLimitInput.sendKeys('25000');
+      await gasLimitInput.fill('25000');
 
       await driver.delay(1000);
 
@@ -875,14 +865,10 @@ describe('MetaMask', function () {
       const gasLimitValue = await gasLimitInput.getAttribute('value');
       assert(Number(gasLimitValue) < 100000, 'Gas Limit too high');
 
-      await gasPriceInput.clear();
+      await gasPriceInput.fill('10');
-      await driver.delay(50);
-      await gasPriceInput.sendKeys('10');
       await driver.delay(50);
 
-      await gasLimitInput.clear();
+      await gasLimitInput.fill('60001');
-      await driver.delay(50);
-      await gasLimitInput.sendKeys('60001');
 
       await driver.delay(1000);
 
@@ -1023,8 +1009,7 @@ describe('MetaMask', function () {
       });
       await driver.delay(regularDelayMs);
 
-      const newTokenAddress = await driver.findElement('#custom-address');
+      await driver.fill('#custom-address', tokenAddress);
-      await newTokenAddress.sendKeys(tokenAddress);
       await driver.delay(regularDelayMs);
 
       await driver.clickElement({ text: 'Next', tag: 'button' });
@@ -1048,13 +1033,12 @@ describe('MetaMask', function () {
       await driver.clickElement('[data-testid="eth-overview-send"]');
       await driver.delay(regularDelayMs);
 
-      const inputAddress = await driver.findElement(
+      await driver.fill(
         'input[placeholder="Search, public address (0x), or ENS"]',
+        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
       );
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
 
-      const inputAmount = await driver.findElement('.unit-input__input');
+      driver.fill('.unit-input__input', '1');
-      await inputAmount.sendKeys('1');
     });
 
     it('opens customize gas modal and saves options to continue', async function () {
@@ -1185,14 +1169,10 @@ describe('MetaMask', function () {
         '.advanced-gas-inputs__gas-edit-row__input',
       );
 
-      await gasPriceInput.clear();
+      await gasPriceInput.fill('10');
-      await driver.delay(50);
-      await gasPriceInput.sendKeys('10');
       await driver.delay(50);
 
-      await gasLimitInput.clear();
+      await gasLimitInput.fill('60000');
-      await driver.delay(50);
-      await gasLimitInput.sendKeys('60000');
 
       await driver.delay(1000);
 
@@ -1324,14 +1304,10 @@ describe('MetaMask', function () {
         '.advanced-gas-inputs__gas-edit-row__input',
       );
 
-      await gasPriceInput.clear();
+      await gasPriceInput.fill('10');
-      await driver.delay(50);
-      await gasPriceInput.sendKeys('10');
       await driver.delay(50);
 
-      await gasLimitInput.clear();
+      await gasLimitInput.fill('60001');
-      await driver.delay(50);
-      await gasLimitInput.sendKeys('60001');
 
       await driver.delay(1000);
 
@@ -1361,9 +1337,7 @@ describe('MetaMask', function () {
       );
       await radioButtons[1].click();
 
-      const customInput = await driver.findElement('input');
+      await driver.fill('input', '5');
-      await driver.delay(50);
-      await customInput.sendKeys('5');
       await driver.delay(regularDelayMs);
 
       await driver.clickElement({ text: 'Save', tag: 'button' });
@@ -1565,8 +1539,7 @@ describe('MetaMask', function () {
     });
 
     it('can pick a token from the existing options', async function () {
-      const tokenSearch = await driver.findElement('#search-tokens');
+      await driver.fill('#search-tokens', 'BAT');
-      await tokenSearch.sendKeys('BAT');
       await driver.delay(regularDelayMs);
 
       await driver.clickElement({ text: 'BAT', tag: 'span' });

test/e2e/metrics.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const waitUntilCalled = require('../lib/wait-until-called');
 const { withFixtures } = require('./helpers');
 
@@ -33,9 +32,8 @@ describe('Segment metrics', function () {
         });
         await driver.navigate();
 
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await threeSegmentEventsReceived();
 

test/e2e/tests/address-book.spec.js

@@ -1,5 +1,5 @@
 const { strict: assert } = require('assert');
-const { Key, until } = require('selenium-webdriver');
+const { until } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Address Book', function () {
@@ -22,16 +22,13 @@ describe('Address Book', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
-        const inputAddress = await driver.findElement(
+        await driver.fill(
           'input[placeholder="Search, public address (0x), or ENS"]',
-        );
-        await inputAddress.sendKeys(
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
 
@@ -39,17 +36,14 @@ describe('Address Book', function () {
 
         const addressBookAddModal = await driver.findElement('span .modal');
         await driver.findElement('.add-to-address-book-modal');
-        const addressBookInput = await driver.findElement(
+        await driver.fill('.add-to-address-book-modal__input', 'Test Name 1');
-          '.add-to-address-book-modal__input',
-        );
-        await addressBookInput.sendKeys('Test Name 1');
         await driver.clickElement(
           '.add-to-address-book-modal__footer .btn-primary',
         );
         await driver.wait(until.stalenessOf(addressBookAddModal));
 
         const inputAmount = await driver.findElement('.unit-input__input');
-        await inputAmount.sendKeys('1');
+        await inputAmount.fill('1');
 
         const inputValue = await inputAmount.getAttribute('value');
         assert.equal(inputValue, '1');
@@ -85,9 +79,8 @@ describe('Address Book', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.clickElement('[data-testid="eth-overview-send"]');
         const recipientRowTitle = await driver.findElement(
@@ -99,8 +92,7 @@ describe('Address Book', function () {
           '.send__select-recipient-wrapper__group-item',
         );
 
-        const inputAmount = await driver.findElement('.unit-input__input');
+        await driver.fill('.unit-input__input', '2');
-        await inputAmount.sendKeys('2');
 
         await driver.clickElement({ text: 'Next', tag: 'button' });
 

test/e2e/tests/localization.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Localization', function () {
@@ -17,9 +16,8 @@ describe('Localization', function () {
       { fixtures: 'localization', ganacheOptions, title: this.test.title },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
         const secondaryBalance = await driver.findElement(
           '[data-testid="eth-overview__secondary-currency"]',
         );

test/e2e/tests/permissions.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Permissions', function () {
@@ -23,9 +22,8 @@ describe('Permissions', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.openNewPage('http://127.0.0.1:8080/');
         await driver.clickElement({

test/e2e/tests/personal-sign.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Personal sign', function () {
@@ -22,9 +21,8 @@ describe('Personal sign', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.openNewPage('http://127.0.0.1:8080/');
         await driver.clickElement('#personalSign');

test/e2e/tests/provider-events.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const { withFixtures, regularDelayMs } = require('../helpers');
 
 describe('MetaMask', function () {
@@ -22,9 +21,8 @@ describe('MetaMask', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.openNewPage('http://127.0.0.1:8080/');
         const networkDiv = await driver.findElement('#network');

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

@@ -1,5 +1,5 @@
 const { strict: assert } = require('assert');
-const { Key, until } = require('selenium-webdriver');
+const { until } = require('selenium-webdriver');
 const {
   withFixtures,
   tinyDelayMs,
@@ -26,9 +26,8 @@ describe('Editing Confirm Transaction', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         const transactionAmounts = await driver.findElements(
           '.currency-display-component__text',
@@ -42,9 +41,7 @@ describe('Editing Confirm Transaction', function () {
         await driver.clickElement(
           '.confirm-page-container-header__back-button',
         );
-        const inputAmount = await driver.findElement('.unit-input__input');
+        await driver.fill('.unit-input__input', '2.2');
-        await inputAmount.clear();
-        await inputAmount.sendKeys('2.2');
 
         await driver.clickElement('.advanced-gas-options-btn');
         await driver.delay(regularDelayMs);
@@ -55,12 +52,10 @@ describe('Editing Confirm Transaction', function () {
           '.advanced-gas-inputs__gas-edit-row__input',
         );
 
-        await gasPriceInput.clear();
+        await gasPriceInput.fill('8');
-        await gasPriceInput.sendKeys('8');
         await driver.delay(tinyDelayMs);
 
-        await gasLimitInput.clear();
+        await gasLimitInput.fill('100000');
-        await gasLimitInput.sendKeys('100000');
         await driver.delay(largeDelayMs);
 
         await driver.clickElement({ text: 'Save', tag: 'button' });

test/e2e/tests/signature-request.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Signature Request', function () {
@@ -23,9 +22,8 @@ describe('Signature Request', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         await driver.openNewPage('http://127.0.0.1:8080/');
 

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

@@ -1,4 +1,3 @@
-const { Key } = require('selenium-webdriver');
 const { withFixtures } = require('../helpers');
 
 describe('Simple send', function () {
@@ -16,18 +15,14 @@ describe('Simple send', function () {
       { fixtures: 'imported-account', ganacheOptions, title: this.test.title },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement('#password');
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
         await driver.clickElement('[data-testid="eth-overview-send"]');
-        const recipientAddressField = await driver.findElement(
+        await driver.fill(
           '[data-testid="ens-input"]',
-        );
-        await recipientAddressField.sendKeys(
           '0x985c30949c92df7a0bd42e0f3e3d539ece98db24',
         );
-        const amountField = await driver.findElement('.unit-input__input');
+        await driver.fill('.unit-input__input', '1');
-        await amountField.sendKeys('1');
         await driver.clickElement('[data-testid="page-container-footer-next"]');
         await driver.clickElement('[data-testid="page-container-footer-next"]');
         await driver.clickElement('[data-testid="home__activity-tab"]');

test/e2e/tests/threebox.spec.js

@@ -1,5 +1,4 @@
 const { strict: assert } = require('assert');
-const { By, Key } = require('selenium-webdriver');
 const { withFixtures, largeDelayMs } = require('../helpers');
 const ThreeboxMockServer = require('../mock-3box/threebox-mock-server');
 
@@ -30,9 +29,8 @@ describe('Threebox', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement(By.css('#password'));
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         // turns on threebox syncing
         await driver.clickElement('.account-menu__icon');
@@ -55,9 +53,9 @@ describe('Threebox', function () {
         await driver.clickElement({ text: 'Contacts', tag: 'div' });
 
         await driver.clickElement('.address-book-add-button__button');
-        const addAddressInputs = await driver.findElements('input');
+        await driver.fill('#nickname', 'Test User Name 11');
-        await addAddressInputs[0].sendKeys('Test User Name 11');
+        await driver.fill(
-        await addAddressInputs[1].sendKeys(
+          'input[placeholder="Search, public address (0x), or ENS"]',
           '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
         );
         await driver.delay(largeDelayMs * 2);
@@ -75,9 +73,8 @@ describe('Threebox', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        const passwordField = await driver.findElement(By.css('#password'));
+        await driver.fill('#password', 'correct horse battery staple');
-        await passwordField.sendKeys('correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
-        await passwordField.sendKeys(Key.ENTER);
 
         // confirms the 3box restore notification
         await driver.clickElement('.home-notification__accept-button');

test/e2e/webdriver/driver.js

@@ -3,6 +3,22 @@ const { strict: assert } = require('assert');
 const { until, error: webdriverError, By } = require('selenium-webdriver');
 const cssToXPath = require('css-to-xpath');
 
+/**
+ * Temporary workaround to patch selenium's element handle API with methods
+ * that match the playwright API for Elements
+ * @param {Object} element - Selenium Element
+ * @returns {Object} modified Selenium Element
+ */
+function wrapElementWithAPI(element) {
+  element.press = (key) => element.sendKeys(key);
+  element.fill = async (input) => {
+    // The 'fill' method in playwright replaces existing input
+    await element.clear();
+    await element.sendKeys(input);
+  };
+  return element;
+}
+
 class Driver {
   /**
    * @param {!ThenableWebDriver} driver - A {@code WebDriver} instance
@@ -14,6 +30,13 @@ class Driver {
     this.browser = browser;
     this.extensionUrl = extensionUrl;
     this.timeout = timeout;
+    // The following values are found in
+    // https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/input.js#L50-L110
+    // These should be replaced with string constants 'Enter' etc for playwright.
+    this.Key = {
+      BACK_SPACE: '\uE003',
+      ENTER: '\uE007',
+    };
   }
 
   buildLocator(locator) {
@@ -63,6 +86,18 @@ class Driver {
     );
   }
 
+  async fill(rawLocator, input) {
+    const element = await this.findElement(rawLocator);
+    await element.fill(input);
+    return element;
+  }
+
+  async press(rawLocator, keys) {
+    const element = await this.findElement(rawLocator);
+    await element.press(keys);
+    return element;
+  }
+
   async delay(time) {
     await new Promise((resolve) => setTimeout(resolve, time));
   }
@@ -80,15 +115,19 @@ class Driver {
     // bucket that can include the state attribute to wait for elements that
     // match the selector to be removed from the DOM.
     const selector = this.buildLocator(rawLocator);
+    let element;
+    if (!['visible', 'detached'].includes(state)) {
+      throw new Error(`Provided state selector ${state} is not supported`);
+    }
     if (state === 'visible') {
-      return await this.driver.wait(until.elementLocated(selector), timeout);
+      element = await this.driver.wait(until.elementLocated(selector), timeout);
     } else if (state === 'detached') {
-      return await this.driver.wait(
+      element = await this.driver.wait(
         until.stalenessOf(await this.findElement(selector)),
         timeout,
       );
     }
-    throw new Error(`Provided state selector ${state} is not supported`);
+    return wrapElementWithAPI(element);
   }
 
   async quit() {
@@ -99,14 +138,18 @@ class Driver {
 
   async findElement(rawLocator) {
     const locator = this.buildLocator(rawLocator);
-    return await this.driver.wait(until.elementLocated(locator), this.timeout);
+    const element = await this.driver.wait(
+      until.elementLocated(locator),
+      this.timeout,
+    );
+    return wrapElementWithAPI(element);
   }
 
   async findVisibleElement(rawLocator) {
     const locator = this.buildLocator(rawLocator);
     const element = await this.findElement(locator);
     await this.driver.wait(until.elementIsVisible(element), this.timeout);
-    return element;
+    return wrapElementWithAPI(element);
   }
 
   async findClickableElement(rawLocator) {
@@ -116,12 +159,16 @@ class Driver {
       this.driver.wait(until.elementIsVisible(element), this.timeout),
       this.driver.wait(until.elementIsEnabled(element), this.timeout),
     ]);
-    return element;
+    return wrapElementWithAPI(element);
   }
 
   async findElements(rawLocator) {
     const locator = this.buildLocator(rawLocator);
-    return await this.driver.wait(until.elementsLocated(locator), this.timeout);
+    const elements = await this.driver.wait(
+      until.elementsLocated(locator),
+      this.timeout,
+    );
+    return elements.map(wrapElementWithAPI);
   }
 
   async findClickableElements(rawLocator) {
@@ -136,7 +183,7 @@ class Driver {
         return acc;
       }, []),
     );
-    return elements;
+    return elements.map(wrapElementWithAPI);
   }
 
   async clickElement(rawLocator) {