From 699510db137f7784e1e1369268726fd75c6bcdc6 Mon Sep 17 00:00:00 2001
From: Vitali Pinchuk <146737590+vitPinchuk@users.noreply.github.com>
Date: Mon, 23 Dec 2024 03:03:07 +0300
Subject: [PATCH] Update e2e test (#98)

* e2e updated

* min version dep added

* support versions in test

* remove unused method

* upd helpers

* Updates

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>
---
 .github/workflows/e2e.yml                     |  36 +-
 CHANGELOG.md                                  |   1 +
 docker-compose.yml                            |  14 +
 package-lock.json                             | 220 +++---------
 package.json                                  |   5 +-
 provisioning/dashboards/panels.json           | 340 +++++++++++-------
 src/components/QueryEditor/QueryEditor.tsx    |   7 +-
 .../ValueEditor/ValueEditor.test.tsx          |   8 +-
 .../components/ValueInput/ValueInput.test.tsx |  54 +--
 .../components/ValueInput/ValueInput.tsx      |  10 +-
 .../ValuesEditor/ValuesEditor.test.tsx        |   2 +-
 src/constants/tests.ts                        |  11 +-
 src/plugin.json                               |   2 +-
 test/panel.spec.ts                            | 219 +++++++++--
 test/utils/configEditor.ts                    |  33 ++
 test/utils/index.ts                           |   4 +
 test/utils/panel.ts                           |  77 ++++
 test/utils/queryEditor.ts                     | 271 ++++++++++++++
 test/utils/selectors.ts                       |  51 +++
 tsconfig.json                                 |   6 +-
 20 files changed, 1012 insertions(+), 359 deletions(-)
 create mode 100644 test/utils/configEditor.ts
 create mode 100644 test/utils/index.ts
 create mode 100644 test/utils/panel.ts
 create mode 100644 test/utils/queryEditor.ts
 create mode 100644 test/utils/selectors.ts

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index c52b602..ad5164a 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  tests:
+  dev:
     runs-on: ubuntu-latest
 
     steps:
@@ -42,3 +42,37 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
+  dependency:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Start Grafana
+        run: docker compose --profile dependency up -d
+
+      - name: Run e2e tests
+        run: npm run test:e2e:docker
+
+      - name: Stop Grafana
+        run: docker compose down
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report-dependency
+          path: playwright-report/
+          retention-days: 30
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69d3124..d15a619 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Features / Enhancements
 
 - Added editor for boolean values (#97)
+- Updated e2e test (#98)
 
 ## 4.4.0 (2024-11-18)
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 4dee773..75dff6e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -29,6 +29,20 @@ services:
     profiles:
       - main
 
+  grafana-dep:
+    image: grafana/grafana:10.3.0
+    ports:
+      - 3000:3000/tcp
+    environment:
+      - GF_DEFAULT_APP_MODE=development
+      - GF_USERS_DEFAULT_THEME=light
+      - GF_INSTALL_PLUGINS=volkovlabs-image-panel,marcusolsson-dynamictext-panel,grafana-llm-app
+    volumes:
+      - ./dist:/var/lib/grafana/plugins/marcusolsson-static-datasource
+      - ./provisioning:/etc/grafana/provisioning
+    profiles:
+      - dependency
+
   test:
     build:
       context: .
diff --git a/package-lock.json b/package-lock.json
index d65222c..b8db1a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-input",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-input",
-      "version": "4.4.0",
+      "version": "4.5.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@emotion/css": "^11.13.0",
@@ -19,13 +19,14 @@
         "@volkovlabs/components": "^3.5.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "semver": "^7.6.3",
         "tslib": "^2.8.1",
         "uuid": "^11.0.3"
       },
       "devDependencies": {
         "@babel/core": "^7.26.0",
         "@grafana/eslint-config": "^8.0.0",
-        "@grafana/plugin-e2e": "^1.12.1",
+        "@grafana/plugin-e2e": "^1.13.1",
         "@grafana/tsconfig": "^2.0.0",
         "@playwright/test": "^1.48.2",
         "@swc/core": "^1.9.2",
@@ -137,6 +138,15 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
@@ -168,6 +178,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
@@ -1001,35 +1020,17 @@
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
     },
     "node_modules/@grafana/e2e-selectors": {
-      "version": "11.4.0-208251",
-      "resolved": "https://registry.npmjs.org/@grafana/e2e-selectors/-/e2e-selectors-11.4.0-208251.tgz",
-      "integrity": "sha512-J6EzDaFkC8mRfQB7VgrtRba9a5FvdZslsHzZdSE6Ot05rCwzCOl50ENcBoDhfkrUCKMEEimVg25c3WskW1YbTA==",
+      "version": "11.5.0-214152",
+      "resolved": "https://registry.npmjs.org/@grafana/e2e-selectors/-/e2e-selectors-11.5.0-214152.tgz",
+      "integrity": "sha512-zxWMgtPjgZmovSwa/wrhiyiymZsJDAbQamC5f56C24spg4ccjuyFLygSUl08l3zMX19tXrkrvCYQQD004eRZIQ==",
       "dev": true,
       "dependencies": {
         "@grafana/tsconfig": "^2.0.0",
         "semver": "7.6.3",
-        "tslib": "2.7.0",
+        "tslib": "2.8.1",
         "typescript": "5.5.4"
       }
     },
-    "node_modules/@grafana/e2e-selectors/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@grafana/e2e-selectors/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true
-    },
     "node_modules/@grafana/e2e-selectors/node_modules/typescript": {
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
@@ -1093,17 +1094,6 @@
         "uuid": "^10.0.0"
       }
     },
-    "node_modules/@grafana/llm/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@grafana/llm/node_modules/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
@@ -1117,12 +1107,12 @@
       }
     },
     "node_modules/@grafana/plugin-e2e": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@grafana/plugin-e2e/-/plugin-e2e-1.12.1.tgz",
-      "integrity": "sha512-pxmtBn/zFGoyNwfHgwSYEqfH1vTp4r6GnMl0cl3tsQJXO8S58QCD0PFG5Op/OcHhsoglIQTWFVkGvUqu8c5q0A==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/@grafana/plugin-e2e/-/plugin-e2e-1.14.0.tgz",
+      "integrity": "sha512-r6ITeXNJvGrEWS8APNeLYDEUW7w1+Fip0DSFbjNKXSBqyd6FLNKJNvNbxwdXztfskV+sjzIpLPChxPQDUExFRQ==",
       "dev": true,
       "dependencies": {
-        "@grafana/e2e-selectors": "^11.4.0-207766",
+        "@grafana/e2e-selectors": "^11.5.0-213998",
         "semver": "^7.5.4",
         "uuid": "^11.0.2",
         "yaml": "^2.3.4"
@@ -1134,18 +1124,6 @@
         "@playwright/test": "^1.41.2"
       }
     },
