fix: Synpress integration with Metamask v11.15.6

commands/metamask.js

@@ -478,14 +478,21 @@ const metamask = {
     await switchToMetamaskIfNotActive();
     await playwright.waitAndClick(mainPageElements.networkSwitcher.button);
 
+    if (
+      (await playwright
+        .metamaskWindow()
+        .locator(mainPageElements.networkSwitcher.showTestNetworksOff)
+        .count()) > 0
+    ) {
+      await playwright.waitAndClick(
+        mainPageElements.networkSwitcher.showTestNetworksOff,
+      );
+    }
+
     await playwright.waitAndClickByText(
       mainPageElements.networkSwitcher.dropdownMenuItem,
       network.name,
     );
-    await playwright.waitForText(
-      mainPageElements.networkSwitcher.networkName,
-      network.name,
-    );
 
     await playwright.waitUntilStable();
     await module.exports.closePopupAndTooltips();
@@ -571,6 +578,7 @@ const metamask = {
         waitForEvent: 'navi',
       },
     );
+    await playwright.waitAndClick(addNetworkPageElements.switchToButton);
     await module.exports.closePopupAndTooltips();
     await playwright.waitForText(
       mainPageElements.networkSwitcher.networkName,
@@ -642,34 +650,13 @@ const metamask = {
     await switchToCypressIfNotActive();
     return true;
   },
-  async activateAdvancedGasControl(skipSetup) {
-    return await activateAdvancedSetting(
-      advancedPageElements.advancedGasControlToggleOn,
-      advancedPageElements.advancedGasControlToggleOff,
-      skipSetup,
-    );
-  },
   async activateShowHexData(skipSetup) {
     return await activateAdvancedSetting(
       advancedPageElements.showHexDataToggleOn,
       advancedPageElements.showHexDataToggleOff,
       skipSetup,
     );
   },
-  async activateTestnetConversion(skipSetup) {
-    return await activateAdvancedSetting(
-      advancedPageElements.showTestnetConversionOn,
-      advancedPageElements.showTestnetConversionOff,
-      skipSetup,
-    );
-  },
-  async activateShowTestnetNetworks(skipSetup) {
-    return await activateAdvancedSetting(
-      advancedPageElements.showTestnetNetworksOn,
-      advancedPageElements.showTestnetNetworksOff,
-      skipSetup,
-    );
-  },
   async activateCustomNonce(skipSetup) {
     return await activateAdvancedSetting(
       advancedPageElements.customNonceToggleOn,
@@ -972,6 +959,19 @@ const metamask = {
   } = {}) {
     let txData = {};
     const notificationPage = await playwright.switchToMetamaskNotification();
+
+    if (
+      (await playwright
+        .metamaskNotificationWindow()
+        .locator(addNetworkPageElements.saveButton)
+        .count()) > 0
+    ) {
+      await playwright.waitAndClick(
+        addNetworkPageElements.saveButton,
+        notificationPage,
+      );
+    }
+
     if (gasConfig) {
       log(
         '[confirmTransaction] gasConfig is present, determining transaction type..',
@@ -1479,13 +1479,7 @@ const metamask = {
   },
   async initialSetup(
     playwrightInstance,
-    {
-      secretWordsOrPrivateKey,
-      network,
-      password,
-      enableAdvancedSettings,
-      enableExperimentalSettings,
-    },
+    { secretWordsOrPrivateKey, network, password, enableExperimentalSettings },
   ) {
     if (playwrightInstance) {
       await playwright.init(playwrightInstance);
@@ -1503,6 +1497,10 @@ const metamask = {
         .locator(onboardingWelcomePageElements.onboardingWelcomePage)
         .count()) > 0
     ) {
+      await playwright.waitAndClick(
+        onboardingWelcomePageElements.onboardingTermsCheckbox,
+      );
+
       if (secretWordsOrPrivateKey.includes(' ')) {
         // secret words
         await module.exports.importWallet(secretWordsOrPrivateKey, password);
@@ -1512,7 +1510,7 @@ const metamask = {
         await module.exports.importAccount(secretWordsOrPrivateKey);
       }
 
-      await setupSettings(enableAdvancedSettings, enableExperimentalSettings);
+      await setupSettings(enableExperimentalSettings);
 
       await module.exports.changeNetwork(network);
 
@@ -1595,20 +1593,12 @@ async function activateAdvancedSetting(
   return true;
 }
 
-async function setupSettings(
-  enableAdvancedSettings,
-  enableExperimentalSettings,
-) {
+async function setupSettings(enableExperimentalSettings) {
   await switchToMetamaskIfNotActive();
   await metamask.goToAdvancedSettings();
-  await metamask.activateAdvancedGasControl(true);
   await metamask.activateShowHexData(true);
-  await metamask.activateShowTestnetNetworks(true);
   await metamask.activateCustomNonce(true);
   await metamask.activateDismissBackupReminder(true);
-  if (enableAdvancedSettings) {
-    await metamask.activateTestnetConversion(true);
-  }
   if (enableExperimentalSettings) {
     await metamask.goToExperimentalSettings();
     await metamask.activateImprovedTokenAllowance(true);

docker-compose.ci.yml

@@ -105,7 +105,7 @@ services:
       - foundry
     container_name: foundry
     image: synthetixio/foundry:457bb48776c3b14de232d9dda620ba9188dc40ac-base
-    command: [ 'anvil --no-cors --fork-url ${ANVIL_FORK_URL}' ]
+    command: [ 'anvil --no-cors --fork-url ${ANVIL_FORK_URL} --chain-id 1338' ]
     environment:
       - ANVIL_IP_ADDR=0.0.0.0
     ports:

docker-compose.yml

@@ -76,7 +76,7 @@ services:
       - foundry
     container_name: foundry
     image: synthetixio/foundry:457bb48776c3b14de232d9dda620ba9188dc40ac-base
-    command: [ 'anvil --no-cors --fork-url ${ANVIL_FORK_URL}' ]
+    command: [ 'anvil --no-cors --fork-url ${ANVIL_FORK_URL} --chain-id 1338' ]
     environment:
       - ANVIL_IP_ADDR=0.0.0.0
     ports:

pages/metamask/first-time-flow-page.js

@@ -10,11 +10,13 @@ const app = '#app-content .app';
 const onboardingWelcomePage = `${onboardingFlow} [data-testid="onboarding-welcome"]`;
 const importWalletButton = `${onboardingWelcomePage} [data-testid="onboarding-import-wallet"]`;
 const createWalletButton = `${onboardingWelcomePage} [data-testid="onboarding-create-wallet"]`;
+const onboardingTermsCheckbox = `${onboardingWelcomePage} [data-testid="onboarding-terms-checkbox"]`;
 module.exports.onboardingWelcomePageElements = {
   app,
   onboardingWelcomePage,
   importWalletButton,
   createWalletButton,
+  onboardingTermsCheckbox,
 };
 
 const firstTimeFlowImportPage = `${onboardingFlow} [data-testid="import-srp"]`;

pages/metamask/main-page.js

@@ -1,13 +1,16 @@
-const networkSwitcherButtonSelector = '.network-display';
+const networkSwitcherButtonSelector = '[data-testid="network-display"]';
+const dropdownMenu = '.multichain-network-list-menu-content-wrapper';
 const networkSwitcher = {
   button: networkSwitcherButtonSelector,
-  networkName: `${networkSwitcherButtonSelector} .typography`,
-  dropdownMenu: '[data-testid="network-droppo"]',
-  dropdownMenuItem: `[data-testid="network-droppo"] .dropdown-menu-item`,
-  mainnetNetworkItem: `[data-testid="network-droppo"] [data-testid="mainnet-network-item"]`,
-  goerliNetworkItem: `[data-testid="network-droppo"] [data-testid="goerli-network-item"]`,
-  sepoliaNetworkItem: `[data-testid="network-droppo"] [data-testid="sepolia-network-item"]`,
-  localhostNetworkItem: `[data-testid="network-droppo"] [data-testid="Localhost 8545-network-item"]`,
+  networkName: `${networkSwitcherButtonSelector} .mm-text--ellipsis.mm-box--color-text-default`,
+  dropdownMenu,
+  dropdownMenuItem: `${dropdownMenu} .multichain-network-list-item`,
+  showTestNetworksToggle: `${dropdownMenu} > section > div > label.toggle-button`,
+  showTestNetworksOff: '.toggle-button--off',
+  mainnetNetworkItem: `${dropdownMenu} [data-testid="Ethereum Mainnet"]`,
+  goerliNetworkItem: `${dropdownMenu} [data-testid="goerli-network-item"]`,
+  sepoliaNetworkItem: `${dropdownMenu} [data-testid="Sepolia"]`,
+  localhostNetworkItem: `${dropdownMenu} [data-testid="Localhost 8545-network-item"]`,
   networkButton: number =>
     `[data-testid="network-droppo"] .dropdown-menu-item:nth-child(${
       3 + number
@@ -74,8 +77,8 @@ const accountMenu = {
 
 const optionsMenu = {
   button: '[data-testid=account-options-menu-button]',
-  accountDetailsButton: '[data-testid="account-options-menu__account-details"]',
-  connectedSitesButton: '[data-testid="account-options-menu__connected-sites"]',
+  accountDetailsButton: '[data-testid="account-list-menu-details"]',
+  connectedSitesButton: '[data-testid="global-menu-connected-sites"]',
 };
 
 const connectedSitesSelector = '.connected-sites';
@@ -87,17 +90,16 @@ const connectedSites = {
   closeButton: `${connectedSitesSelector} [data-testid="popover-close"]`,
 };
 
-const accountModalSelector = '.account-modal';
 const accountModal = {
-  walletAddressInput: `${accountModalSelector} .qr-code__address`,
-  closeButton: '.account-modal__close',
+  walletAddressInput: `[data-testid="address-copy-button-text"]`,
+  closeButton: '[aria-label="Close"]',
 };
 
 const renameAccount = {
-  invokeInput: `${accountModalSelector} [data-testid="editable-label-button"]`,
-  input: `${accountModalSelector} [data-testid="editable-input"]`,
-  confirmButton: `${accountModalSelector} .editable-label__icon-button`,
-  error: `${accountModalSelector} .editable-label__error`,
+  invokeInput: `[data-testid="editable-label-button"]`,
+  input: `[data-testid="editable-input"]`,
+  confirmButton: `.editable-label__icon-button`,
+  error: `.editable-label__error`,
 };
 
 const importAccountSelector = '.new-account';

pages/metamask/notification-page.js

@@ -2,14 +2,14 @@ const notificationPage = '.notification';
 const notificationAppContent = `${notificationPage} #app-content .app`;
 const loadingLogo = `${notificationPage} #loading__logo`;
 const loadingSpinner = `${notificationPage} #loading__spinner`;
-const nextButton = `${notificationPage} .permissions-connect-choose-account__bottom-buttons .btn-primary`;
-const cancelButton = `${notificationPage} .permissions-connect-choose-account__bottom-buttons .btn-secondary`;
+const nextButton = `${notificationPage} [data-testid="page-container-footer-next"]`;
+const cancelButton = `${notificationPage} [data-testid="page-container-footer-cancel"]`;
 const customSpendingLimitInput = `${notificationPage} [data-testid="custom-spending-cap-input"]`;
 const allowToSpendButton = `${notificationPage} [data-testid="page-container-footer-next"]`;
 const rejectToSpendButton = `${notificationPage} [data-testid="page-container-footer-cancel"]`;
-const selectAllCheckbox = `${notificationPage} .choose-account-list__header-check-box`;
+const selectAllCheckbox = `${notificationPage} [data-testid="choose-account-list-operate-all-check-box"]`;
 const approveWarningToSpendButton = `${notificationPage} .set-approval-for-all-warning__footer__approve-button`;
-const rejectWarningToSpendButton = `${notificationPage} .btn-secondary.set-approval-for-all-warning__footer__cancel-button`;
+const rejectWarningToSpendButton = `${notificationPage} [data-testid="page-container-footer-cancel"]`;
 
 module.exports.notificationPageElements = {
   notificationPage,
@@ -44,16 +44,16 @@ module.exports.dataSignaturePageElements = {
 };
 
 const permissionsPage = '.permissions-connect';
-const connectButton = `${permissionsPage} .permission-approval-container__footers .btn-primary`;
+const connectButton = `${permissionsPage} [data-testid="page-container-footer-next"]`;
 module.exports.permissionsPageElements = {
   permissionsPage,
   connectButton,
 };
 
-const popupContainer = '.popover-container';
-const popupCloseButton = `${popupContainer} .popover-header__button`;
-const popupCopyRecipientPublicAddressButton = `${popupContainer} .nickname-popover__public-address button`;
-const recipientPublicAddress = `${popupContainer} .nickname-popover__public-address__constant`;
+const popupContainer = '.mm-modal';
+const popupCloseButton = `${popupContainer} [aria-label="Close"]`;
+const popupCopyRecipientPublicAddressButton = `${popupContainer} [aria-label="Copy address to clipboard"]`;
+const recipientPublicAddress = `${popupContainer} .mm-text-field--disabled input`;
 module.exports.recipientPopupElements = {
   popupContainer,
   popupCloseButton,

pages/metamask/settings-page.js

@@ -11,22 +11,10 @@ module.exports.settingsPageElements = {
 
 const resetAccountButton =
   '[data-testid="advanced-setting-reset-account"] button';
-const advancedGasControlToggleOn =
-  '[data-testid="advanced-setting-advanced-gas-inline"] .toggle-button--on';
-const advancedGasControlToggleOff =
-  '[data-testid="advanced-setting-advanced-gas-inline"] .toggle-button--off';
 const showHexDataToggleOn =
   '[data-testid="advanced-setting-hex-data"] .toggle-button--on';
 const showHexDataToggleOff =
   '[data-testid="advanced-setting-hex-data"] .toggle-button--off';
-const showTestnetConversionOn =
-  '[data-testid="advanced-setting-show-testnet-conversion"]:nth-child(6) .toggle-button--on';
-const showTestnetConversionOff =
-  '[data-testid="advanced-setting-show-testnet-conversion"]:nth-child(6) .toggle-button--off';
-const showTestnetNetworksOn =
-  '[data-testid="advanced-setting-show-testnet-conversion"]:nth-child(7) .toggle-button--on';
-const showTestnetNetworksOff =
-  '[data-testid="advanced-setting-show-testnet-conversion"]:nth-child(7) .toggle-button--off';
 const customNonceToggleOn =
   '[data-testid="advanced-setting-custom-nonce"] .toggle-button--on';
 const customNonceToggleOff =
@@ -41,14 +29,8 @@ const ethSignRequestsToggleOff =
   '[data-testid="advanced-setting-toggle-ethsign"] .toggle-button--off';
 module.exports.advancedPageElements = {
   resetAccountButton,
-  advancedGasControlToggleOn,
-  advancedGasControlToggleOff,
   showHexDataToggleOn,
   showHexDataToggleOff,
-  showTestnetConversionOn,
-  showTestnetConversionOff,
-  showTestnetNetworksOn,
-  showTestnetNetworksOff,
   dismissBackupReminderOn,
   dismissBackupReminderOff,
   customNonceToggleOn,
@@ -80,9 +62,11 @@ const addNetworkForm = '.networks-tab__add-network-form-body';
 const networkNameInput = `${addNetworkForm} .form-field:nth-child(1) input`;
 const rpcUrlInput = `${addNetworkForm} .form-field:nth-child(2) input`;
 const chainIdInput = `${addNetworkForm} .form-field:nth-child(3) input`;
-const symbolInput = `${addNetworkForm} .form-field:nth-child(4) input`;
-const blockExplorerInput = `${addNetworkForm} .form-field:nth-child(5) input`;
+const symbolInput = `${addNetworkForm} [data-testid="network-form-ticker-input"]`;
+const blockExplorerInput = `${addNetworkForm} [data-testid="network-form-block-explorer-url"]`;
 const saveButton = '.networks-tab__add-network-form-footer .btn-primary';
+const switchToButton =
+  '.button.btn--rounded.btn-primary.home__new-network-added__switch-to-button';
 module.exports.addNetworkPageElements = {
   addNetworkForm,
   networkNameInput,
@@ -91,4 +75,5 @@ module.exports.addNetworkPageElements = {
   symbolInput,
   blockExplorerInput,
   saveButton,
+  switchToButton,
 };

plugins/index.js

@@ -33,7 +33,7 @@ module.exports = (on, config) => {
     if (!process.env.SKIP_METAMASK_INSTALL) {
       // NOTE: extensions cannot be loaded in headless Chrome
       const metamaskPath = await helpers.prepareMetamask(
-        process.env.METAMASK_VERSION || '10.25.0',
+        process.env.METAMASK_VERSION || '11.15.6',
       );
       arguments_.extensions.push(metamaskPath);
     }
@@ -71,7 +71,7 @@ module.exports = (on, config) => {
       if (process.env.NETWORK_NAME && !network) {
         network = process.env.NETWORK_NAME;
       } else if (!network) {
-        network = 'goerli';
+        network = 'sepolia';
       }
       return await metamask.changeNetwork(network);
     },
@@ -128,7 +128,6 @@ module.exports = (on, config) => {
       secretWordsOrPrivateKey,
       network,
       password,
-      enableAdvancedSettings,
       enableExperimentalSettings,
     }) => {
       if (process.env.NETWORK_NAME) {
@@ -167,7 +166,6 @@ module.exports = (on, config) => {
         secretWordsOrPrivateKey,
         network,
         password,
-        enableAdvancedSettings,
         enableExperimentalSettings,
       });
       return true;

support/commands.js

@@ -277,16 +277,14 @@ Cypress.Commands.add(
   'setupMetamask',
   (
     secretWordsOrPrivateKey = 'test test test test test test test test test test test junk',
-    network = 'goerli',
+    network = 'sepolia',
     password = 'Tester@1234',
-    enableAdvancedSettings = false,
     enableExperimentalSettings = false,
   ) => {
     return cy.task('setupMetamask', {
       secretWordsOrPrivateKey,
       network,
       password,
-      enableAdvancedSettings,
       enableExperimentalSettings,
     });
   },

support/index.d.ts

@@ -463,7 +463,6 @@ declare namespace Cypress {
             isTestnet: boolean;
           },
       password?: string,
-      enableAdvancedSettings?: boolean,
       enableExperimentalSettings?: boolean,
     ): Chainable<Subject>;
     /**