Connect to Ropsten Test Network

.env

@@ -1 +1,7 @@
 gist_token = <token>
+
+#We need to setup a test account (passphrase and password) for circleci build.
+#NOTE: Test account must contain Ether to execute transactions in browser tests.
+
+account_passphrase = <passphrase>
+account_password = <password>

nightwatch.js

@@ -2,7 +2,7 @@
 require('@babel/register')()
 
 const crxFile = require('fs').readFileSync('./test-browser/extensions/chrome/metamask.crx')
-const metamaskExtension = new Buffer.from(crxFile).toString('base64')
+const metamaskExtension = new Buffer(crxFile).toString('base64')
 
 module.exports = {
   'src_folders': ['test-browser/tests'],

src/app.js

@@ -222,8 +222,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     toolTip('You are using an `https` connection. Please switch to `http` if you are using Remix against an `http Web3 provider` or allow Mixed Content in your browser.')
   }
 
+  const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
   // workaround for Electron support
-  if (!isElectron()) {
+  if (!isElectron() && !hosts.includes(window.location.host)) {
     // Oops! Accidentally trigger refresh or bookmark.
     window.onbeforeunload = function () {
       return 'Are you sure you want to leave?'

test-browser/commands/setupMetamask.js

@@ -1,9 +1,9 @@
 const EventEmitter = require('events')
 
 class MetaMask extends EventEmitter {
-  command () {
+  command (passphrase, password) {
     this.api.perform((done) => {
-      setupMetaMask(this.api, () => {
+      setupMetaMask(this.api, passphrase, password, () => {
         done()
         this.emit('complete')
       })
@@ -12,30 +12,19 @@ class MetaMask extends EventEmitter {
   }
 }
 
-function setupMetaMask (browser, done) {
+function setupMetaMask (browser, passphrase, password, done) {
   browser
-  .execute(() => {
-    var event = new KeyboardEvent('keydown', {
-      altKey: true,
-      shiftKey: true,
-      code: 'keyM',
-    })
-
-    console.log('event: ', event)
-
-    document.dispatchEvent(event)
-  }, [], () => {
-    browser.pause(100000)
-    .waitForElementPresent('.first-time-flow__button')
+  .switchBrowserWindow('chrome-extension://poemojpkcjbpmcccohjnomjffeinlafe/home.html#initialize/welcome', 'MetaMask', (browser) => {
+    browser.waitForElementPresent('.first-time-flow__button')
     .click('.first-time-flow__button')
     .waitForElementPresent('.select-action__select-button:nth-of-type(1) > .first-time-flow__button')
     .click('.select-action__select-button:nth-of-type(1) > .first-time-flow__button')
     .waitForElementPresent('.page-container__footer-button:nth-of-type(2)')
     .click('.page-container__footer-button:nth-of-type(2)')
     .waitForElementPresent('.first-time-flow__textarea')
-    .setValue('.first-time-flow__textarea', 'explain uniform adapt basic blue onion rebel pull rice erase volcano couple')
-    .setValue('*[autocomplete="new-password"]', 'remix_is_cool')
-    .setValue('*[autocomplete="confirm-password"]', 'remix_is_cool')
+    .setValue('.first-time-flow__textarea', passphrase)
+    .setValue('*[autocomplete="new-password"]', password)
+    .setValue('*[autocomplete="confirm-password"]', password)
     .click('.first-time-flow__checkbox')
     .click('.first-time-flow__button')
     .pause(5000)

test-browser/commands/switchBrowserWindow.js

@@ -1,24 +1,25 @@
 const EventEmitter = require('events')
 
 class SwitchBrowserWindow extends EventEmitter {
-  command (url, windowName) {
+  command (url, windowName, cb) {
     this.api.perform((done) => {
-      switchWindow(this.api, url, windowName, () => {
-        done()
-        this.emit('complete')
-      })
+      switchWindow(this.api, url, windowName, cb)
+      done()
+      this.emit('complete')
     })
     return this
   }
 }
 
-function switchWindow (browser, url, windowName, callback) {
-  browser.execute(function (url, windowName) {
-    window.open(url, windowName, 'width=2560, height=1440')
-  }, [url, windowName], function () {
+function switchWindow (browser, url, windowName, cb) {
+  browser.execute(function (windowName) {
+    return window.open('', windowName, 'width=2560, height=1440')
+  }, [windowName], (newWindow) => {
     browser.switchWindow(windowName)
+    .url(url)
+    .pause(5000)
     .assert.urlContains(url)
-    callback()
+    if (cb) cb(browser, newWindow)
   })
 }
 

test-browser/tests/runAndDeploy.js

@@ -2,6 +2,9 @@
 var init = require('../helpers/init')
 var sauce = require('./sauce')
 
+const passphrase = process.env.account_passphrase
+const password = process.env.account_password
+
 module.exports = {
 
   before: function (browser, done) {
@@ -64,9 +67,27 @@ module.exports = {
     })
   },
 
-  'Should': function (browser) {
-    browser.setupMetamask()
+  'Should connect to Ropsten Test Network using MetaMask': function (browser) {
+    const runtimeBrowser = browser.capabilities.browserName
+
+    runtimeBrowser === 'chrome' ? browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
+    .setupMetamask(passphrase, password)
+    .click('.network-indicator__down-arrow')
+    .useXpath().click("//span[text()='Ropsten Test Network']")
+    .useCss().switchBrowserTab(0)
+    .refresh()
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .click('*[data-id="landingPageStartSolidity"]')
+    .pause(5000)
+    .clickLaunchIcon('udapp')
+    .waitForElementPresent('*[data-id="settingsSelectEnvOptions"]')
+    .click('*[data-id="settingsSelectEnvOptions"] option[id="injected-mode"]')
+    .assert.containsText('*[data-id="settingsNetworkEnv"]', 'Ropsten (3) network')
+    .switchBrowserTab(2)
+    .waitForElementPresent('.page-container__footer-button:nth-of-type(2)')
+    .click('.page-container__footer-button:nth-of-type(2)')
     .end()
+    : browser.end()
   },
 
   tearDown: sauce
@@ -91,5 +112,5 @@ var sources = [
           }
       }`
     }
-  },
+  }
 ]