add sparkplug decoding to demo video

src/spec/SceneBuilder.ts

@@ -19,6 +19,7 @@ export type SceneNames =
   | 'settings'
   | 'customize_subscriptions'
   | 'keyboard_shortcuts'
+  | 'sparkplugb-decoding'
   | 'end'
 
 export class SceneBuilder {

src/spec/demoVideo.ts

@@ -21,6 +21,7 @@ import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
 import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
 import { showZoomLevel } from './scenarios/showZoomLevel'
+import { showSparkPlugDecoding } from './scenarios/showSparkplugDecoding'
 
 /**
  *  A convenience method that handles gracefully cleaning up the test run.
@@ -120,6 +121,11 @@ async function doStuff() {
     await sleep(1000)
   })
 
+  await scenes.record('sparkplugb-decoding', async () => {
+    await showText('SparkplugB Decoding', 2000, page, 'top')
+    await showSparkPlugDecoding(page)
+  })
+
   // disable this scenario for now until expandTopic is sorted out
   // await scenes.record('delete_retained_topics', async () => {
   //   await hideText(page)

src/spec/scenarios/publishTopic.ts

@@ -14,7 +14,7 @@ export async function publishTopic(browser: Page) {
   const topicInput = await browser.locator('//input[contains(@value,"kitchen/lamp/state")][1]')
   await clickOn(topicInput)
   await deleteTextWithBackspaces(topicInput, 120, 5)
-  await writeText('set', topicInput, 300)
+  await writeText('set', topicInput)
 
   const payloadInput = await browser.locator('//*[contains(@class, "ace_text-input")]')
   await writeTextPayload(payloadInput, 'off')
@@ -34,5 +34,6 @@ export async function publishTopic(browser: Page) {
 }
 
 async function writeTextPayload(payloadInput: Locator, text: string) {
-  await payloadInput.fill(text)
+  await clickOn(payloadInput)
+  await writeText(text, payloadInput)
 }

src/spec/scenarios/searchTree.ts

@@ -4,7 +4,7 @@ import { clickOn, deleteTextWithBackspaces, showText, sleep, writeText } from '.
 export async function searchTree(text: string, browser: Page) {
   const searchField = await browser.locator('//input[contains(@placeholder, "Search")]')
   await clickOn(searchField, 1)
-  await writeText(text, searchField, 100)
+  await writeText(text, searchField)
   await sleep(1500)
 }
 

src/spec/scenarios/showNumericPlot.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright'
-import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
+import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep } from '../util'
 
 export async function showNumericPlot(browser: Page) {
   await expandTopic('kitchen/coffee_maker', browser)

src/spec/scenarios/showSparkplugDecoding.ts

@@ -0,0 +1,9 @@
+import { Page } from 'playwright'
+import { expandTopic, sleep } from '../util'
+
+export async function showSparkPlugDecoding(browser: Page) {
+    // spell-checker: disable-next-line
+    await expandTopic('spBv1.0/Sparkplug Devices/DDATA/JavaScript Edge Node/Emulated Device', browser)
+    await browser.screenshot({ path: 'screen_sparkplugb_decoding.png' })
+    await sleep(1000)
+}

src/spec/util/index.ts

@@ -19,15 +19,14 @@ export function sleep(ms: number, required = false) {
   })
 }
 
-export async function writeText(text: string, element: Locator, delay = 0) {
-  return element.fill(text)
+export async function writeText(text: string, element: Locator, delay = 30) {
+  element.pressSequentially(text, { delay })
 }
 
-export async function deleteTextWithBackspaces(element: Locator, delay = 0, count = 0) {
-  // @ts-ignore
-  const length = count > 0 ? count : (await element.textContent()).length
+export async function deleteTextWithBackspaces(element: Locator, delay = 30, count = 0) {
+  const length = count > 0 ? count : (await element.inputValue()).length
   for (let i = 0; i < length; i += 1) {
-    await element.press('Backspace')
+    await element.press('Backspace', { delay: 30 })
     await sleep(delay)
   }
 }