metamask fix

lock

lock

rm script

fix test

rm unneeded test

rm file

rm file

headless

Delete .env.local

Author: bunsenstraat

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: false   
+    default: true   
 orbs:
   browser-tools: circleci/[email protected]
   win: circleci/[email protected]
@@ -680,6 +680,17 @@ jobs:
                 install-geckodriver: false
             - run: yarn install_webdriver
             - run: google-chrome --version
+      - when:
+          condition:
+              equal: [ "chromeMetamask", << parameters.browser >> ]
+          steps:
+            - browser-tools/install-browser-tools:
+                install-firefox: false
+                install-chrome: true
+                install-chromedriver: false
+                install-geckodriver: false
+            - run: yarn install_webdriver
+            - run: google-chrome --version
       - when:
           condition:
               equal: [ "firefox", << parameters.browser >> ]
@@ -794,11 +805,11 @@ workflows:
             - build
           matrix:
             parameters:
-              browser: ["chrome", "firefox"]
-              script: ["flaky.sh"]
-              job: ["nogroup"]
-              jobsize: ["1"]
-              parallelism: [5]
+              browser: ["chromeMetamask"]
+              script: ["metamask.sh"]
+              job: ["0"]
+              jobsize: ["10"]
+              parallelism: [1]
   build_all:
     unless: << pipeline.parameters.run_flaky_tests >>
     jobs:
@@ -887,26 +898,26 @@ workflows:
               job: ["0","1","2","3","4","5","6","7","8","9"]
               jobsize: ["10"]
               parallelism: [15]
-      # - remix-ide-browser:
-      #     requires:
-      #       - build
-      #     matrix:
-      #       alias: metamask
-      #       parameters:
-      #         browser: ["chrome"]
-      #         script: ["metamask.sh"]
-      #         job: ["0"]
-      #         jobsize: ["10"]
-      #         parallelism: [1]
-      #     filters:
-      #       branches:
-      #         only: [/.*metamask.*/, 'master', 'remix_live', 'remix_beta']
+      - remix-ide-browser:
+          requires:
+            - build
+          matrix:
+            alias: metamask
+            parameters:
+              browser: ["chromeMetamask"]
+              script: ["metamask.sh"]
+              job: ["0"]
+              jobsize: ["10"]
+              parallelism: [1]
+          filters:
+            branches:
+              only: [/.*metamask.*/, 'master', 'remix_live', 'remix_beta']
       - tests-passed:
           requires:
             - lint
             - remix-libs
             - browser-tests
-            #- metamask
+            - metamask
             - plugins
 
       - predeploy:
@@ -920,7 +931,7 @@ workflows:
             - lint
             - remix-libs
             - browser-tests
-            #- metamask
+            - metamask
             - plugins
             - predeploy
           filters:
@@ -933,7 +944,7 @@ workflows:
             - lint
             - remix-libs
             - browser-tests
-            #- metamask
+            - metamask
             - plugins
             - predeploy
           filters:
@@ -946,7 +957,7 @@ workflows:
             - lint
             - remix-libs
             - browser-tests
-            #- metamask
+            - metamask
             - plugins
             - predeploy
           filters:

.env.local

@@ -17,6 +17,7 @@ soljson.js
 stats.json
 release
 .env
+.env.local
 
 
 # compiled output
@@ -74,3 +75,4 @@ apps/remixdesktop/circom-download
 apps/remixdesktop/log_input_signals.txt
 apps/remixdesktop/log_input_signals_new.txt
 logs
+apps/remix-ide-e2e/src/extensions/chrome/metamask

.gitignore

@@ -1,7 +1,4 @@
-import * as fs from 'fs'
-
-const crxFile = fs.readFileSync('apps/remix-ide-e2e/src/extensions/chrome/11.13.1_0.crx')
-const metamaskExtension = crxFile.toString('base64')
+const metamaskExtensionPath = 'apps/remix-ide-e2e/src/extensions/chrome/metamask';
 
 module.exports = {
   src_folders: ['dist/apps/remix-ide-e2e/src/tests'],
@@ -44,8 +41,7 @@ module.exports = {
             '--headless=new',
             '--verbose',
             '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
-          ],
-          extensions: [metamaskExtension]
+          ]
         }
       }
     },
