Add playwright testing for the new web package

.gitignore

@@ -6,6 +6,8 @@ node_modules
 
 # test screenshots for web package
 test_results/
+test-results/
+playwright-report/
 
 # dist directory should be included only in the Package but not Repository
 dist
@@ -26,4 +28,6 @@ log.json
 eslint-results.sarif
 
 # junit test results
-junit-tests.xml
+junit-tests.xml
+packages/web-new/test-results
+packages/web-new/playwright-report

packages/web-new/README.md

@@ -74,7 +74,7 @@ The `webpack.config.js` file is used to set up Webpack for the project. It manag
 - `optimization`: Contains settings for optimizing the build, including minimizing CSS using `CssMinimizerPlugin`
 
 
-## Deployment
+### 4. Deployment
 
 Requires [Lerna](https://www.npmjs.com/package/lerna) to be installed globally (`npm install -g lerna`).
 
@@ -108,4 +108,19 @@ npm run dev
 ```sh
 npm run build
 npm run serve
-```
+```
+
+### 5. Testing with Playwright
+
+To utilize the Playwright package for testing the application, you need to install it using `npm install` since it's not intended for production use. Additionally, to set up the supported browsers required for Playwright to run tests, you should execute the command `npx playwright install`.
+
+You can assess the visual appearance and functionality of the package in all browsers by running the command `npm run test`. This will execute all the tests in the supported browsers, and once the tests have finished, Playwright will host the reports at `http://localhost:9323`.
+
+If the reports aren't displayed automatically, you can also use the command `npx playwright show-report` to view the test results.
+
+For a more visual approach to writing and visualizing tests, you can use the command `npx playwright test --ui`. This command provides a visual interface that allows you to step through each part of the test and observe what occurs before, during, and after each step.
+
+Debugging can also be accomplished by running the Playwright test command with the `--debug` flag, like this: `npx playwright test --debug`.
+
+For additional information on how to run and debug tests, please refer to the [official Playwright website](https://playwright.dev/docs/running-tests).
+

packages/web-new/package.json

@@ -18,11 +18,14 @@
     "build": "node external-scripts/generate-paths.js && webpack --mode production",
     "dev": "webpack serve --mode development",
     "serve": "node server/server.js",
-    "examples": "node external-scripts/generate-paths.js"
+    "examples": "node external-scripts/generate-paths.js",
+    "test": "npx playwright test --project=chromium --project=firefox",
+    "test-full": "npx playwright test"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
+    "@playwright/test": "^1.39.0",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",

packages/web-new/playwright.config.js

@@ -0,0 +1,59 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+// require('dotenv').config();
+
+module.exports = defineConfig({
+  testDir: './tests',
+  // Folder for test artifacts such as screenshots, videos, traces, etc.
+  outputDir: 'test-results',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://127.0.0.1:5100',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    }
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run serve',
+    url: 'http://127.0.0.1:5100',
+    reuseExistingServer: !process.env.CI,
+  },
+});

packages/web-new/src/examples-paths/examples-paths.json

@@ -118,11 +118,6 @@
           "description": "A simple Thing Description using CoAP. The target resource is specified in the Thing Description by the href member of a form and the request method (e.g., GET, PUT, POST, or DELETE) is specified using the cov:method member of a form.",
           "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/CoAP-simple-td-no-defaults.td.jsonld"
         },
-        "extended-forms-multiple-op.td.jsonld": {
-          "title": "Extended Forms Multiple op",
-          "description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
-          "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
-        },
         "HTTP-readproperty.td.jsonld": {
           "title": "HTTP readproperty",
           "description": "This example shows the binding of the readproperty operation for the HTTP.",
@@ -148,6 +143,11 @@
           "description": "This example shows the minimal set of terms to configure a single coil reading using Modbus. Notice that the unitID is contained in the href as the first element of the path.",
           "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/Modbus-single-coil.td.jsonld"
         },
+        "extended-forms-multiple-op.td.jsonld": {
+          "title": "Extended Forms Multiple op",
+          "description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
+          "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
+        },
         "subprotocol-longpoll.td.jsonld": {
           "title": "Subprotocol Longpoll",
           "description": "protocols may have defined Subprotocols that can be used for some interaction types. For example, to receive asynchronous notifications using HTTP, some servers may support long polling.",
@@ -158,6 +158,11 @@
     "6-security-schemas": {
       "description": "This category contains various examples concerning the different types of security schemas that could/should be used for a Thing Description, as well as the different ways to combine multiple security schemes.",
       "examples": {
+        "OAuth2-scopes.td.jsonld": {
+          "title": "OAuth2 Scopes",
+          "description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
+          "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
+        },
         "apikey-in-body-simplified.td.jsonld": {
           "title": "Apikey In Body Simplified",
           "description": "It is possbile to simplify how security parameters are included in the payload by using the feature that the location referenced by a JSON pointer in a body location will be automatically inserted if it does not exist.",
@@ -207,11 +212,6 @@
           "title": "noSec Security",
           "description": "Security configuration in the TD is mandatory, therefore the nosec security scheme is provided for the case that no security is needed.",
           "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/noSec-security.td.jsonld"
-        },
-        "OAuth2-scopes.td.jsonld": {
-          "title": "OAuth2 Scopes",
-          "description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
-          "path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
         }
       }
     },

packages/web-new/src/styles/_console.scss

@@ -537,10 +537,12 @@
                             align-items: center;
                             justify-content: space-between;
                             gap: 1rem;
+                            pointer-events: none;
 
                             input,
                             select {
                                 width: 100%;
+                                pointer-events: all;
                             }
 
                             input[type="checkbox"] {

packages/web-new/src/styles/styles.css

@@ -1316,10 +1316,12 @@ main .console {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  pointer-events: none;
 }
 .console__content .visualize-view .visualize-inputs__tree .vega-bind label input,
 .console__content .visualize-view .visualize-inputs__tree .vega-bind label select {
   width: 100%;
+  pointer-events: all;
 }
 .console__content .visualize-view .visualize-inputs__tree .vega-bind label input[type=checkbox] {
   -webkit-appearance: none;

packages/web-new/src/template.html

@@ -554,13 +554,17 @@ <h3 class="settings__preferences">Preferences</h3>
             </div>
 
             <footer>
-                <p><a href="https://www.thingweb.io/" target="_blank">© 2023 The Eclipse Thingweb Project</a></p>
+                <p><a href="https://www.thingweb.io/" target="_blank" id="thingweb-link">© 2023 The Eclipse Thingweb
+                        Project</a></p>
                 <div class="footer-links">
-                    <a href="https://www.eclipse.org" target="_blank">Eclipse</a>
-                    <a href="https://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a>
-                    <a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a>
-                    <a href="https://www.eclipse.org/legal/copyright.php" target="_blank">Copyright Agent</a>
-                    <a href="https://www.eclipse.org/legal/" target="_blank">Legal</a>
+                    <a href="https://www.eclipse.org" target="_blank" id="eclipse-link">Eclipse</a>
+                    <a href="https://www.eclipse.org/legal/privacy.php" target="_blank" id="privacy-link">Privacy
+                        Policy</a>
+                    <a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank" id="terms-link">Terms of
+                        Use</a>
+                    <a href="https://www.eclipse.org/legal/copyright.php" target="_blank" id="copyright-link">Copyright
+                        Agent</a>
+                    <a href="https://www.eclipse.org/legal/" target="_blank" id="legal-link">Legal</a>
                 </div>
             </footer>
         </div>