-    "node_modules/@grafana/plugin-e2e/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@grafana/runtime": {
       "version": "11.3.0",
       "resolved": "https://registry.npmjs.org/@grafana/runtime/-/runtime-11.3.0.tgz",
@@ -3792,19 +3770,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@typescript-eslint/utils": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.14.0.tgz",
@@ -4226,18 +4191,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@volkovlabs/eslint-config/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@volkovlabs/eslint-config/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4939,6 +4892,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/babel-plugin-istanbul/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/babel-plugin-jest-hoist": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
@@ -5624,18 +5586,6 @@
         }
       }
     },
-    "node_modules/css-loader/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -6949,18 +6899,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/eslint-plugin-deprecation/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint-plugin-deprecation/node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -6996,19 +6934,6 @@
         "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
-    "node_modules/eslint-plugin-jsdoc/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
@@ -7105,6 +7030,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-simple-import-sort": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz",
@@ -7726,18 +7660,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -8988,18 +8910,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -9907,18 +9817,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-snapshot/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -10361,18 +10259,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -12953,12 +12839,14 @@
       "integrity": "sha512-C+6PCOO55NLCfS8uQjUKV/6E5XMuUcfOVsix5m0QqCCCKi495NgeQVNfWtAaD71NKHsdmFCJoXUGfir3qWdr9A=="
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/serialize-javascript": {
diff --git a/package.json b/package.json
index beed385..24b5d6d 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@volkovlabs/components": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "semver": "^7.6.3",
     "tslib": "^2.8.1",
     "uuid": "^11.0.3"
   },
@@ -18,7 +19,7 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@grafana/eslint-config": "^8.0.0",
-    "@grafana/plugin-e2e": "^1.12.1",
+    "@grafana/plugin-e2e": "^1.13.1",
     "@grafana/tsconfig": "^2.0.0",
     "@playwright/test": "^1.48.2",
     "@swc/core": "^1.9.2",
@@ -69,12 +70,14 @@
     "lint:fix": "eslint --fix --ignore-path ./.eslintignore --ext .js,.jsx,.ts,.tsx .",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "start": "docker compose pull grafana && docker compose --profile dev up",
+    "start:dep": "docker compose pull grafana-dep && docker compose --profile dependency up",
     "start:main": "docker compose pull grafana-main && docker compose --profile main up",
     "stop": "docker compose down",
     "stop:e2e": "docker-compose -f test/docker-compose.yml down",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --maxWorkers 4 --coverage",
     "test:e2e": "npx playwright test",
+    "test:e2e:dev": "npx playwright test --ui",
     "test:e2e:docker": "docker compose --profile e2e up --exit-code-from test",
     "upgrade": "npm upgrade --save"
   },
diff --git a/provisioning/dashboards/panels.json b/provisioning/dashboards/panels.json
index 67938de..539b013 100644
--- a/provisioning/dashboards/panels.json
+++ b/provisioning/dashboards/panels.json
@@ -98,45 +98,44 @@
       },
       "fieldConfig": {
         "defaults": {
-          "color": {
-            "mode": "palette-classic"
-          },
-          "custom": {
-            "hideFrom": {
-              "legend": false,
-              "tooltip": false,
-              "viz": false
-            }
-          },
-          "mappings": []
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
         },
         "overrides": []
       },
       "gridPos": {
-        "h": 10,
+        "h": 8,
         "w": 12,
         "x": 12,
         "y": 0
       },
-      "id": 2,
+      "id": 8,
       "options": {
-        "displayLabels": ["name"],
-        "legend": {
-          "displayMode": "table",
-          "placement": "right",
-          "showLegend": true,
-          "values": ["percent"]
-        },
-        "pieType": "pie",
-        "reduceOptions": {
-          "calcs": ["lastNotNull"],
-          "fields": "",
-          "values": true
+        "afterRender": "",
+        "content": "```json\n{{{json @root}}}\n```",
+        "contentPartials": [],
+        "defaultContent": "The query didn't return any results.",
+        "editor": {
+          "format": "auto",
+          "language": "markdown"
         },
-        "tooltip": {
-          "mode": "single",
-          "sort": "none"
-        }
+        "editors": [],
+        "externalStyles": [],
+        "helpers": "",
+        "renderMode": "allRows",
+        "styles": "",
+        "wrap": true
       },
       "targets": [
         {
@@ -148,25 +147,39 @@
             "fields": [
               {
                 "config": {},
-                "name": "Name",
+                "name": "time",
+                "type": "time",
+                "values": [1667276845648, 1667276845648]
+              },
+              {
+                "config": {},
+                "name": "message",
                 "type": "string",
-                "values": ["Graph", "Logs", "Node Graph", "Table", "Trace"]
+                "values": ["enable: 198", "enable: asb"]
               },
               {
                 "config": {},
-                "name": "Amount",
-                "type": "number",
-                "values": [10, 7, 3, 4, 2]
+                "name": "level",
+                "type": "string",
+                "values": ["info", "info"]
+              },
+              {
+                "config": {},
+                "name": "enable",
+                "type": "boolean",
+                "values": [true, false]
               }
             ],
-            "meta": {},
-            "name": "sales"
+            "meta": {
+              "preferredVisualisationType": "logs"
+            },
+            "name": "Server Logs"
           },
           "refId": "A"
         }
       ],
