Created a custom command for testing DOM element styles and added more tests to homepage test

test-browser/commands/checkElementStyle.js

+const EventEmitter = require('events')
+
+class checkElementStyle extends EventEmitter {
+  command (cssSelector, styleProperty, expectedResult) {
+    this.api.perform((done) => {
+      checkStyle(this.api, cssSelector, styleProperty, expectedResult, () => {
+        done()
+        this.emit('complete')
+      })
+    })
+    return this
+  }
+}
+
+function checkStyle (browser, cssSelector, styleProperty, expectedResult, callback) {
+  browser.execute(function (cssSelector, styleProperty) {
+    return window.getComputedStyle(document.querySelector(cssSelector)).getPropertyValue(styleProperty)
+  }, [cssSelector, styleProperty], function (result) {
+    browser.assert.equal(result.value, expectedResult)
+    callback()
+  })
+}
+
+module.exports = checkElementStyle

test-browser/tests/homepage.js

@@ -9,16 +9,63 @@ module.exports = {
   'Loads Icon\'s Panel': function (browser) {
     browser.waitForElementVisible('#icon-panel', 10000)
     .waitForElementVisible('#icon-panel > div > div[class^="homeIcon"]')
-    .waitForElementVisible('#fileExplorerIcons > div:nth-child(1)')
-    .waitForElementVisible('#settingsIcons > div:nth-child(1)')
-    .waitForElementVisible('#settingsIcons > div:nth-child(2)')
+    .waitForElementVisible('#icon-panel #fileExplorerIcons > div:nth-child(1)')
+    .waitForElementVisible('#icon-panel #settingsIcons > div:nth-child(1)')
+    .waitForElementVisible('#icon-panel #settingsIcons > div:nth-child(2)')
   },
 
   'Loads Side Panel': function (browser) {
     browser.waitForElementVisible('#side-panel')
-    .assert.containsText('h6[class^="swapitTitle"]', 'FILE EXPLORERS')
-    .waitForElementVisible('div[class^="treeview"]')
-    .waitForElementVisible('ul[key="browser"] > li:nth-child(4)')
+    .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS')
+    .waitForElementVisible('#side-panel div[class^="treeview"]')
+    .waitForElementVisible('#side-panel ul[key="browser"] > li:nth-child(4)')
+  },
+
+  'Loads Main View': function (browser) {
+    browser.waitForElementVisible('#main-panel > div[class^="mainview"] > div[class^="pluginsContainer"]')
+    .waitForElementVisible('#main-panel div[class^="homeContainer"] > div:nth-child(2)')
+    .waitForElementVisible('#main-panel div[class^="row hpSections"] > div:nth-child(1)')
+    .waitForElementVisible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)')
+  },
+
+  'Toggles Side Panel': function (browser) {
+    browser.waitForElementVisible('#side-panel')
+    .assert.visible('#side-panel')
+    .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS')
+    .clickLaunchIcon('fileExplorers')
+    .assert.hidden('#side-panel')
+    .clickLaunchIcon('fileExplorers')
+    .assert.visible('#side-panel')
+    .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS')
+  },
+
+  'Toggles Terminal': function (browser) {
+    browser.waitForElementVisible('#main-panel div[class^="panel"] > div[class^="terminal_container"]')
+    .assert.visible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)')
+    .click('div[class^="bar"] > div[class^="menu"] > i')
+    .checkElementStyle('div[class^="bar"] > div[class^="menu"]', 'height', '35px')
+    .click('div[class^="bar"] > div[class^="menu"] > i')
+    .assert.visible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)')
+  },
+
+  'Toggles File Explorer Browser': function (browser) {
+    browser
+    .waitForElementVisible('#side-panel div[class^="treeview"]')
+    .assert.visible('ul[key="browser"]')
+    .click('li[key="browser"] > div[key="browser"] > div.fas')
+    .assert.hidden('ul[key="browser"]')
+    .click('li[key="browser"] > div[key="browser"] > div.fas')
+    .assert.visible('ul[key="browser"]')
+  },
+
+  'Switch Tabs using tabs icon': function (browser) {
+    browser
+    .waitForElementVisible('#side-panel div[class^="treeview"]')
+    .switchFile('browser/3_Ballot.sol')
+    .assert.containsText('div[title="browser/3_Ballot.sol"] > span', '3_Ballot.sol')
+    .click('div.dropdown.px-1 > span.dropdownCaret')
+    .click('#homeItem')
+    .assert.containsText('div[title="home"] > span', 'Home')
     .end()
   },