replace file-loader with assets to get demo mouse working again

fix mouse pointer

app/webpack.config.js

@@ -1,6 +1,6 @@
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
   entry: {
@@ -63,13 +63,8 @@ module.exports = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {},
-          },
-        ],
+        test: /\.(png|jpg|gif)$/i,
+        type: 'asset/resource',
       },
       // {
       //   test: /\.node$/,
@@ -101,4 +96,4 @@ module.exports = {
     // "react": "React",
     // "react-dom": "ReactDOM"
   },
-};
+}

src/spec/demoVideo.ts

@@ -1,5 +1,7 @@
 import * as fs from 'fs'
 import * as os from 'os'
+import * as path from 'path'
+
 import { ElectronApplication, Page, _electron as electron } from 'playwright'
 
 import mockMqtt, { stop as stopMqtt } from './mock-mqtt'
@@ -33,7 +35,16 @@ async function doStuff() {
   console.log('Starting playwright/electron')
 
   // Launch Electron app.
-  const electronApp: ElectronApplication = await electron.launch({ args: [`${__dirname}/../../..`] })
+  const electronApp: ElectronApplication = await electron.launch({
+    args: [`${__dirname}/../../..`],
+    // recordVideo: {
+    //   dir: path.join(__dirname, '..', 'playwright-videos'),
+    //   size: {
+    //     width: 1280,
+    //     height: 720,
+    //   },
+    // },
+  })
 
   // Get the first window that the app opens, wait if necessary.
   const page = await electronApp.firstWindow({ timeout: 3000 })

src/spec/scenarios/clearOldTopics.ts

@@ -8,7 +8,7 @@ export async function clearOldTopics(browser: Page) {
     await sleep(1000)
 
     const deleteButton = await browser.locator('//button[contains(@title, "Delete retained topic")]')
-    await moveToCenterOfElement(deleteButton, browser)
+    await moveToCenterOfElement(deleteButton)
     await clickOn(deleteButton)
     await sleep(700)
   }

src/spec/scenarios/publishTopic.ts

@@ -23,7 +23,7 @@ export async function publishTopic(browser: Page) {
   await clickOn(formatJsonButton)
 
   const publishButton = await browser.locator('#publish-button')
-  await moveToCenterOfElement(publishButton, browser)
+  await moveToCenterOfElement(publishButton)
   await showText('Lamp turns on', 1000, browser, 'top')
   await sleep(500)
 

src/spec/scenarios/showNumericPlot.ts

@@ -4,7 +4,7 @@ import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, wri
 export async function showNumericPlot(browser: Page) {
   await expandTopic('kitchen/coffee_maker', browser)
   let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
-  await moveToCenterOfElement(heater, browser)
+  await moveToCenterOfElement(heater)
   await sleep(1000)
   // Refocus and click
   heater = await valuePreviewGuttersShowChartIcon('heater', browser)
@@ -12,7 +12,7 @@ export async function showNumericPlot(browser: Page) {
 
   await sleep(1000)
   let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
-  await moveToCenterOfElement(temperature, browser)
+  await moveToCenterOfElement(temperature)
   await sleep(1000)
   // Refocus and click
   temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
@@ -64,7 +64,7 @@ async function clickAway(name: string, browser: Page) {
   const settings = await browser.locator(
     `//*[contains(@data-test-type, "ChartPaper")][contains(@data-test, "${name}")]`
   )
-  await moveToCenterOfElement(settings, browser)
+  await moveToCenterOfElement(settings)
   await settings.press('Escape')
 }
 

src/spec/util/index.ts

@@ -55,11 +55,9 @@ export async function setTextInInput(name: string, text: string, browser: Page)
   await input.fill(text)
 }
 
-export async function moveToCenterOfElement(element: Locator, browser: Page) {
+export async function moveToCenterOfElement(element: Locator) {
   // @ts-ignore
-  const { x, y } = element
-  // @ts-ignore
-  const { width, height } = element
+  const { x, y, width, height } = await element.boundingBox();
 
   const targetX = x + width / 2
   const targetY = y + height / 2
@@ -67,12 +65,13 @@ export async function moveToCenterOfElement(element: Locator, browser: Page) {
   const duration = fast ? 1 : 500
 
   const js = `window.demo.moveMouse(${targetX}, ${targetY}, ${duration});`
-  await runJavascript(js, browser)
+  await runJavascript(js, element.page())
   await sleep(duration)
   await sleep(250, true)
 }
 
 export async function runJavascript(js: string, browser: Page) {
+  console.log(js)
   await browser.evaluate(_js => eval(_js), js)
 }
 
@@ -81,17 +80,11 @@ export async function clickOnHistory(browser: Page) {
   await clickOn(messageHistory)
 }
 
-export async function clickOn(element: Locator, clicks = 1, force = false) {
-  await moveToCenterOfElement(element, element.page())
-  for (let i = 0; i < clicks; i += 1) {
-    if (force) {
-      await element.dispatchEvent('click')
-    } else {
-      await element.click()
-    }
-
-    await sleep(50)
-  }
+export async function clickOn(element: Locator, clicks = 1, delay = 0, button: 'left' | 'right' | 'middle' = 'left', force = false) {
+  await moveToCenterOfElement(element)
+  await element.hover()
+  await element.click({ clickCount: clicks, delay, button, force })
+  await sleep(50)
 }
 
 export async function createFakeMousePointer(browser: Page) {