-      "title": "Getting Started",
-      "type": "piechart"
+      "title": "Data",
+      "type": "marcusolsson-dynamictext-panel"
     },
     {
       "datasource": {
@@ -234,88 +247,6 @@
       "title": "Image",
       "type": "volkovlabs-image-panel"
     },
-    {
-      "datasource": {
-        "type": "marcusolsson-static-datasource",
-        "uid": "P1D2C73DC01F2359B"
-      },
-      "fieldConfig": {
-        "defaults": {
-          "color": {
-            "mode": "palette-classic"
-          },
-          "custom": {
-            "hideFrom": {
-              "legend": false,
-              "tooltip": false,
-              "viz": false
-            }
-          },
-          "mappings": []
-        },
-        "overrides": []
-      },
-      "gridPos": {
-        "h": 10,
-        "w": 12,
-        "x": 12,
-        "y": 10
-      },
-      "id": 7,
-      "options": {
-        "displayLabels": ["name"],
-        "legend": {
-          "displayMode": "table",
-          "placement": "right",
-          "showLegend": true,
-          "values": ["percent"]
-        },
-        "pieType": "pie",
-        "reduceOptions": {
-          "calcs": ["lastNotNull"],
-          "fields": "",
-          "values": true
-        },
-        "tooltip": {
-          "mode": "single",
-          "sort": "none"
-        }
-      },
-      "targets": [
-        {
-          "datasource": {
-            "type": "marcusolsson-static-datasource",
-            "uid": "P1D2C73DC01F2359B"
-          },
-          "frame": {
-            "fields": [
-              {
-                "config": {},
-                "name": "Name",
-                "type": "string",
-                "values": ["Graph", "Logs", "Node Graph", "Table", "Trace"]
-              },
-              {
-                "config": {},
-                "name": "Amount",
-                "type": "number",
-                "values": [10, 7, 3, 4, 2]
-              }
-            ],
-            "meta": {
-              "custom": {
-                "customCode": "const values = [['Graph', 'Logs', 'Node Graph', 'Table', 'Trace'], [10, 7, 3, 4, 2]];\n\nconst result = {\n  ...frame,\n  fields: frame.fields.map((field, i) => ({\n    ...field,\n    values: values[i]\n  }))\n}\n\nreturn Promise.resolve(result);",
-                "valuesEditor": "custom"
-              }
-            },
-            "name": "sales"
-          },
-          "refId": "A"
-        }
-      ],
-      "title": "Custom Code",
-      "type": "piechart"
-    },
     {
       "datasource": {
         "type": "marcusolsson-static-datasource",
@@ -342,10 +273,10 @@
       "gridPos": {
         "h": 23,
         "w": 12,
-        "x": 0,
-        "y": 19
+        "x": 12,
+        "y": 8
       },
-      "id": 8,
+      "id": 9,
       "options": {
         "afterRender": "",
         "content": "```json\n{{{json @root}}}\n```",
@@ -474,8 +405,167 @@
           "refId": "A"
         }
       ],
-      "title": "Logs",
+      "title": "Logs (Enable)",
       "type": "marcusolsson-dynamictext-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            }
+          },
+          "mappings": []
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 10,
+        "w": 12,
+        "x": 0,
+        "y": 19
+      },
+      "id": 2,
+      "options": {
+        "displayLabels": ["name"],
+        "legend": {
+          "displayMode": "table",
+          "placement": "right",
+          "showLegend": true,
+          "values": ["percent"]
+        },
+        "pieType": "pie",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": true
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "P1D2C73DC01F2359B"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Name",
+                "type": "string",
+                "values": ["Graph", "Logs", "Node Graph", "Table", "Trace"]
+              },
+              {
+                "config": {},
+                "name": "Amount",
+                "type": "number",
+                "values": [10, 7, 3, 4, 2]
+              }
+            ],
+            "meta": {},
+            "name": "sales"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Getting Started",
+      "type": "piechart"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            }
+          },
+          "mappings": []
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 10,
+        "w": 12,
+        "x": 12,
+        "y": 31
+      },
+      "id": 7,
+      "options": {
+        "displayLabels": ["name"],
+        "legend": {
+          "displayMode": "table",
+          "placement": "right",
+          "showLegend": true,
+          "values": ["percent"]
+        },
+        "pieType": "pie",
+        "reduceOptions": {
+          "calcs": ["lastNotNull"],
+          "fields": "",
+          "values": true
+        },
+        "tooltip": {
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "P1D2C73DC01F2359B"
+          },
+          "frame": {
+            "fields": [
+              {
+                "config": {},
+                "name": "Name",
+                "type": "string",
+                "values": ["Graph", "Logs", "Node Graph", "Table", "Trace"]
+              },
+              {
+                "config": {},
+                "name": "Amount",
+                "type": "number",
+                "values": [10, 7, 3, 4, 2]
+              }
+            ],
+            "meta": {
+              "custom": {
+                "customCode": "const values = [['Graph', 'Logs', 'Node Graph', 'Table', 'Trace'], [10, 7, 3, 4, 2]];\n\nconst result = {\n  ...frame,\n  fields: frame.fields.map((field, i) => ({\n    ...field,\n    values: values[i]\n  }))\n}\n\nreturn Promise.resolve(result);",
+                "valuesEditor": "custom"
+              }
+            },
+            "name": "sales"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "Custom Code",
+      "type": "piechart"
     }
   ],
   "preload": false,
@@ -531,6 +621,6 @@
   "timezone": "",
   "title": "Panels",
   "uid": "O4tc_E6Gz",
-  "version": 8,
+  "version": 1,
   "weekStart": ""
 }
diff --git a/src/components/QueryEditor/QueryEditor.tsx b/src/components/QueryEditor/QueryEditor.tsx
index 39e2731..2943168 100644
--- a/src/components/QueryEditor/QueryEditor.tsx
+++ b/src/components/QueryEditor/QueryEditor.tsx
@@ -166,7 +166,7 @@ export const QueryEditor: React.FC<Props> = ({ datasource, onChange, onRunQuery,
   }, []);
 
   return (
-    <>
+    <div data-testid={TEST_IDS.queryEditor.root}>
       <InlineFieldRow>
         <InlineField label="Name" tooltip="Name of the data frame" grow>
           <Input
@@ -195,8 +195,9 @@ export const QueryEditor: React.FC<Props> = ({ datasource, onChange, onRunQuery,
         )}
 
         {datasource.codeEditorEnabled && (
-          <InlineField label="Values Editor">
+          <InlineField htmlFor="config-values-editor" label="Values Editor">
             <Select
+              inputId="config-values-editor"
               width={17}
               value={model.meta?.custom?.valuesEditor || ValuesEditorType.MANUAL}
               onChange={onChangeValuesEditor}
@@ -243,6 +244,6 @@ export const QueryEditor: React.FC<Props> = ({ datasource, onChange, onRunQuery,
           <ValuesEditor model={model} onChange={onChangeModel} />
         </CollapsableSection>
       )}
-    </>
+    </div>
   );
 };
diff --git a/src/components/ValueEditor/ValueEditor.test.tsx b/src/components/ValueEditor/ValueEditor.test.tsx
index 9c8e1b4..5c82786 100644
--- a/src/components/ValueEditor/ValueEditor.test.tsx
+++ b/src/components/ValueEditor/ValueEditor.test.tsx
@@ -33,12 +33,12 @@ describe('Value Editor', () => {
   });
 
   it('Should render default ValueInput for string type', () => {
-    render(getComponent({ value: '123', type: FieldType.string }));
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toBeInTheDocument();
+    render(getComponent({ value: '123', type: FieldType.string, label: 'string' }));
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('string'))).toBeInTheDocument();
   });
 
   it('Should render default ValueInput for number type', () => {
-    render(getComponent({ value: '123', type: FieldType.number }));
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldNumber)).toBeInTheDocument();
+    render(getComponent({ value: '123', type: FieldType.number, label: 'number' }));
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldNumber('number'))).toBeInTheDocument();
   });
 });
