From bb964aba20d3687bd9d46df845c89ee4cdedcac8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Dalfors?= Date: Fri, 5 Apr 2024 14:37:38 +0200 Subject: [PATCH] replace file-loader with assets to get demo mouse working again fix mouse pointer --- app/package.json | 2 +- app/webpack.config.js | 15 +++++---------- src/spec/demoVideo.ts | 13 ++++++++++++- src/spec/scenarios/clearOldTopics.ts | 2 +- src/spec/scenarios/publishTopic.ts | 2 +- src/spec/scenarios/showNumericPlot.ts | 6 +++--- src/spec/util/index.ts | 25 +++++++++---------------- 7 files changed, 32 insertions(+), 33 deletions(-) diff --git a/app/package.json b/app/package.json index 142e4d3..a9b0794 100644 --- a/app/package.json +++ b/app/package.json @@ -90,4 +90,4 @@ "peerDependencies": { "electron": "^29" } -} \ No newline at end of file +} diff --git a/app/webpack.config.js b/app/webpack.config.js index a178569..c522ac4 100644 --- a/app/webpack.config.js +++ b/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" }, -}; +} diff --git a/src/spec/demoVideo.ts b/src/spec/demoVideo.ts index 73eba8d..08827dc 100644 --- a/src/spec/demoVideo.ts +++ b/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 }) diff --git a/src/spec/scenarios/clearOldTopics.ts b/src/spec/scenarios/clearOldTopics.ts index a5a192a..a0a3a42 100644 --- a/src/spec/scenarios/clearOldTopics.ts +++ b/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) } diff --git a/src/spec/scenarios/publishTopic.ts b/src/spec/scenarios/publishTopic.ts index 5410f3c..8f7b31f 100644 --- a/src/spec/scenarios/publishTopic.ts +++ b/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) diff --git a/src/spec/scenarios/showNumericPlot.ts b/src/spec/scenarios/showNumericPlot.ts index e009621..e91787c 100644 --- a/src/spec/scenarios/showNumericPlot.ts +++ b/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') } diff --git a/src/spec/util/index.ts b/src/spec/util/index.ts index 223850d..afae82b 100644 --- a/src/spec/util/index.ts +++ b/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) {