Snaps E2E Test Upgrades for the new test-snaps UI (#14980)

* fixed e2e tests for new UI

* fixed scrolling in tests to be bi-compatible

* updated enums to point to new UI version

test/e2e/snaps/enums.js

@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/1.0.0',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/2.0.0',
 };

test/e2e/snaps/test-snap-bip-44.spec.js

@@ -31,11 +31,16 @@ describe('Test Snap bip-44', function () {
 
         // navigate to test snaps page and connect
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('.snapId3', 'npm:@metamask/test-snap-bip44');
+        await driver.delay(1000);
-        await driver.clickElement({
+        await driver.fill('#snapId3', 'npm:@metamask/test-snap-bip44');
-          text: 'Connect BIP-44 Snap',
+
-          tag: 'button',
+        // reveal snapId3 by finding and scrolling to #snapId4
-        });
+        const snapButton = await driver.findElement('#snapId4');
+        await driver.scrollToElement(snapButton);
+        await driver.delay(500);
+
+        // connect the snap
+        await driver.clickElement('#connectBip44');
 
         // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -77,14 +82,11 @@ describe('Test Snap bip-44', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
+        await driver.clickElement('#sendBip44');
-          text: 'Send Test to BIP-44 Snap',
-          tag: 'button',
-        });
 
         // check the results of the public key test
         await driver.delay(2000);
-        const bip44Result = await driver.findElement('.bip44Result');
+        const bip44Result = await driver.findElement('#bip44Result');
         assert.equal(
           await bip44Result.getText(),
           'Public key: "0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e8d1"',

test/e2e/snaps/test-snap-confirm.spec.js

@@ -31,11 +31,8 @@ describe('Test Snap Confirm', function () {
 
         // navigate to test snaps page and connect
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('.snapId1', 'npm:@metamask/test-snap-confirm');
+        await driver.fill('#snapId1', 'npm:@metamask/test-snap-confirm');
-        await driver.clickElement({
+        await driver.clickElement('#connectHello');
-          text: 'Connect To Confirm Snap',
-          tag: 'button',
-        });
 
         // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -70,7 +67,7 @@ describe('Test Snap Confirm', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement('.sendConfirmButton');
+        await driver.clickElement('#sendConfirmButton');
 
         // hit 'approve' on the custom confirm
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -88,7 +85,7 @@ describe('Test Snap Confirm', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        const confirmResult = await driver.findElement('.confirmResult');
+        const confirmResult = await driver.findElement('#confirmResult');
         assert.equal(await confirmResult.getText(), 'true');
       },
     );

test/e2e/snaps/test-snap-error.spec.js

@@ -30,11 +30,8 @@ describe('Test Snap Error', function () {
 
         // navigate to test snaps page and connect
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('.snapId2', 'npm:@metamask/test-snap-error');
+        await driver.fill('#snapId2', 'npm:@metamask/test-snap-error');
-        await driver.clickElement({
+        await driver.clickElement('#connectError');
-          text: 'Connect Error Snap',
-          tag: 'button',
-        });
 
         // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -68,10 +65,7 @@ describe('Test Snap Error', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
+        await driver.clickElement('#sendError');
-          text: 'Send Test to Error Snap',
-          tag: 'button',
-        });
 
         await driver.navigate(PAGES.HOME);
 

test/e2e/snaps/test-snap-managestate.spec.js

@@ -13,6 +13,7 @@ describe('Test Snap manageState', function () {
         },
       ],
     };
+
     await withFixtures(
       {
         fixtures: 'imported-account',
@@ -29,13 +30,18 @@ describe('Test Snap manageState', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // navigate to test snaps page and connect
+        // navigate to test snaps page, then fill in the snapId
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('.snapId3', 'npm:@metamask/test-snap-managestate');
+        await driver.delay(1000);
-        await driver.clickElement({
+        await driver.fill('#snapId4', 'npm:@metamask/test-snap-managestate');
-          text: 'Connect manageState Snap',
+
-          tag: 'button',
+        // find and scroll to the rest of the card
-        });
+        const snapButton = await driver.findElement('#snapId4');
+        await driver.scrollToElement(snapButton);
+        await driver.delay(500);
+
+        // connect the snap
+        await driver.clickElement('#connectManageState');
 
         // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -51,7 +57,6 @@ describe('Test Snap manageState', function () {
           },
           10000,
         );
-
         await driver.delay(2000);
 
         // approve install of snap
@@ -70,32 +75,23 @@ describe('Test Snap manageState', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.fill('.dataManageState', '23');
+        await driver.fill('#dataManageState', '23');
-        await driver.clickElement({
+        await driver.clickElement('#sendManageState');
-          text: 'Send data to manageState Snap',
-          tag: 'button',
-        });
 
         // check the results of the public key test
-        await driver.delay(2000);
+        await driver.delay(500);
         const manageStateResult = await driver.findElement(
-          '.sendManageStateResult',
+          '#sendManageStateResult',
         );
         assert.equal(await manageStateResult.getText(), 'true');
 
         // click get results
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.clickElement('#retrieveManageState');
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
-          text: 'Get data from manageState Snap',
-          tag: 'button',
-        });
 
         // check the results
-        await driver.delay(2000);
+        await driver.delay(500);
         const retrieveManageStateResult = await driver.findElement(
-          '.retrieveManageStateResult',
+          '#retrieveManageStateResult',
         );
         assert.equal(
           await retrieveManageStateResult.getText(),
@@ -103,34 +99,22 @@ describe('Test Snap manageState', function () {
         );
 
         // click clear results
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.clickElement('#clearManageState');
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
-          text: 'Clear data of manageState Snap',
-          tag: 'button',
-        });
 
         // check if true
-        await driver.delay(2000);
+        await driver.delay(500);
         const clearManageStateResult = await driver.findElement(
-          '.clearManageStateResult',
+          '#clearManageStateResult',
         );
         assert.equal(await clearManageStateResult.getText(), 'true');
 
         // click get results again
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.clickElement('#retrieveManageState');
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
-          text: 'Get data from manageState Snap',
-          tag: 'button',
-        });
 
         // check result array is empty
-        await driver.delay(2000);
+        await driver.delay(500);
         const retrieveManageStateResult2 = await driver.findElement(
-          '.retrieveManageStateResult',
+          '#retrieveManageStateResult',
         );
         assert.equal(
           await retrieveManageStateResult2.getText(),

test/e2e/snaps/test-snap-notification.spec.js

@@ -30,13 +30,18 @@ describe('Test Snap Notification', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // navigate to test snaps page and connect
+        // navigate to test snaps page
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('.snapId5', 'npm:@metamask/test-snap-notification');
+        await driver.delay(1000);
-        await driver.clickElement({
+
-          text: 'Connect Notification Snap',
+        // find and scroll down to snapId5
-          tag: 'button',
+        const snapButton = await driver.findElement('#snapId5');
-        });
+        await driver.scrollToElement(snapButton);
+        await driver.delay(500);
+        await driver.fill('#snapId5', 'npm:@metamask/test-snap-notification');
+
+        // connect the snap
+        await driver.clickElement('#connectNotification');
 
         // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -70,10 +75,7 @@ describe('Test Snap Notification', function () {
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
-        await driver.clickElement({
+        await driver.clickElement('#sendInAppNotification');
-          text: 'Send InApp Notification',
-          tag: 'button',
-        });
 
         // try to go to the MM pages
         await driver.navigate(PAGES.HOME);