diff --git a/src/components/ValueEditor/components/ValueInput/ValueInput.test.tsx b/src/components/ValueEditor/components/ValueInput/ValueInput.test.tsx
index 238865a..be0cf74 100644
--- a/src/components/ValueEditor/components/ValueInput/ValueInput.test.tsx
+++ b/src/components/ValueEditor/components/ValueInput/ValueInput.test.tsx
@@ -51,72 +51,76 @@ describe('Input', () => {
   });
 
   it('Should update string value', async () => {
-    render(getComponent({ value: '123', type: FieldType.string }));
+    render(getComponent({ value: '123', type: FieldType.string, label: 'name' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toBeInTheDocument();
 
-    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldString), { target: { value: 'hello' } });
+    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldString('name')), { target: { value: 'hello' } });
 
     expect(onChange).toHaveBeenCalledWith('hello');
   });
 
   it('Should render disabled string value', async () => {
-    render(getComponent({ value: null, type: FieldType.string }));
+    render(getComponent({ value: null, type: FieldType.string, label: 'name' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toBeInTheDocument();
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toHaveValue('null');
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toHaveValue('null');
   });
 
   it('Should disable string value', async () => {
-    render(getComponent({ value: 'hello', type: FieldType.string }));
+    render(getComponent({ value: 'hello', type: FieldType.string, label: 'name' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toBeInTheDocument();
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toHaveValue('hello');
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toHaveValue('hello');
 
-    fireEvent.click(screen.getByTestId(TEST_IDS.valueInput.iconDisable));
+    fireEvent.click(screen.getByTestId(TEST_IDS.valueInput.iconDisable('name')));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toHaveValue('null');
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toHaveValue('null');
   });
 
   it('Should enable string value', async () => {
-    render(getComponent({ value: null, type: FieldType.string }));
+    render(getComponent({ value: null, type: FieldType.string, label: 'name' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toBeInTheDocument();
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toHaveValue('null');
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toHaveValue('null');
 
-    fireEvent.click(screen.getByTestId(TEST_IDS.valueInput.iconDisable));
+    fireEvent.click(screen.getByTestId(TEST_IDS.valueInput.iconDisable('name')));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString)).toHaveValue('');
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldString('name'))).toHaveValue('');
   });
 
   it('Should update textarea value', async () => {
     const value = new Array(TEXT_AREA_LENGTH + 1).fill('a').join('');
-    render(getComponent({ value: value, type: FieldType.string }));
+    render(getComponent({ value: value, type: FieldType.string, label: 'name' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldTextarea)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldTextarea('name'))).toBeInTheDocument();
 
-    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldTextarea), { target: { value: value + 'new' } });
+    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldTextarea('name')), {
+      target: { value: value + 'new' },
+    });
 
     expect(onChange).toHaveBeenCalledWith(value + 'new');
   });
 
   it('Should update number value', async () => {
-    render(getComponent({ value: '123', type: FieldType.number }));
+    render(getComponent({ value: '123', type: FieldType.number, label: 'age' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldNumber)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldNumber('age'))).toBeInTheDocument();
 
-    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldNumber), { target: { value: '111' } });
+    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldNumber('age')), { target: { value: '111' } });
 
     expect(onChange).toHaveBeenCalledWith('111');
   });
 
   it('Should update date time value', async () => {
-    render(getComponent({ value: '123', type: FieldType.time }));
+    render(getComponent({ value: '123', type: FieldType.time, label: 'time' }));
 
-    expect(screen.getByTestId(TEST_IDS.valueInput.fieldDateTime)).toBeInTheDocument();
+    expect(screen.getByTestId(TEST_IDS.valueInput.fieldDateTime('time'))).toBeInTheDocument();
 
     const safeDate = new Date('02-02-2023');
-    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldDateTime), { target: { value: dateTime(safeDate) } });
+    fireEvent.change(screen.getByTestId(TEST_IDS.valueInput.fieldDateTime('time')), {
+      target: { value: dateTime(safeDate) },
+    });
 
     expect(onChange).toHaveBeenCalledWith(dateTime(safeDate).toString());
   });
diff --git a/src/components/ValueEditor/components/ValueInput/ValueInput.tsx b/src/components/ValueEditor/components/ValueInput/ValueInput.tsx
index 8ac335f..22caebb 100644
--- a/src/components/ValueEditor/components/ValueInput/ValueInput.tsx
+++ b/src/components/ValueEditor/components/ValueInput/ValueInput.tsx
@@ -79,7 +79,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
    * Icon
    */
   const suffixElement = (
-    <div data-testid={TEST_IDS.valueInput.iconDisable} onClick={disableInput}>
+    <div data-testid={TEST_IDS.valueInput.iconDisable(label)} onClick={disableInput}>
       <Icon className={styles.suffixElement} name={disabled ? 'eye-slash' : 'eye'} />
     </div>
   );
@@ -98,7 +98,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
           type="number"
           value={disabled ? undefined : (value ?? '')}
           suffix={suffixElement}
-          data-testid={TEST_IDS.valueInput.fieldNumber}
+          data-testid={TEST_IDS.valueInput.fieldNumber(label)}
         />
       </InlineField>
     );
@@ -119,7 +119,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
               onChange(timestamp);
             }
           }}
-          data-testid={TEST_IDS.valueInput.fieldDateTime}
+          data-testid={TEST_IDS.valueInput.fieldDateTime(label)}
         />
       </InlineField>
     );
@@ -137,7 +137,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
             setValid(verifyFieldValue(event.currentTarget.value, type).ok);
             onChange(event.currentTarget.value);
           }}
-          data-testid={TEST_IDS.valueInput.fieldTextarea}
+          data-testid={TEST_IDS.valueInput.fieldTextarea(label)}
         />
       </InlineField>
     );
@@ -155,7 +155,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
         }}
         value={disabled ? 'null' : (value ?? '')}
         suffix={suffixElement}
-        data-testid={TEST_IDS.valueInput.fieldString}
+        data-testid={TEST_IDS.valueInput.fieldString(label)}
       />
     </InlineField>
   );
