fix(plugin-e2e): remove uuid and semver runtime dependencies (#2650)

sunker · tolzhabayev · web-flow · commit d6987a48c10c · 2026-06-10T14:26:50.000+02:00
Co-authored-by: Timur Olzhabayev &lt;timur.olzhabayev@grafana.com&gt;
diff --git a/docusaurus/docs/e2e-test-a-plugin/feature-toggles.md b/docusaurus/docs/e2e-test-a-plugin/feature-toggles.md
@@ -70,7 +70,6 @@ Use the `isFeatureToggleEnabled` fixture to determine whether a certain feature
 
 ```typescript
 import { test, expect } from '@grafana/plugin-e2e';
-import * as semver from 'semver';
 
 test('valid credentials should return a 200 status code', async ({
   createDataSourceConfigPage,
diff --git a/docusaurus/docs/e2e-test-a-plugin/test-a-data-source-plugin/annotation-queries.md b/docusaurus/docs/e2e-test-a-plugin/test-a-data-source-plugin/annotation-queries.md
@@ -44,8 +44,7 @@ Note that the annotation query result is rendered in an Alert component starting
 :::
 
 ```ts title="annotations.spec.ts"
-import * as semver from 'semver';
-import { expect, test } from '@grafana/plugin-e2e';
+import { expect, gte, test } from '@grafana/plugin-e2e';
 
 test('should run successfully and display a success alert box when query is valid', async ({
   annotationEditPage,
@@ -62,7 +61,7 @@ test('should run successfully and display a success alert box when query is vali
   from dataset
   where $__timeFilter(time) and humidity > 95`);
   await expect(annotationEditPage.runQuery()).toBeOK();
-  if (semver.gte(grafanaVersion, '11.0.0')) {
+  if (gte(grafanaVersion, '11.0.0')) {
     await expect(annotationEditPage).toHaveAlert('success');
   }
 });
@@ -88,7 +87,7 @@ test('should fail and display an error alert box when time field is missing in t
   from dataset
   where humidity > 95`);
   await expect(annotationEditPage.runQuery()).not.toBeOK();
-  if (semver.gte(grafanaVersion, '11.0.0')) {
+  if (gte(grafanaVersion, '11.0.0')) {
     await expect(annotationEditPage).toHaveAlert('error', { hasText: 'Time field is missing' });
   }
 });
@@ -107,7 +106,7 @@ test('annotation query in provisioned dashboard should return a 200 response', a
   const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
   const annotationEditPage = await gotoAnnotationEditPage({ dashboard, id: '1' });
   await expect(annotationEditPage.runQuery()).toBeOK();
-  if (semver.gte(grafanaVersion, '11.0.0')) {
+  if (gte(grafanaVersion, '11.0.0')) {
     await expect(annotationEditPage).toHaveAlert('success', { hasText: /2 events.*/ });
   }
 });
diff --git a/docusaurus/website/src/api/gcomApiClient.js b/docusaurus/website/src/api/gcomApiClient.js
@@ -1,5 +1,4 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { v4 as uuid } from 'uuid';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 class GcomApiClient {
   constructor(baseApiUrl) {
@@ -12,24 +11,24 @@ class GcomApiClient {
       body: JSON.stringify(payload),
       headers: {
         'Content-Type': 'application/json',
-        'x-request-id': uuid(),
+        'x-request-id': crypto.randomUUID(),
       },
     });
 
     if (!response.ok) {
       const res = await response.text();
-  
+
       console.error(`Error while sending POST request: ${endpoint}`, res);
       throw new Error(`Error while sending POST request: ${endpoint}`);
     }
-  
+
     return response.json();
   }
 }
 
 export function useApiClient() {
   const { siteConfig } = useDocusaurusContext();
-  
+
   const apiUrl = siteConfig.customFields.gcomUrl;
   return new GcomApiClient(apiUrl);
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugin-e2e/package.json b/packages/plugin-e2e/package.json
@@ -46,13 +46,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.58.1",
-    "@types/uuid": "^11.0.0",
     "dotenv": "^17.2.4"
   },
   "dependencies": {
     "@grafana/e2e-selectors": "13.1.0-25644485979",
-    "semver": "^7.5.4",
-    "uuid": "^13.0.0",
     "yaml": "^2.3.4"
   }
 }
diff --git a/packages/plugin-e2e/src/fixtures/alertRuleEditPage.ts b/packages/plugin-e2e/src/fixtures/alertRuleEditPage.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { lt } from '../utils/version';
 import { TestFixture } from '@playwright/test';
 import { AlertRuleEditPage } from '../models/pages/AlertRuleEditPage';
 import { PlaywrightArgs } from '../types';
@@ -10,7 +10,7 @@ export const alertRuleEditPage: AlertRuleEditPageFixture = async (
   use,
   testInfo
 ) => {
-  if (semver.lt(grafanaVersion, '9.5.0')) {
+  if (lt(grafanaVersion, '9.5.0')) {
     console.log(
       'Testing alert rules with plugin-e2e is only supported for Grafana 9.5.0 and later. Checkout https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/test-a-data-source-plugin/annotation-queries#test-the-entire-annotation-query-execution-flow to see how to skip tests for a range of Grafana versions.'
     );
diff --git a/packages/plugin-e2e/src/fixtures/commands/createDataSource.ts b/packages/plugin-e2e/src/fixtures/commands/createDataSource.ts
@@ -1,4 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
 import { expect, TestFixture } from '@playwright/test';
 import { CreateDataSourceArgs, DataSourceSettings, PlaywrightArgs } from '../../types';
 import { GrafanaAPIClient } from '../../models/GrafanaAPIClient';
@@ -13,7 +12,7 @@ export const createDataSourceViaAPI = async (
   datasource: CreateDataSourceArgs
 ): Promise<DataSourceSettings> => {
   const { type, name } = datasource;
-  const dsName = name ?? `${type}-${uuidv4()}`;
+  const dsName = name ?? `${type}-${crypto.randomUUID()}`;
 
   const existingDataSource = await grafanaAPIClient.getDataSourceByName(dsName);
   if (existingDataSource.ok()) {
diff --git a/packages/plugin-e2e/src/fixtures/commands/gotoAlertRuleEditPage.ts b/packages/plugin-e2e/src/fixtures/commands/gotoAlertRuleEditPage.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { lt } from '../../utils/version';
 import { TestFixture } from '@playwright/test';
 import { AlertRuleArgs, PlaywrightArgs } from '../../types';
 import { AlertRuleEditPage } from '../../models/pages/AlertRuleEditPage';
@@ -11,7 +11,7 @@ export const gotoAlertRuleEditPage: GotoAlertRuleEditPageFixture = async (
   testInfo
 ) => {
   await use(async (args) => {
-    if (semver.lt(grafanaVersion, '9.5.0')) {
+    if (lt(grafanaVersion, '9.5.0')) {
       console.log(
         'Testing alert rules with plugin-e2e is only supported for Grafana 9.4.0 and later. Checkout https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/test-a-data-source-plugin/annotation-queries#test-the-entire-annotation-query-execution-flow to see how to skip tests for a range of Grafana versions.'
       );
diff --git a/packages/plugin-e2e/src/fixtures/page.ts b/packages/plugin-e2e/src/fixtures/page.ts
@@ -1,5 +1,5 @@
 import { Page, TestFixture } from '@playwright/test';
-import { gte } from 'semver';
+import { gte } from '../utils/version';
 
 import { PlaywrightArgs } from '../types';
 import { DEFAULT_OPEN_FEATURE_FLAGS } from '../options';
diff --git a/packages/plugin-e2e/src/index.ts b/packages/plugin-e2e/src/index.ts
@@ -87,6 +87,7 @@ export * from './types';
 // helper functions
 export { isLegacyFeatureEnabled, isFeatureEnabled } from './fixtures/isFeatureToggleEnabled';
 export { DEFAULT_A11Y_TAGS } from './fixtures/scanForA11yViolations';
+export { gte, lt, lte, gt, eq, satisfies } from './utils/version';
 
 // first extend with internal fixtures (not exposed to tests)
 const testWithInternal = base.extend<InternalFixtures>({
diff --git a/packages/plugin-e2e/src/models/components/ColorPicker.ts b/packages/plugin-e2e/src/models/components/ColorPicker.ts
@@ -2,7 +2,7 @@ import { Locator } from '@playwright/test';
 import { PluginTestCtx } from '../../types';
 import { ComponentBase } from './ComponentBase';
 import { SelectOptionsType } from './types';
-import { gte } from 'semver';
+import { gte } from '../../utils/version';
 import { resolveGrafanaSelector } from '../utils';
 
 export class ColorPicker extends ComponentBase {
diff --git a/packages/plugin-e2e/src/models/components/DataSourcePicker.ts b/packages/plugin-e2e/src/models/components/DataSourcePicker.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { lt } from '../../utils/version';
 import { expect } from '@playwright/test';
 import { ScopedComponent } from './ScopedComponent';
 
@@ -11,7 +11,7 @@ export class DataSourcePicker extends ScopedComponent {
       this.ctx.selectors.components.DataSourcePicker.inputV2
     );
 
-    if (semver.lt(this.ctx.grafanaVersion, '10.1.0')) {
+    if (lt(this.ctx.grafanaVersion, '10.1.0')) {
       datasourcePicker = this.getByGrafanaSelector(this.ctx.selectors.components.DataSourcePicker.container, {
         root: this.root,
       }).locator('input');
diff --git a/packages/plugin-e2e/src/models/components/Panel.ts b/packages/plugin-e2e/src/models/components/Panel.ts
@@ -1,5 +1,5 @@
 import { Locator } from '@playwright/test';
-import * as semver from 'semver';
+import { lt } from '../../utils/version';
 import { PluginTestCtx } from '../../types';
 import { GrafanaPage } from '../pages/GrafanaPage';
 
@@ -32,7 +32,7 @@ export class Panel extends GrafanaPage {
    */
   get data(): Locator {
     const panel = this.locator;
-    if (semver.lt(this.ctx.grafanaVersion, '12.2.0')) {
+    if (lt(this.ctx.grafanaVersion, '12.2.0')) {
       return panel.locator('[role="cell"]');
     }
 
@@ -55,7 +55,7 @@ export class Panel extends GrafanaPage {
     let menuItem = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.menuItems(item));
 
     // before 9.5.0, there were no proper selectors for the panel menu items
-    if (semver.lt(this.ctx.grafanaVersion, '9.5.0')) {
+    if (lt(this.ctx.grafanaVersion, '9.5.0')) {
       panelMenu = this.locator.getByRole('heading');
       parentMenuItem = this.ctx.page.getByText(options?.parentItem ?? '');
       menuItem = this.ctx.page.getByRole('menu').getByText(item);
@@ -108,7 +108,7 @@ export class Panel extends GrafanaPage {
     let selector = this.ctx.selectors.components.Panels.Panel.status(ERROR_STATUS);
 
     // the selector (not the selector value) used to identify a panel error changed in 9.4.3
-    if (semver.lt(this.ctx.grafanaVersion, '9.5.0')) {
+    if (lt(this.ctx.grafanaVersion, '9.5.0')) {
       selector = this.ctx.selectors.components.Panels.Panel.headerCornerInfo(ERROR_STATUS);
     }
 
diff --git a/packages/plugin-e2e/src/models/components/PanelEditOptionsGroup.ts b/packages/plugin-e2e/src/models/components/PanelEditOptionsGroup.ts
@@ -5,7 +5,7 @@ import { UnitPicker } from './UnitPicker';
 import { Select } from './Select';
 import { MultiSelect } from './MultiSelect';
 import { Switch } from './Switch';
-import { gte, lt } from 'semver';
+import { gte, lt } from '../../utils/version';
 import { RadioGroup } from './RadioGroup';
 import { resolveGrafanaSelector } from '../utils';
 
diff --git a/packages/plugin-e2e/src/models/components/RadioGroup.ts b/packages/plugin-e2e/src/models/components/RadioGroup.ts
@@ -2,7 +2,7 @@ import { Locator } from '@playwright/test';
 import { ComponentBase } from './ComponentBase';
 import { CheckOptionsType } from './types';
 import { PluginTestCtx } from '../../types';
-import { gte } from 'semver';
+import { gte } from '../../utils/version';
 
 export class RadioGroup extends ComponentBase {
   constructor(ctx: PluginTestCtx, element: Locator) {
diff --git a/packages/plugin-e2e/src/models/components/Switch.ts b/packages/plugin-e2e/src/models/components/Switch.ts
@@ -2,7 +2,7 @@ import { Locator } from '@playwright/test';
 import { ComponentBase } from './ComponentBase';
 import { CheckOptionsType } from './types';
 import { PluginTestCtx } from '../../types';
-import { gte, lt } from 'semver';
+import { gte, lt } from '../../utils/version';
 
 export class Switch extends ComponentBase {
   private group: Locator;
diff --git a/packages/plugin-e2e/src/models/components/TimeRange.ts b/packages/plugin-e2e/src/models/components/TimeRange.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { gte } from '../../utils/version';
 import { TimeRangeArgs } from '../../types';
 import { ScopedComponent } from './ScopedComponent';
 
@@ -16,7 +16,7 @@ export class TimeRange extends ScopedComponent {
     }
 
     if (zone) {
-      const changeTimeSettingsButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
+      const changeTimeSettingsButton = gte(this.ctx.grafanaVersion, '11.0.0')
         ? this.getByGrafanaSelector(TimeZonePicker.changeTimeSettingsButton)
         : this.ctx.page.getByRole('button', { name: 'Change time settings' });
 
diff --git a/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts b/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { gte, lt } from '../../utils/version';
 import { AlertRuleArgs, NavigateOptions, PluginTestCtx, RequestOptions } from '../../types';
 import { GrafanaPage } from './GrafanaPage';
 import { AlertRuleQuery } from '../components/AlertRuleQuery';
@@ -31,7 +31,7 @@ export class AlertRuleEditPage extends GrafanaPage {
    * Returns a locator for hte alert rule name field
    */
   get alertRuleNameField() {
-    if (semver.gte(this.ctx.grafanaVersion, '11.1.0')) {
+    if (gte(this.ctx.grafanaVersion, '11.1.0')) {
       return this.getByGrafanaSelector(this.ctx.selectors.components.AlertRules.ruleNameField);
     }
 
@@ -165,7 +165,7 @@ export class AlertRuleEditPage extends GrafanaPage {
     // Starting from Grafana 10.0.0, the alerting evaluation endpoint started returning errors in a different way.
     // Even if one or many of the queries is failed, the status code for the http response is 200 so we have to check the status of each query instead.
     // If at least one query is failed, we the response of the evaluate method is mapped to the status of the first failed query.
-    if (semver.gte(this.ctx.grafanaVersion, '10.0.0')) {
+    if (gte(this.ctx.grafanaVersion, '10.0.0')) {
       await this.ctx.page.route(this.ctx.selectors.apis.Alerting.eval, async (route) => {
         const response = await route.fetch();
         if (!response.ok()) {
@@ -189,7 +189,7 @@ export class AlertRuleEditPage extends GrafanaPage {
 
     let evaluateButton = this.getByGrafanaSelector(this.ctx.selectors.components.AlertRules.previewButton);
 
-    if (semver.lt(this.ctx.grafanaVersion, '11.1.0')) {
+    if (lt(this.ctx.grafanaVersion, '11.1.0')) {
       evaluateButton = this.ctx.page.getByRole('button', { name: 'Preview', exact: true });
     }
 
diff --git a/packages/plugin-e2e/src/models/pages/AnnotationEditPage.ts b/packages/plugin-e2e/src/models/pages/AnnotationEditPage.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { gte, lt } from '../../utils/version';
 import { DataSourcePicker } from '../components/DataSourcePicker';
 import { DashboardEditViewArgs, NavigateOptions, PluginTestCtx, RequestOptions } from '../../types';
 import { GrafanaPage } from './GrafanaPage';
@@ -26,7 +26,7 @@ export class AnnotationEditPage extends GrafanaPage {
 
     // In versions before 9.2.0, the annotation index is not part of the URL so there's no way to navigate to it directly.
     // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given annotation index.
-    if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
+    if (lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) {
       const list = this.ctx.page.locator('tbody tr');
       const variables = await list.all();
       await variables[Number(this.args.id)].click();
@@ -43,7 +43,7 @@ export class AnnotationEditPage extends GrafanaPage {
       options
     );
 
-    const testButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
+    const testButton = gte(this.ctx.grafanaVersion, '11.0.0')
       ? this.getByGrafanaSelector(this.ctx.selectors.components.Annotations.editor.testButton)
       : this.ctx.page.getByRole('button', { name: 'TEST' });
     await testButton.click();
diff --git a/packages/plugin-e2e/src/models/pages/AnnotationPage.ts b/packages/plugin-e2e/src/models/pages/AnnotationPage.ts
@@ -1,4 +1,4 @@
-import * as semver from 'semver';
+import { gte } from '../../utils/version';
 import { DashboardPageArgs, NavigateOptions, PluginTestCtx } from '../../types';
 import { AnnotationEditPage } from './AnnotationEditPage';
 import { GrafanaPage } from './GrafanaPage';
@@ -33,7 +33,7 @@ export class AnnotationPage extends GrafanaPage {
       await this.getByGrafanaSelector(addAnnotationCTAV2).click();
     } else {
       //the dashboard already has annotations
-      const newQueryButton = semver.gte(this.ctx.grafanaVersion, '11.0.0')
+      const newQueryButton = gte(this.ctx.grafanaVersion, '11.0.0')
         ? this.getByGrafanaSelector(addAnnotationCTAV2)
         : this.ctx.page.getByRole('button', { name: 'New query' });
       await newQueryButton.click();
diff --git a/packages/plugin-e2e/src/models/pages/DashboardPage.ts b/packages/plugin-e2e/src/models/pages/DashboardPage.ts
diff --git a/packages/plugin-e2e/src/models/pages/ExplorePage.ts b/packages/plugin-e2e/src/models/pages/ExplorePage.ts
diff --git a/packages/plugin-e2e/src/models/pages/PanelEditPage.ts b/packages/plugin-e2e/src/models/pages/PanelEditPage.ts
diff --git a/packages/plugin-e2e/src/models/pages/VariableEditPage.ts b/packages/plugin-e2e/src/models/pages/VariableEditPage.ts
diff --git a/packages/plugin-e2e/src/utils/version.test.ts b/packages/plugin-e2e/src/utils/version.test.ts
diff --git a/packages/plugin-e2e/src/utils/version.ts b/packages/plugin-e2e/src/utils/version.ts

Original file line number	Diff line number	Diff line change
`@@ -46,13 +46,10 @@`
`46`	`46`	`"devDependencies": {`
`47`	`47`	`"@axe-core/playwright": "^4.11.1",`
`48`	`48`	`"@playwright/test": "^1.58.1",`
`49`		`- "@types/uuid": "^11.0.0",`
`50`	`49`	`"dotenv": "^17.2.4"`
`51`	`50`	`},`
`52`	`51`	`"dependencies": {`
`53`	`52`	`"@grafana/e2e-selectors": "13.1.0-25644485979",`
`54`		`- "semver": "^7.5.4",`
`55`		`- "uuid": "^13.0.0",`
`56`	`53`	`"yaml": "^2.3.4"`
`57`	`54`	`}`
`58`	`55`	`}`