Fix demo

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}>

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

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>
     )

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)
 }

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()
 }