add e2e test - debug with source verifier

src/app/tabs/debugger/debuggerUI/TxBrowser.js

@@ -93,6 +93,7 @@ TxBrowser.prototype.render = function () {
       type='text'
       oninput=${this.txInputChanged.bind(this)}
       placeholder=${'Transaction hash, should start with 0x'}
+      data-id="debuggerTransactionInput"
     />
   `
   let txButton = yo`

test-browser/tests/debugger.js

@@ -72,6 +72,39 @@ module.exports = {
     .pause(2000)
     .assert.containsText('*[data-id="stepdetail"]', 'vm trace step: 140')
     .assert.containsText('*[data-id="stepdetail"]', 'execution step: 140')
+  },
+
+  /*
+   * This test is using 3 differents services:
+   * - Metamask for getting the transaction
+   * - Source Verifier service for fetching the contract code
+   * - Ropsten node for retrieving the trace and storage
+   *
+  */
+  'Should debug Ropsten transaction with source highlighting using the source verifier service': function (browser) {
+    const passphrase = process.env.account_passphrase
+    const password = process.env.account_password
+
+    browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
+    .setupMetamask(passphrase, password) // set metamask
+    .click('.network-indicator__down-arrow')
+    .useXpath().click("//span[text()='Ropsten Test Network']")
+    .useCss().switchBrowserTab(0)
+    .refresh()
+    .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
+    .clickLaunchIcon('pluginManager') // load debugger and source verification
+    .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_source-verification"] button')
+    .scrollAndClick('#pluginManager article[id="remixPluginManagerListItem_debugger"] button')
+    .clickLaunchIcon('udapp')
+    .waitForElementPresent('*[data-id="settingsSelectEnvOptions"]')
+    .click('*[data-id="settingsSelectEnvOptions"] option[id="injected-mode"]') // switch to Ropsten in udapp
+    .waitForElementPresent('*[data-id="settingsNetworkEnv"]')
+    .assert.containsText('*[data-id="settingsNetworkEnv"]', 'Ropsten (3) network')
+    .scrollAndClick('debugger')
+    .setValue('*[data-id="debuggerTransactionInput"]', '0x5db1b4212e4f83e36bf5bc306888df50f01a73708a71322bdc6f39a76a7ebdaa') // debug tx
+    .waitForElementVisible('*[data-id="buttonNavigatorJumpPreviousBreakpoint"]', 30000)
+    .assert.containsText('*[data-id="stepdetail"]', 'loaded address: 0x96d87AB604AEC7FB26C2E046CA5e6eBBB9D8b74D')
+    .assert.containsText('*[data-id="solidityLocals"]', 'to: 0x6C3CCC7FBA111707D5A1AAF2758E9D4F4AC5E7B1')
     .end()
   },