@@ -63,12 +59,35 @@ module.exports = {
 
     'chromeDesktopMetamask': {
       desiredCapabilities: {
-        'browserName': 'chrome',
-        'javascriptEnabled': true,
-        'acceptSslCerts': true,
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true,
         'goog:chromeOptions': {
-          args: ['window-size=2560,1440', '--no-sandbox', '--verbose']
-          ,extensions: [metamaskExtension]
+          args: [
+            `--load-extension=${metamaskExtensionPath}`,
+            '--window-size=2560,1440',
+            '--no-sandbox',
+            '--verbose',
+            '--disable-gpu',
+          ]
+        }
+      }
+    },
+
+    'chromeMetamask': {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true,
+        'goog:chromeOptions': {
+          args: [
+            `--load-extension=${metamaskExtensionPath}`,
+            '--window-size=2560,1440',
+            '--no-sandbox',
+            '--verbose',
+            '--headless=new',
+            '--disable-gpu',
+          ]
         }
       }
     },
@@ -80,7 +99,7 @@ module.exports = {
         'acceptSslCerts': true,
         'goog:chromeOptions': {
           args: ['window-size=2560,1440', 'start-fullscreen', '--no-sandbox', '--headless', '--verbose'],
-          extensions: [metamaskExtension]
+          extensions: []
         }
       }
     }

apps/remix-ide-e2e/METAMASK.md

@@ -12,7 +12,8 @@
     "@openzeppelin/wizard": "^0.4.0",
     "@remix-project/remixd": "../../dist/libs/remixd",
     "deep-equal": "^1.0.1",