diff --git a/src/components/ValuesEditor/ValuesEditor.test.tsx b/src/components/ValuesEditor/ValuesEditor.test.tsx
index e44a816..c769083 100644
--- a/src/components/ValuesEditor/ValuesEditor.test.tsx
+++ b/src/components/ValuesEditor/ValuesEditor.test.tsx
@@ -257,7 +257,7 @@ describe('Editor', () => {
     expect(items[0]).toBeInTheDocument();
     const item1Selectors = within(items[0]);
 
-    fireEvent.change(item1Selectors.getByTestId(TEST_IDS.valueInput.fieldString), {
+    fireEvent.change(item1Selectors.getByTestId(TEST_IDS.valueInput.fieldString('key')), {
       target: { value: 'New Key' },
     });
 
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index ef77704..d9e75f2 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -15,6 +15,7 @@ export const TEST_IDS = {
     buttonExpandAll: 'data-testid fields-editor button-expand-all',
   },
   queryEditor: {
+    root: 'data-testid query-editor root',
     customValuesEditor: 'data-testid query-editor custom-values-editor',
     fieldName: 'data-testid query-editor field-name',
     fieldPreferredVisualizationType: 'query-editor field-preferred-visualization-type',
@@ -23,11 +24,11 @@ export const TEST_IDS = {
     fieldOpenaiMessage: 'data-testid query-editor field-openai-message',
   },
   valueInput: {
-    fieldDateTime: 'data-testid value-input field-date-time',
-    fieldNumber: 'data-testid value-input field-number',
-    fieldString: 'data-testid value-input field-string',
-    fieldTextarea: 'data-testid value-input field-textarea',
-    iconDisable: 'data-testid value-input icon-disable',
+    fieldDateTime: (name: string) => `data-testid value-input field-date-time-${name}`,
+    fieldNumber: (name: string) => `data-testid value-input field-number-${name}`,
+    fieldString: (name: string) => `data-testid value-input field-string-${name}`,
+    fieldTextarea: (name: string) => `data-testid value-input field-textarea-${name}`,
+    iconDisable: (name: string) => `data-testid value-input icon-disable-${name}`,
   },
   booleanEditor: {
     fieldSwitch: 'data-testid boolean-input field-switch',
diff --git a/src/plugin.json b/src/plugin.json
index fab6ad0..813b54f 100644
--- a/src/plugin.json
+++ b/src/plugin.json
@@ -2,7 +2,7 @@
   "$schema": "https://github.com/grafana/grafana/raw/main/docs/sources/developers/plugins/plugin.schema.json",
   "annotations": true,
   "dependencies": {
-    "grafanaDependency": ">=10.2.0",
+    "grafanaDependency": ">=10.3.0",
     "plugins": []
   },
   "id": "marcusolsson-static-datasource",
diff --git a/test/panel.spec.ts b/test/panel.spec.ts
index 4c3ae6b..c435c45 100644
--- a/test/panel.spec.ts
+++ b/test/panel.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@grafana/plugin-e2e';
+import { ConfigEditorHelper, QueryEditorHelper, PanelHelper } from './utils';
 
 test.describe('Static Data Source', () => {
   test('Check grafana version', async ({ grafanaVersion }) => {
@@ -6,31 +7,207 @@ test.describe('Static Data Source', () => {
     expect(grafanaVersion).toEqual(grafanaVersion);
   });
 
-  test('Viewing a panel with a Logs from Static Data', async ({ gotoDashboardPage, dashboardPage, page }) => {
-    /**
-     * Go To panels dashboard panels.json
-     * return dashboardPage
-     */
-    await gotoDashboardPage({ uid: 'O4tc_E6Gz' });
+  test.describe('Datasource config editor', () => {
+    test('Should render config editor', async ({ createDataSourceConfigPage, readProvisionedDataSource, page }) => {
+      const datasource = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
+      await createDataSourceConfigPage({ type: datasource.type });
+      const configEditor = new ConfigEditorHelper(page);
 
-    /**
-     * Await content load
-     */
-    await page.waitForTimeout(1000);
+      await configEditor.checkPresenceEditor();
+      await configEditor.checkPresenceValuesEditor();
+    });
+  });
+
+  test.describe('Query editor', () => {
+    test('Table query should return 2 columns via manual query editor', async ({
+      page,
+      selectors,
+      panelEditPage,
+      readProvisionedDataSource,
+    }) => {
+      const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
+      await panelEditPage.datasource.set(ds.name);
+      await panelEditPage.setVisualization('Table');
+
+      const queryEditor = new QueryEditorHelper(page, panelEditPage, selectors);
+      await queryEditor.checkQueryNameFieldPresence();
+      await queryEditor.setName('Test');
+      await queryEditor.checkName('Test');
+
+      const fieldsEditor = queryEditor.getFieldsEditor();
+      const valuesEditor = queryEditor.getValuesEditor();
+
+      await fieldsEditor.checkAddButtonPresence();
+      await valuesEditor.checkAddButtonPresence();
+
+      await fieldsEditor.addField();
+      await fieldsEditor.addField();
+      await fieldsEditor.checkFieldsCount(2);
+
+      const fieldValue = fieldsEditor.getFieldRow(0);
+      const fieldName = fieldsEditor.getFieldRow(1);
+
+      await fieldValue.setName('value');
+      await fieldName.setName('name');
+      await fieldValue.checkName('value');
+      await fieldName.checkName('name');
+
+      await valuesEditor.addValue();
+      await valuesEditor.addValue();
+      await valuesEditor.checkValuesCount(2);
+
+      const firstRow = valuesEditor.getValueRow(0);
+      const secondRow = valuesEditor.getValueRow(1);
+      await firstRow.setValue('name', 'name 1');
+      await firstRow.setValue('value', 'value 1');
+      await secondRow.setValue('name', 'name 2');
+      await secondRow.setValue('value', 'value 2');
+
+      await expect(panelEditPage.panel.data).toContainText(['value 1', 'name 1', 'value 2', 'name 2']);
+    });
+
+    test('Table query should return columns via code query editor', async ({
+      page,
+      selectors,
+      panelEditPage,
+      readProvisionedDataSource,
+    }) => {
+      const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
+      await panelEditPage.datasource.set(ds.name);
+      await panelEditPage.setVisualization('Table');
+
+      const queryEditor = new QueryEditorHelper(page, panelEditPage, selectors);
+      await queryEditor.checkQueryNameFieldPresence();
+      await queryEditor.setName('Test');
+      await queryEditor.checkName('Test');
+
+      await queryEditor.changeValuesEditorType('JavaScript');
+      const fieldsEditor = queryEditor.getFieldsEditor();
+
+      await fieldsEditor.checkAddButtonPresence();
+
+      await fieldsEditor.addField();
+      await fieldsEditor.addField();
+
+      const fieldValue = fieldsEditor.getFieldRow(0);
+      const fieldName = fieldsEditor.getFieldRow(1);
+      await fieldValue.setName('value');
+      await fieldName.setName('name');
+
+      const codeEditor = queryEditor.getCodeEditor();
+      await codeEditor.checkPresence();
+
+      /**
+       * Check default code
+       */
+      await codeEditor.checkValue(
+        `const result = {\n  ...frame,\n  fields: frame.fields.map((field) => ({\n    ...field,\n    values: []\n  }))\n}\n\nreturn Promise.resolve(result);`
+      );
+
+      await codeEditor.clearCodeEditor();
+      await fieldName.checkName('name');
+      await codeEditor.setValue(
+        `const currentFields = frame.fields.map((field) =>({...field, values:['test1','test2']}));\nconst result = {...frame, fields:currentFields};\nreturn Promise.resolve(result);`
+      );
+      await fieldValue.checkName('value');
+      await fieldName.checkName('name');
+
+      await expect(panelEditPage.panel.fieldNames).toContainText(['value', 'name']);
+      await expect(panelEditPage.panel.data).toContainText(['test1', 'test1', 'test2', 'test2']);
+    });
+  });
+
+  test.describe('Variables editor', () => {
+    test('Should render variable editor', async ({ variableEditPage, page, readProvisionedDataSource, selectors }) => {
+      const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
+      await variableEditPage.datasource.set(ds.name);
+      const queryEditor = new QueryEditorHelper(page, variableEditPage, selectors);
+      await queryEditor.checkPresence();
+    });
+
+    test('Should return values', async ({ variableEditPage, page, readProvisionedDataSource, selectors }) => {
+      const ds = await readProvisionedDataSource({ fileName: 'datasources.yaml' });
+      await variableEditPage.setVariableType('Query');
+      await variableEditPage.datasource.set(ds.name);
+      const queryEditor = new QueryEditorHelper(page, variableEditPage, selectors);
+      await queryEditor.checkPresence();
+
+      const fieldsEditor = queryEditor.getFieldsEditor();
+      const valuesEditor = queryEditor.getValuesEditor();
+
+      await fieldsEditor.addField();
+      const fieldValue = fieldsEditor.getFieldRow(0);
+      await fieldValue.setName('value');
+
+      await valuesEditor.addValue();
+      await valuesEditor.addValue();
+      await valuesEditor.checkValuesCount(2);
+
+      const firstRow = valuesEditor.getValueRow(0);
+      const secondRow = valuesEditor.getValueRow(1);
+      await firstRow.setValue('value', 'value 1');
+      await secondRow.setValue('value', 'value 2');
+
+      await variableEditPage.runQuery();
+      await expect(variableEditPage).toDisplayPreviews(['value 1', 'value 2']);
+    });
+  });
+
+  test.describe('Provisioning', () => {
+    test('Should return configured values', async ({ gotoDashboardPage, readProvisionedDashboard, selectors }) => {
+      /**
+       * Go To Panels dashboard panels.json
+       * return dashboardPage
+       */
+      const dashboard = await readProvisionedDashboard({ fileName: 'panels.json' });
+      const dashboardPage = await gotoDashboardPage({ uid: dashboard.uid });
+
+      const panel = new PanelHelper(dashboardPage, 'Logs', selectors);
+      await panel.checkIfNoErrors();
 
-    /**
-     * Find panel by title with data
-     * Should be visible
-     */
-    await expect(dashboardPage.getPanelByTitle('Logs').locator).toBeVisible();
+      const table = panel.getTable();
+      await table.checkTablePresence();
+      await table.checkRowsCount(3);
+      await table.checkRowContent(0, 'user logged in');
+      await table.checkRowContent(1, 'user login failed');
+      await table.checkRowContent(2, 'user registered');
+    });
 
-    /**
-     * Check content
-     */
-    await expect(dashboardPage.getPanelByTitle('Logs').locator.locator('tr').nth(0)).toContainText('user logged in');
+    test('Should return configured data', async ({
+      gotoDashboardPage,
+      readProvisionedDashboard,
+      selectors,
+      grafanaVersion,
+    }) => {
+      /**
+       * Go To Panels dashboard panels.json
+       * return dashboardPage
+       */
+      const dashboard = await readProvisionedDashboard({ fileName: 'panels.json' });
+      const dashboardPage = await gotoDashboardPage({ uid: dashboard.uid });
 
-    await expect(dashboardPage.getPanelByTitle('Logs').locator.locator('tr').nth(1)).toContainText('user login failed');
+      const panel = new PanelHelper(dashboardPage, 'Data', selectors);
+      await panel.checkIfNoErrors();
 
-    await expect(dashboardPage.getPanelByTitle('Logs').locator.locator('tr').nth(2)).toContainText('user registered');
+      await panel.checkContent(
+        `{
+  "data": [
+    {
+      "time": 1667276845648,
+      "message": "enable: 198",
+      "level": "info",
+      "enable": true
+    },
+    {
+      "time": 1667276845648,
+      "message": "enable: asb",
+      "level": "info",
+      "enable": false
+    }
+  ]
+}`,
+        grafanaVersion
+      );
+    });
   });
 });
diff --git a/test/utils/configEditor.ts b/test/utils/configEditor.ts
new file mode 100644
index 0000000..868d911
--- /dev/null
+++ b/test/utils/configEditor.ts
@@ -0,0 +1,33 @@
+import { Locator, Page } from '@playwright/test';
+import { expect } from '@grafana/plugin-e2e';
+import { getLocatorSelectors, LocatorSelectors } from './selectors';
+import { TEST_IDS } from '../../src/constants/tests';
+
+/**
+ * Config Editor Helper
+ */
+export class ConfigEditorHelper {
+  private readonly locator: Locator;
+  private readonly selectors: LocatorSelectors<typeof TEST_IDS.configEditor>;
+
+  constructor(page: Page) {
+    this.locator = page.locator('body');
+    this.selectors = getLocatorSelectors(TEST_IDS.configEditor)(this.locator);
+  }
+
+  private getMsg(msg: string): string {
+    return `Config Editor: ${msg}`;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public async checkPresenceEditor() {
+    return expect(this.selectors.root(), this.getMsg(`Check editor`)).toBeVisible();
+  }
+
+  public async checkPresenceValuesEditor() {
+    return expect(this.selectors.codeEditorEnabledContainer(), this.getMsg(`Check Values editor`)).toBeVisible();
+  }
+}
diff --git a/test/utils/index.ts b/test/utils/index.ts
new file mode 100644
index 0000000..77845a7
--- /dev/null
+++ b/test/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './selectors';
+export * from './configEditor';
+export * from './queryEditor';
+export * from './panel';
diff --git a/test/utils/panel.ts b/test/utils/panel.ts
new file mode 100644
index 0000000..d0fd85c
--- /dev/null
+++ b/test/utils/panel.ts
@@ -0,0 +1,77 @@
+import * as semver from 'semver';
+import { Locator } from '@playwright/test';
+import { DashboardPage, E2ESelectorGroups, expect, Panel } from '@grafana/plugin-e2e';
+
+/**
+ * Table Helper
+ */
+export class TableHelper {
+  private readonly locator: Locator;
+
+  constructor(tableLocator: Locator) {
+    this.locator = tableLocator;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  private getMsg(msg: string): string {
+    return `Table: ${msg}`;
+  }
+
+  public async checkTablePresence() {
+    return expect(this.get(), this.getMsg('Check Presence')).toBeVisible();
+  }
+
+  public async checkRowsCount(count: number) {
+    return expect(await this.get().locator('tr').all(), this.getMsg('Check Presence')).toHaveLength(count);
+  }
+
+  public async checkRowContent(rowNumber: number, text: string) {
+    return expect(this.get().locator('tr').nth(rowNumber), this.getMsg('Check Presence')).toContainText(text);
+  }
+}
+
+/**
+ * Panel Helper
+ */
+export class PanelHelper {
+  private readonly locator: Locator;
+  private readonly panel: Panel;
+  private readonly selectors: E2ESelectorGroups;
+
+  constructor(dashboardPage: DashboardPage, panelTitle: string, selectors: E2ESelectorGroups) {
+    this.panel = dashboardPage.getPanelByTitle(panelTitle);
+    this.locator = this.panel.locator;
+    this.selectors = selectors;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public getContainer() {
+    return this.get().getByTestId(this.selectors.components.Panels.Panel.content);
+  }
+
+  private getMsg(msg: string): string {
+    return `Panel: ${msg}`;
+  }
+
+  public getTable() {
+    const table = this.panel.locator.getByRole('table');
+    return new TableHelper(table);
+  }
+
+  public async checkContent(text: string, grafanaVersion: string) {
+    if (semver.gte(grafanaVersion, '11.3.0')) {
+      return expect(this.getContainer(), this.getMsg('Check If No Errors')).toContainText(text);
+    }
+    return expect(this.get().getByTestId('data-testid text content')).toContainText(text);
+  }
+
+  public async checkIfNoErrors() {
+    return expect(this.panel.getErrorIcon(), this.getMsg('Check If No Errors')).not.toBeVisible();
+  }
+}
diff --git a/test/utils/queryEditor.ts b/test/utils/queryEditor.ts
new file mode 100644
index 0000000..b5650af
--- /dev/null
+++ b/test/utils/queryEditor.ts
@@ -0,0 +1,271 @@
+import { Locator, Page } from '@playwright/test';
+import { E2ESelectorGroups, expect, PanelEditPage, VariableEditPage } from '@grafana/plugin-e2e';
+import { getLocatorSelectors, LocatorSelectors } from './selectors';
+import { TEST_IDS } from '../../src/constants/tests';
+
+/**
+ * Selectors
+ */
+const getFieldsSelector = getLocatorSelectors(TEST_IDS.fieldsEditor);
+const getValuesSelector = getLocatorSelectors(TEST_IDS.valuesEditor);
+
+/**
+ * Field Helper
+ */
+export class FieldHelper {
+  private readonly locator: Locator;
+
+  constructor(public readonly parentLocator: Locator) {
+    this.locator = parentLocator;
+  }
+
+  private getMsg(msg: string): string {
+    return `Field Helper: ${msg}`;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public async setName(name: string) {
+    const fieldName = this.get().getByTestId(TEST_IDS.fieldsEditor.fieldName);
+    await fieldName.fill(name);
+    await fieldName.blur();
+  }
+
+  public async checkName(name: string) {
+    const fieldName = this.get().getByTestId(TEST_IDS.fieldsEditor.fieldName);
+    return expect(fieldName, this.getMsg(`Check name ${name}`)).toHaveValue(name);
+  }
+}
+
+/**
+ * Value Helper
+ */
+export class ValueHelper {
+  private readonly locator: Locator;
+
+  constructor(public readonly parentLocator: Locator) {
+    this.locator = parentLocator;
+  }
+
+  private getMsg(msg: string): string {
+    return `Value Helper: ${msg}`;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public async setValue(fieldName: string, value: string) {
+    const field = this.get().getByTestId(TEST_IDS.valueInput.fieldString(fieldName));
+    await field.fill(value);
+    await field.blur();
+  }
+
+  public async checkValue(fieldName: string, value: string) {
+    const field = this.get().getByTestId(TEST_IDS.valueInput.fieldString(fieldName));
+    return expect(field, this.getMsg(`Check value of field ${fieldName}`)).toHaveValue(value);
+  }
+
+  public async checkName(name: string) {
+    const fieldName = this.get().getByTestId(TEST_IDS.fieldsEditor.fieldName);
+    return expect(fieldName, this.getMsg(`Check name ${name}`)).toHaveValue(name);
+  }
+}
+
+/**
+ * Fields Editor Helper
+ */
+export class FieldsEditorHelper {
+  private readonly selectors: LocatorSelectors<typeof TEST_IDS.fieldsEditor>;
+
+  constructor(public readonly locator: Locator) {
+    this.selectors = this.getSelectors(locator);
+  }
+
+  private getMsg(msg: string): string {
+    return `Fields Editor: ${msg}`;
+  }
+
+  private getSelectors(locator: Locator) {
+    return getFieldsSelector(locator);
+  }
+
+  public get() {
+    return this.selectors;
+  }
+
+  public async checkAddButtonPresence() {
+    return expect(this.get().buttonAdd(), this.getMsg('Check Add button presence')).toBeVisible();
+  }
+
+  public async addField() {
+    await this.get().buttonAdd().click();
+  }
+
+  public async checkFieldsCount(count: number) {
+    return expect(await this.get().item().all()).toHaveLength(count);
+  }
+
+  public getFieldRow(fieldNumber: number) {
+    const field = this.get().item().nth(fieldNumber);
+    return new FieldHelper(field);
+  }
+}
+
+/**
+ * Values Editor Helper
+ */
+export class ValuesEditorHelper {
+  private readonly selectors: LocatorSelectors<typeof TEST_IDS.valuesEditor>;
+
+  constructor(public readonly locator: Locator) {
+    this.selectors = this.getSelectors(locator);
+  }
+
+  private getMsg(msg: string): string {
+    return `Values Editor: ${msg}`;
+  }
+
+  private getSelectors(locator: Locator) {
+    return getValuesSelector(locator);
+  }
+
+  public get() {
+    return this.selectors;
+  }
+
+  public async checkAddButtonPresence() {
+    return expect(this.get().buttonAdd(), this.getMsg('Check Add button presence')).toBeVisible();
+  }
+
+  public async addValue() {
+    const values = await this.get().row().all();
+
+    if (values.length) {
+      await this.get().buttonAddTop().click();
+    } else {
+      await this.get().buttonAdd().click();
+    }
+  }
+
+  public async checkValuesCount(count: number) {
+    return expect(await this.get().row().all()).toHaveLength(count);
+  }
+
+  public getValueRow(fieldNumber: number) {
+    const field = this.get().row().nth(fieldNumber);
+    return new ValueHelper(field);
+  }
+}
+
+/**
+ * Code Editor Helper
+ */
+export class CodeEditorHelper {
+  private readonly locator: Locator;
+
+  constructor(public readonly editor: Locator) {
+    this.locator = editor;
+  }
+
+  private getMsg(msg: string): string {
+    return `Code Editor: ${msg}`;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public async checkPresence() {
+    return expect(this.get(), this.getMsg('Check Code editor presence')).toBeVisible();
+  }
+
+  public async setValue(value: string) {
+    await this.get().click();
+    await this.get().fill(value);
+    await this.get().blur();
+  }
+
+  public async clearCodeEditor() {
+    await this.get().click();
+    await this.get().fill('');
+    await this.get().blur();
+  }
+
+  public async checkValue(value: string) {
+    return expect(this.get()).toHaveValue(value);
+  }
+}
+
+/**
+ * Query Editor Helper
+ */
+export class QueryEditorHelper {
+  private readonly locator: Locator;
+  private readonly grafanaPage: PanelEditPage | VariableEditPage;
+  private readonly selectors: LocatorSelectors<typeof TEST_IDS.queryEditor>;
+  private readonly grafanaSelectors: E2ESelectorGroups;
+
+  constructor(page: Page, grafanaPage: PanelEditPage | VariableEditPage, grafanaSelectors: E2ESelectorGroups) {
+    this.locator = page.locator('body');
+    this.grafanaPage = grafanaPage;
+    this.grafanaSelectors = grafanaSelectors;
+    this.selectors = getLocatorSelectors(TEST_IDS.queryEditor)(this.locator);
+  }
+
+  private getMsg(msg: string): string {
+    return `Query Editor: ${msg}`;
+  }
+
+  public get() {
+    return this.locator;
+  }
+
+  public getSelectors() {
+    return this.selectors;
+  }
+
+  public async checkPresence() {
+    return expect(this.selectors.root(), this.getMsg('Check presence')).toBeVisible();
+  }
+
+  public async checkQueryNameFieldPresence() {
+    return expect(this.selectors.fieldName(), this.getMsg('Check Name presence')).toBeVisible();
+  }
+
+  public async setName(name: string) {
+    await this.selectors.fieldName().fill(name);
+    await this.selectors.fieldName().blur();
+  }
+
+  public async checkName(name: string) {
+    return expect(this.selectors.fieldName(), this.getMsg('Check Name presence')).toHaveValue(name);
+  }
+
+  public async changeValuesEditorType(key: string) {
+    await this.selectors.root().getByRole('combobox').click();
+    await this.grafanaPage
+      .getByGrafanaSelector(this.grafanaPage.ctx.selectors.components.Select.option)
+      .getByText(key)
+      .click();
+  }
+
+  public getCodeEditor() {
+    const codeEditor = this.selectors
+      .root()
+      .getByTestId(this.grafanaSelectors.components.CodeEditor.container)
+      .getByRole('textbox');
+
+    return new CodeEditorHelper(codeEditor);
+  }
+
+  public getFieldsEditor() {
+    return new FieldsEditorHelper(this.get());
+  }
+
+  public getValuesEditor() {
+    return new ValuesEditorHelper(this.get());
+  }
+}
diff --git a/test/utils/selectors.ts b/test/utils/selectors.ts
new file mode 100644
index 0000000..0da35dc
--- /dev/null
+++ b/test/utils/selectors.ts
@@ -0,0 +1,51 @@
+import { Locator } from '@playwright/test';
+
+/**
+ * Selector
+ */
+type LocatorSelector<TArgs extends unknown[]> = (...args: TArgs) => ReturnType<() => Locator>;
+
+/**
+ * Check If Selector Object
+ */
+type IsSelectorObject<TCandidate> = TCandidate extends {
+  selector: (...args: unknown[]) => void;
+  apply: (...args: unknown[]) => void;
+}
+  ? TCandidate & { selector: TCandidate['selector']; apply: TCandidate['apply'] }
+  : never;
+
+/**
+ * Selectors
+ */
+export type LocatorSelectors<T> = {
+  [K in keyof T]: T[K] extends (...args: infer Args) => void
+    ? LocatorSelector<Args>
+    : T[K] extends IsSelectorObject<T[K]>
+      ? LocatorSelector<Parameters<T[K]['selector']>>
+      : LocatorSelector<[]>;
+};
+
+export const getLocatorSelectors =
+  <TSelectors extends Record<keyof TSelectors, TSelectors[keyof TSelectors]>>(
+    selectors: TSelectors
+  ): ((locator: Locator) => LocatorSelectors<TSelectors>) =>
+  (locator) => {
+    return Object.entries(selectors).reduce((acc, [key, selector]) => {
+      const getElement = (...args: unknown[]): Locator => {
+        const getValue = typeof selector === 'object' && 'selector' in selector! ? selector.selector : selector;
+        const value = typeof getValue === 'function' ? getValue(...args) : getValue;
+
+        if (value.startsWith('data-testid')) {
+          return locator.getByTestId(value);
+        }
+
+        return locator.getByLabel(value);
+      };
+
+      return {
+        ...acc,
+        [key]: getElement,
+      };
+    }, {} as LocatorSelectors<TSelectors>);
+  };
diff --git a/tsconfig.json b/tsconfig.json
index db840b5..fb026cb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,8 @@
 {
   "extends": "./.config/tsconfig.json",
-  "include": ["./src", ".config/types", ".config/jest-setup.ts", "./test"]
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["*"]
+    }
+  }
 }