diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
index 0a59191..8590a7c 100644
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -66,7 +66,7 @@ class ConnectionSettings extends React.Component<Props, State> {
             </Grid>
             <Grid item={true} xs={12} style={{ padding: 0 }}>
               <List
-                className={classes.topicList}
+                className={`${classes.topicList} advanced-connection-settings-topic-list`}
                 component="nav"
               >
                 <div className={classes.list}>
diff --git a/app/src/components/Sidebar/Publish/Publish.tsx b/app/src/components/Sidebar/Publish/Publish.tsx
index 627bf0a..f7fd6bd 100644
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -31,10 +31,9 @@ import Navigation from '@material-ui/icons/Navigation'
 import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { publishActions } from '../../../actions'
+import { publishActions, globalActions } from '../../../actions'
 import ClearAdornment from '../../helper/ClearAdornment'
 import { TopicViewModel } from '../../../TopicViewModel'
-import CustomIconButton from '../../CustomIconButton';
 
 interface Props {
   node?: q.TreeNode<TopicViewModel>
@@ -42,6 +41,7 @@ interface Props {
   topic?: string
   payload?: string
   actions: typeof publishActions
+  globalActions: typeof globalActions
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index e538f83..c2b3ac5 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -89,7 +89,7 @@ class Sidebar extends React.Component<Props, State> {
 
   public render() {
     return (
-      <div className={this.props.classes.drawer}>
+      <div id="Sidebar" className={this.props.classes.drawer}>
         {this.renderNode()}
       </div>
     )
diff --git a/src/spec/scenarios/showAdvancedConnectionSettings.ts b/src/spec/scenarios/showAdvancedConnectionSettings.ts
index 48b5098..81d696d 100644
--- a/src/spec/scenarios/showAdvancedConnectionSettings.ts
+++ b/src/spec/scenarios/showAdvancedConnectionSettings.ts
@@ -24,6 +24,6 @@ export async function showAdvancedConnectionSettings(browser: Browser<void>) {
 }
 
 async function deleteFirstSubscribedTopic(browser: Browser<void>) {
-  const deleteButton = await browser.$('//*[contains(@class,"topicList")]//button')
+  const deleteButton = await browser.$('.advanced-connection-settings-topic-list button')
   await clickOn(deleteButton, browser)
 }
diff --git a/src/spec/scenarios/showJsonFormatting.ts b/src/spec/scenarios/showJsonFormatting.ts
index 28e3fd0..d31d88e 100644
--- a/src/spec/scenarios/showJsonFormatting.ts
+++ b/src/spec/scenarios/showJsonFormatting.ts
@@ -18,7 +18,7 @@ export async function showJsonFormatting(browser: Browser<void>) {
   await clickOn(formatJsonButton, browser)
   await sleep(1200)
 
-  const sidebarDrawer = await browser.$('//*[contains(@class, "Sidebar")]')
+  const sidebarDrawer = await browser.$('#Sidebar')
   await sidebarDrawer.scrollIntoView()
 }