fix css id

nightwatch.js

@@ -62,6 +62,7 @@ module.exports = {
       'desiredCapabilities': {
         'browserName': 'safari',
         'javascriptEnabled': true,
+        'platform': 'MAC',
         'acceptSslCerts': true,
         'build': 'build-' + TRAVIS_JOB_NUMBER,
         'tunnel-identifier': 'remix_tests_' + TRAVIS_JOB_NUMBER

src/BasicPanel.js

@@ -3,11 +3,9 @@ var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var ui = require('./helpers/ui')
 
-function BasicPanel (_name, _id) {
+function BasicPanel (_name) {
   this.data
   this.name = _name
-  this.id = _id
-
   this.view
 }
 
@@ -21,7 +19,7 @@ BasicPanel.prototype.render = function () {
       ${this.name}
     </div>
     <div style=${ui.formatCss(style.panel.tableContainer)}>
-      <pre style=${ui.formatCss(style.panel.table, style.font)} id='${this.id}basicpanel' >${this.data}</pre>
+      <pre style=${ui.formatCss(style.panel.table, style.font)} id='basicpanel' >${this.data}</pre>
     </div>
   </div>`
   if (!this.view) {

src/CalldataPanel.js

@@ -5,12 +5,12 @@ var yo = require('yo-yo')
 function CalldataPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new BasicPanel('Call Data', 'calldatapanel')
+  this.basicPanel = new BasicPanel('Call Data')
   this.init()
 }
 
 CalldataPanel.prototype.render = function () {
-  return yo`<div>${this.basicPanel.render()}</div>`
+  return yo`<div id='calldatapanel' >${this.basicPanel.render()}</div>`
 }
 
 CalldataPanel.prototype.init = function () {

src/CallstackPanel.js

@@ -5,12 +5,12 @@ var yo = require('yo-yo')
 function CallstackPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new BasicPanel('Call Stack', 'callstackpanel')
+  this.basicPanel = new BasicPanel('Call Stack')
   this.init()
 }
 
 CallstackPanel.prototype.render = function () {
-  return yo`<div>${this.basicPanel.render()}</div>`
+  return yo`<div id='callstackpanel' >${this.basicPanel.render()}</div>`
 }
 
 CallstackPanel.prototype.init = function () {

src/MemoryPanel.js

@@ -6,12 +6,12 @@ var yo = require('yo-yo')
 function MemoryPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new BasicPanel('Memory', 'memorypanel')
+  this.basicPanel = new BasicPanel('Memory')
   this.init()
 }
 
 MemoryPanel.prototype.render = function () {
-  return yo`<div>${this.basicPanel.render()}</div>`
+  return yo`<div id='memorypanel' >${this.basicPanel.render()}</div>`
 }
 
 MemoryPanel.prototype.init = function () {

src/StackPanel.js

@@ -6,12 +6,12 @@ var yo = require('yo-yo')
 function StackPanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new BasicPanel('Stack', 'stackpanel')
+  this.basicPanel = new BasicPanel('Stack')
   this.init()
 }
 
 StackPanel.prototype.render = function () {
-  return yo`<div>${this.basicPanel.render()}</div>`
+  return yo`<div id='stackpanel' >${this.basicPanel.render()}</div>`
 }
 
 StackPanel.prototype.init = function () {

src/StoragePanel.js

@@ -5,12 +5,12 @@ var yo = require('yo-yo')
 function StoragePanel (_parent, _traceManager) {
   this.parent = _parent
   this.traceManager = _traceManager
-  this.basicPanel = new BasicPanel('Storage Changes', 'storagepanel')
+  this.basicPanel = new BasicPanel('Storage Changes')
   this.init()
 }
 
 StoragePanel.prototype.render = function () {
-  return yo`<div>${this.basicPanel.render()}</div>`
+  return yo`<div id='storagepanel' >${this.basicPanel.render()}</div>`
 }
 
 StoragePanel.prototype.init = function () {

test-browser/init.js

@@ -167,12 +167,12 @@ browser.fireEvent = function (el, key, times, callback) {
 }
 
 function assertPanel (id, browser, value) {
-  browser.expect.element(id + 'basicpanel').text.to.equal(value)
+  browser.expect.element(id + ' #basicpanel').text.to.equal(value)
   return browser
 }
 
 function assertPanelValue (id, browser, index, value) {
-  getInnerText(id + 'basicpanel', browser, function (result) {
+  getInnerText(id + ' #basicpanel', browser, function (result) {
     var values
     if (result.value.indexOf('\r\n') !== -1) {
       values = result.value.split('\r\n')
@@ -188,8 +188,8 @@ function assertPanelValue (id, browser, index, value) {
 
 function getInnerText (id, browser, callback) {
   browser.execute(function (data) {
-    return document.getElementById(data).innerText
+    return document.querySelector(data).innerText
-  }, [id.substring(1)], function (result) {
+  }, [id], function (result) {
     callback(result)
   })
 }