added GUI tests

README.md

@@ -15,7 +15,7 @@ Pings specified IP addresses in a defined interval and monitors the results.
 **This adapter uses Sentry libraries to automatically report exceptions and code errors to the developers.** For more details and for information how to disable the error reporting see [Sentry-Plugin Documentation](https://github.com/ioBroker/plugin-sentry#plugin-sentry)! Sentry reporting is used starting with js-controller 3.0.
 
 ## Ping from javascript adapter
-You can ping any IP address from the javascript adapter with command:
+You can ping any IP address from the JavaScript adapter with command:
 ```
 sendTo('ping.0', 'ping', '192.168.1.1', (res) => {
     console.log('Result: ' + JSON.stringify(res)); // Result: {"result": {"host": "192.168.1.1", "alive": true, "ms": 250}} 

package.json

@@ -32,7 +32,7 @@
     "@alcalzone/release-script-plugin-license": "^3.7.0",
     "@alcalzone/release-script-plugin-manual-review": "^3.7.0",
     "@iobroker/adapter-dev": "^1.3.0",
-    "@iobroker/testing": "^4.1.3",
+    "@iobroker/legacy-testing": "^1.0.12",
     "axios": "^1.7.4",
     "mocha": "^10.7.3",
     "chai": "^4.5.0"

src-admin/src/PingBrowseComponent.jsx

@@ -138,7 +138,7 @@ class PingBrowseComponent extends ConfigGeneric {
         const selectable = this.state.ips.filter(ip => !exists.find(item => item.ip === ip));
         const allSelected = selectable.length === this.state.selected.length;
 
-        return <div style={{ width: '100%'}}>
+        return <div style={{ width: '100%'}} className="ping_custom">
             <h4>{I18n.t('custom_ping_title')}</h4>
             <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                 <FormControl style={{ width: '100%', maxWidth: 600 }} variant="standard">

test/guiHelper.js

@@ -0,0 +1,66 @@
+const puppeteer = require('puppeteer');
+const { blue, cyan, red, yellow } = require('colorette');
+const fs = require('node:fs');
+
+let rootDir = `${__dirname}/../`;
+let gBrowser;
+let gPage;
+
+async function startBrowser(headless) {
+    const browser = await puppeteer.launch({
+        headless: headless === undefined ? false : headless,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    });
+    const pages = await browser.pages();
+    const timeout = 5000;
+    pages[0].setDefaultTimeout(timeout);
+
+    await pages[0].setViewport( {
+        width: 1920,
+        height: 1080,
+        deviceScaleFactor: 1,
+    });
+
+    gBrowser = browser;
+    gPage = pages[0];
+
+    // LOGGING
+    gPage
+        .on('console', message => {
+            const type = message.type().substr(0, 3).toUpperCase();
+            const colors = {
+                LOG: text => text,
+                ERR: red,
+                WAR: yellow,
+                INF: cyan,
+            };
+
+            const color = colors[type] || blue;
+            console.log(color(`[BROWSER] ${type} ${message.text()}`));
+        })
+        .on('pageerror', ({ message }) => console.log(red(`[BROWSER] ${message}`)));
+
+    await gPage.goto(`http://127.0.0.1:18081`, { waitUntil: 'domcontentloaded' });
+
+    // Create directory
+    !fs.existsSync(`${rootDir}tmp/screenshots`) && fs.mkdirSync(`${rootDir}tmp/screenshots`);
+    await gPage.screenshot({path: `${rootDir}tmp/screenshots/00_starting.png`});
+
+    return { browser, page: pages[0] };
+}
+
+async function stopBrowser(browser) {
+    browser = browser || gBrowser;
+    await browser.close();
+}
+
+async function screenshot(page, fileName) {
+    page = page || gPage;
+    await page.screenshot({ path: `${rootDir}tmp/screenshots/${fileName}.png` });
+}
+
+module.exports = {
+    startBrowser,
+    stopBrowser,
+    screenshot,
+}