Demonstrate json formatting

src/spec/scenarios/showJsonFormatting.ts

@@ -1,17 +1,28 @@
-import { clickOn, sleep, writeText, delteTextWithBackspaces, expandTopic, moveToCenterOfElement, showText } from '../util'
 import { Browser } from 'webdriverio'
+import {
+  clickOn,
+  sleep,
+} from '../util'
 
 export async function showJsonFormatting(browser: Browser<void>) {
+  const editor = await browser.$('//*[contains(@class, "ace_editor")]')
+  const formatJsonButton = await browser.$('#sidebar-publish-format-json')
   const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
-  await clickOn(payloadInput, browser)
+  await clickOn(editor, browser)
-  await payloadInput.clearValue()
+  await browser.keys(['\uE009', 'A']) // Ctrl + A
+  await browser.keys(['\uE000']) // End keyboard modifier
+  await browser.keys(['\uE003']) // Backspace
+  await sleep(300)
   await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
+  await sleep(300)
+  await clickOn(formatJsonButton, browser)
+  await sleep(1200)
 }
 
 async function writeTextPayload(payloadInput: any, text: string) {
   const chars = text.split('')
   for (const char of chars) {
     await payloadInput.setValue(char)
-    await sleep(200)
+    await sleep(10)
   }
 }

src/spec/webdriverio.ts

@@ -75,6 +75,10 @@ async function doStuff() {
   await publishTopic(browser)
   await sleep(1000)
 
+  await showText('Write JSON with ease', 2000, browser, 'top')
+  await showJsonFormatting(browser)
+  await sleep(1000)
+
   await showText('Copy to Clipboard', 2000, browser)
   await copyTopicToClipboard(browser)
   await hideText(browser)