Support Phantom wallet

helpers.js

@@ -8,6 +8,7 @@ const packageJson = require('./package.json');
 const chains = require('viem/chains');
 const appRoot = require('app-root-path');
 const os = require('os');
+const unzipCrx = require('unzip-crx-3');
 
 let currentNetwork = chains.mainnet;
 // list of added networks to metamask
@@ -193,15 +194,38 @@ module.exports = {
       );
     }
   },
-  async download(url, destination) {
+  getPhantomReleases: async () => {
+    const PHANTOM_URL = 'https://crx-backup.phantom.dev/latest.crx';
+
+    return {
+      filename: 'phantom-chrome-latest',
+      downloadUrl: PHANTOM_URL,
+      tagName: 'phantom-chrome-latest',
+    };
+  },
+  download: async (provider, url, destination) => {
     try {
       log(
         `Trying to download and extract file from: ${url} to following path: ${destination}`,
       );
+
+      if (provider === 'phantom') {
+        await download(url, destination, {
+          headers: {
+            Accept: 'application/octet-stream',
+          },
+        });
+        await unzipCrx(`${destination}/latest.crx`, destination);
+        return;
+      }
+
       if (process.env.GH_USERNAME && process.env.GH_PAT) {
         await download(url, destination, {
           extract: true,
           auth: `${process.env.GH_USERNAME}:${process.env.GH_PAT}`,
+          headers: {
+            Accept: 'application/octet-stream',
+          },
         });
       } else {
         await download(url, destination, {
@@ -210,37 +234,43 @@ module.exports = {
       }
     } catch (e) {
       throw new Error(
-        `[download] Unable to download metamask release from: ${url} to: ${destination} with following error:\n${e}`,
+        `[download] Unable to download provider release from: ${url} to: ${destination} with following error:\n${e}`,
       );
     }
   },
-  async prepareMetamask(version) {
-    const release = await module.exports.getMetamaskReleases(version);
-
+  prepareProvider: async (provider, version) => {
+    const release =
+      provider === 'phantom'
+        ? await module.exports.getPhantomReleases(version)
+        : await module.exports.getMetamaskReleases(version);
     let downloadsDirectory;
     if (os.platform() === 'win32') {
       downloadsDirectory = appRoot.resolve('/node_modules');
     } else {
       downloadsDirectory = path.resolve(__dirname, 'downloads');
     }
-
     await module.exports.createDirIfNotExist(downloadsDirectory);
-    const metamaskDirectory = path.join(downloadsDirectory, release.tagName);
-    const metamaskDirectoryExists =
-      await module.exports.checkDirOrFileExist(metamaskDirectory);
-    const metamaskManifestFilePath = path.join(
+    const providerDirectory = path.join(downloadsDirectory, release.tagName);
+    const providerkDirectoryExists = await module.exports.checkDirOrFileExist(
+      providerDirectory,
+    );
+    const providerManifestFilePath = path.join(
       downloadsDirectory,
       release.tagName,
       'manifest.json',
     );
-    const metamaskManifestFileExists = await module.exports.checkDirOrFileExist(
-      metamaskManifestFilePath,
+    const providerManifestFileExists = await module.exports.checkDirOrFileExist(
+      providerManifestFilePath,
     );
-    if (!metamaskDirectoryExists && !metamaskManifestFileExists) {
-      await module.exports.download(release.downloadUrl, metamaskDirectory);
+    if (!providerkDirectoryExists && !providerManifestFileExists) {
+      await module.exports.download(
+        provider,
+        release.downloadUrl,
+        providerDirectory,
+      );
     } else {
-      log('Metamask is already downloaded');
+      log('provider is already downloaded');
     }
-    return metamaskDirectory;
+    return providerDirectory;
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@synthetixio/synpress",
-  "version": "3.7.2-beta.6",
+  "name": "@phantom/synpress",
+  "version": "4.0.0-alpha.28",
   "packageManager": "[email protected]",
   "description": "Synpress is e2e testing framework based around Cypress.io & playwright with included MetaMask support. Test your dapps with ease.",
   "keywords": [
@@ -81,6 +81,7 @@
     "get-port": "^7.0.0",
     "node-fetch": "^2.6.1",
     "underscore": "^1.13.6",
+    "unzip-crx-3": "^0.2.0",
     "viem": "^1.6.0",
     "wait-on": "^7.0.1"
   },
@@ -114,6 +115,9 @@
     "ansi-regex": "5.0.1",
     "@testing-library/dom": "8.20.0"
   },
+  "overrides": {
+    "lodash@<4.17.20": "4.17.20"
+  },
   "engines": {
     "node": ">=14"
   },

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

@@ -10,11 +10,16 @@ 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 acceptTermsCheckbox = `[data-testid="onboarding-terms-checkbox"]`;
+const agreeMetricsButton = `[data-testid="metametrics-i-agree"]`;
+
 module.exports.onboardingWelcomePageElements = {
   app,
   onboardingWelcomePage,
   importWalletButton,
   createWalletButton,
+  acceptTermsCheckbox,
+  agreeMetricsButton,
 };
 
 const firstTimeFlowImportPage = `${onboardingFlow} [data-testid="import-srp"]`;

pages/metamask/main-page.js

@@ -70,11 +70,13 @@ const accountMenu = {
   createAccountButton: '.account-menu__item--clickable:nth-child(6)',
   importAccountButton: '.account-menu__item--clickable:nth-child(7)',
   settingsButton: '.account-menu__item--clickable:nth-child(11)',
+  lockButton: '.account_menu__lock-button',
 };
 
 const optionsMenu = {
   button: '[data-testid=account-options-menu-button]',
   accountDetailsButton: '[data-testid="account-options-menu__account-details"]',
+  accountDetailsButtonV11: '[data-testid="account-list-menu-details"]',
   connectedSitesButton: '[data-testid="account-options-menu__connected-sites"]',
 };
 
@@ -90,6 +92,7 @@ const connectedSites = {
 const accountModalSelector = '.account-modal';
 const accountModal = {
   walletAddressInput: `${accountModalSelector} .qr-code__address`,
+  walletAddressInputV11: `[data-testid="address-copy-button-text"]`,
   closeButton: '.account-modal__close',
 };
 

pages/phantom/confirmation-page.js

@@ -0,0 +1,12 @@
+const confirmationPage = '.confirmation-page';
+const confirmationPageFooter = `${confirmationPage} .confirmation-footer`;
+const footer = {
+  footer: confirmationPageFooter,
+  cancelButton: `${confirmationPageFooter} .btn-secondary`,
+  approveButton: `${confirmationPageFooter} .btn-primary`,
+};
+
+module.exports.confirmationPageElements = {
+  confirmationPage,
+  footer,
+};

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

@@ -0,0 +1,84 @@
+const app = '#root';
+const welcomePage = '#root';
+const confirmButton = `${welcomePage} .first-time-flow__button`;
+module.exports.welcomePageElements = {
+  app,
+  welcomePage,
+  confirmButton,
+};
+
+const metametricsPage = '.metametrics-opt-in';
+const optOutAnalyticsButton = `${metametricsPage} [data-testid="page-container-footer-cancel"]`;
+module.exports.metametricsPageElements = {
+  metametricsPage,
+  optOutAnalyticsButton,
+};
+
+const firstTimeFlowPage = '.first-time-flow';
+const importWalletButton = `[data-testid="import-recovery-phrase-button"]`;
+const createWalletButton = `${firstTimeFlowPage} [data-testid="create-wallet-button"]`;
+module.exports.firstTimeFlowPageElements = {
+  firstTimeFlowPage,
+  importWalletButton,
+  createWalletButton,
+};
+
+const firstTimeFlowImportPage = '.first-time-flow__import';
+const newVaultForm = `${firstTimeFlowImportPage} .create-new-vault__form`;
+const secretWordsInput = number =>
+  `[data-testid="secret-recovery-phrase-word-input-${number}"]`;
+const confirmWordsButton = `[data-testid="onboarding-form-submit-button"]`;
+const passwordInput = `[data-testid="onboarding-form-password-input"]`;
+const confirmPasswordInput = `[data-testid="onboarding-form-confirm-password-input"]`;
+const termsCheckbox = `[data-testid="onboarding-form-terms-of-service-checkbox"]`;
+const continueAfterPasswordButton =
+  '[data-testid="onboarding-form-submit-button"]';
+const getStartedButton = '[data-testid="onboarding-form-submit-button"]';
+const importButton = `${newVaultForm} .create-new-vault__submit-button`;
+
+module.exports.firstTimeFlowImportPageElements = {
+  firstTimeFlowImportPage,
+  newVaultForm,
+  secretWordsInput,
+  passwordInput,
+  confirmPasswordInput,
+  termsCheckbox,
+  importButton,
+  confirmWordsButton,
+  continueAfterPasswordButton,
+  getStartedButton,
+};
+
+const firstTimeFlowCreatePage = '.first-time-flow';
+const newPasswordInput = `${firstTimeFlowCreatePage} [data-testid="create-password"]`;
+const confirmNewPasswordInput = `${firstTimeFlowCreatePage} [data-testid="confirm-password"]`;
+const newSignupCheckbox = `${firstTimeFlowCreatePage} .first-time-flow__checkbox`;
+const createButton = `${firstTimeFlowCreatePage} .first-time-flow__button`;
+module.exports.firstTimeFlowCreatePagePageElements = {
+  firstTimeFlowCreatePage,
+  newPasswordInput,
+  confirmNewPasswordInput,
+  newSignupCheckbox,
+  createButton,
+};
+
+const secureYourWalletPage = '[data-testid="seed-phrase-intro"]';
+const nextButton = `${secureYourWalletPage} button`;
+module.exports.secureYourWalletPageElements = {
+  secureYourWalletPage,
+  nextButton,
+};
+
+const revealSeedPage = '[data-testid="reveal-seed-phrase"]';
+const remindLaterButton = `${revealSeedPage} .first-time-flow__button`;
+module.exports.revealSeedPageElements = {
+  revealSeedPage,
+  remindLaterButton,
+};
+
+const endOfFlowPage = '[data-testid="end-of-flow"]';
+const allDoneButton = `${endOfFlowPage} [data-testid="EOF-complete-button"]`;
+module.exports.endOfFlowPageElements = {
+  endOfFlowPage,
+  allDoneButton,
+};