-    "tree-kill": "^1.2.2"
+    "tree-kill": "^1.2.2",
+    "adm-zip": "^0.5.16"
   },
   "devDependencies": {
     "http-server": "^14.1.1",

apps/remix-ide-e2e/nightwatch-chrome.ts

@@ -15,10 +15,12 @@ class MetaMask extends EventEmitter {
 }
 
 function setupMetaMask(browser: NightwatchBrowser, passphrase: string, password: string, done: VoidFunction) {
+  //passphrase = 'asset chalk glimpse inch wall tomorrow fatal major crater omit tiny sun'
   const words = passphrase.split(' ')
   console.log('setup metamask')
   browser
-    .switchBrowserTab(1)
+    .switchBrowserTab('MetaMask')
+    .saveScreenshot('./reports/screenshots/metamask_setup.png')
     .waitForElementVisible('input[data-testid="onboarding-terms-checkbox"]')
     .click('input[data-testid="onboarding-terms-checkbox"]')
     .waitForElementVisible('button[data-testid="onboarding-import-wallet"]')
@@ -50,31 +52,32 @@ function setupMetaMask(browser: NightwatchBrowser, passphrase: string, password:
     .click('button[data-testid="pin-extension-next"]')
     .waitForElementVisible('button[data-testid="pin-extension-done"]')
     .click('button[data-testid="pin-extension-done"]')
-    .perform((done) => {
-      browser.execute(function () {
-        function addStyle(styleString) {
-          const style = document.createElement('style')
-          style.textContent = styleString
-          document.head.append(style)
-        }
-        addStyle(`
-          #popover-content {
-            display:none !important
-          } 
-          .popover-container {
-            display:none !important;
-          }
-        `)
-      }, [], done())
-    })
-
+    .pause(10000)
     .saveScreenshot('./reports/screenshots/metamask.png')
+    .waitForElementVisible('[data-testid="network-display"]') 
+    .saveScreenshot('./reports/screenshots/metamask_3.png')
     .click('[data-testid="network-display"]')
     .click('.mm-modal-content label.toggle-button--off') // show test networks
+    .waitForElementVisible('div[data-testid="Sepolia"]')
     .click('div[data-testid="Sepolia"]') // switch to sepolia
+    .waitForElementVisible({
+      selector: '//*[@data-testid="network-display" and contains(., "Sepolia")]',
+      locateStrategy: 'xpath'
+    })
+    .waitForElementVisible({
+      selector: '//*[@class="eth-overview__balance" and contains(., "SepoliaETH")]',
+      locateStrategy: 'xpath'
+    })
+    .saveScreenshot('./reports/screenshots/metamask_4.png')
     .perform(() => {
       console.log('MetaMask setup complete')
-      done()
+      browser.getCurrentUrl((url) => {
+        console.log('MetaMask URL:', url)
+        browser.globals.extensionUrl = url.value
+        console.log(browser.globals)
+        browser.closeWindow()
+        done()
+      })
     })
 }
 

apps/remix-ide-e2e/package.json

@@ -1,27 +1,109 @@
 import { NightwatchBrowser, NightwatchAPI } from 'nightwatch'
 import EventEmitter from 'events'
 
+function isValidUrl(str: string): boolean {
+  try {
+    new URL(str);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
 /*
   Switches between browser tabs
 */
 
 class SwitchBrowserTab extends EventEmitter {
-  command(this: NightwatchBrowser, index: number): NightwatchBrowser {
+  command(this: NightwatchBrowser, indexOrTitle: number | string, forceReload = false): NightwatchBrowser {
+    console.log('Switching to browser tab', indexOrTitle);
     this.api.perform((browser: NightwatchAPI, done) => {
-      const runtimeBrowser = browser.options.desiredCapabilities.browserName
+      const runtimeBrowser = browser.options.desiredCapabilities.browserName;
       browser.windowHandles((result) => {
-        console.log('switching to window', result)
+        console.log('switching to window', result);
         if (Array.isArray(result.value)) {
-          if(runtimeBrowser === 'chrome') {
-            index = index + 1
+          const handles = result.value;
+
+          const logTabInfo = (handle: string, i: number) => {
+            browser.switchWindow(handle);
+            browser.getTitle((title) => {
+              console.log(`🪟 Tab ${i}: Title → ${title}`);
+            });
+            browser.getCurrentUrl((url) => {
+              console.log(`🌐 Tab ${i}: URL   → ${JSON.stringify(url)}`);
+            });
+          };
+
+          handles.forEach((handle, i) => logTabInfo(handle, i));
+
+          if (typeof indexOrTitle === 'string') {
+            let matchedIndex = -1;
+            const urlMatches: string[] = [];
+
+            const checkNext = (i = 0) => {
+              if (i >= handles.length) {
+                if (matchedIndex >= 0 && !forceReload) {
+                  browser.switchWindow(handles[matchedIndex]);
+                  console.log(`✅ Switched to tab with title or URL matching "${indexOrTitle}"`);
+                  return done();
+                } else if (matchedIndex >= 0 && forceReload) {
+                  console.log(`🔁 Force reloading tab with URL "${indexOrTitle}"`);
+                  browser.switchWindow(handles[matchedIndex]);
+                  browser.refresh(() => {
+                    console.log(`✅ Reloaded tab with URL: ${indexOrTitle}`);
+                    done();
+                  });
+                  return;
+                } else if (isValidUrl(indexOrTitle)) {
+                  console.log(`🔍 No tab matched, opening new tab with URL "${indexOrTitle}"`);
+                  browser.openNewWindow('tab', () => {
+                    browser.url(indexOrTitle, () => {
+                      browser.pause(2000);
+                      console.log(`✅ Opened and switched to new tab with URL: ${indexOrTitle}`);
+                      done();
+                    });
+                  });
+                  return;
+                } else {
+                  console.log(`❌ "${indexOrTitle}" is not a valid URL. No tab opened.`);
+                  return done();
+                }
+              }
+
+              browser.switchWindow(handles[i]);
+              browser.pause(500);
+              browser.getTitle((title) => {
+                browser.getCurrentUrl((urlObj) => {
+                  const url = typeof urlObj === 'object' && 'value' in urlObj ? urlObj.value : urlObj;
+                  if ((title && title.includes(indexOrTitle)) || (typeof url === 'string' && url.includes(indexOrTitle))) {
+                    matchedIndex = i;
+                  }
+                  checkNext(i + 1);
+                });
+              });
+            };
+
+            checkNext(0);
+          } else {
+            const targetHandle = handles[indexOrTitle] || handles[0];
+            browser.switchWindow(targetHandle);
+            browser.getTitle((title) => {
+              if (title) {
+                console.log(`✅ Switched to tab with title "${title}"`);
+                done();
+              } else {
+                console.log(`❌ No tab with index ${indexOrTitle} found.`);
+              }
+            })
+
           }
-          browser.switchWindow(result.value[index] || result.value[0])
+        } else {
+          done();
         }
-        done()
-      })
-      this.emit('complete')
-    })
-    return this
+      });
+      this.emit('complete');
+    });
+    return this;
   }
 }