E2E: migrate to playwright (#107241)

* separate playwright into its own folder * better separation * add login scenario, add tags * remove ui option * update CODEOWNERS * add a panels suite test * migrate queries test to playwright * rename + add dashlist test * add panelEdit_base * add geomap map controls test * add geomap-layer-types * add geomap-spatial-operations tests * add frontend-sandbox-panel tests * add smoke-tests-suite * add comment about adding datasource * add dashboard-browse-nested * add dashboard-browse * add dashboard-export-json * add dashboard-keybindings test * remove @wip tag * turn on screenshots and add comment for why this test fails * add dashboard-links-without-slug test * try adding permissions in the test as well * add dashboard-live-streaming * context in the test doesn't work - sad * create dashboard-public-templating * add dashboard-public-create and make live streaming more resilient * add share externally test * add dashboard-share-internally * add share-snapshot-create test * add dashboard-templating * add timepicker tests * add embedded-dashboard test * add general_dashboards test * add import-dashboard test * add load-options-from-url test * add new-constant-variable test * add custom-variable test * add new-datasource-variable test * add new-interval-variable test * add text-box-variable test * add new-query-variable test * add horizontal repeat test * add panel-vertical-repeat test * add empty-row-repeat test * add set-options-from-ui test * add snapshot-create test * add templating test * add textbox-variables test * add cloud-plugins-suite * add storybook verification tests * add playwright storybook verification workflow * add playwright browsers * update CODEOWNERS * test change to trigger storybook verification workflows * try container instead * get the version right... * go back to installing - less chance of forgetting to update * Basic Github Actions Squashed commit of the following: commit f84c650a71 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 13:23:46 2025 +0100 add arg for sharding, but not using it yet commit 7bcf0512c6 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 12:30:30 2025 +0100 less newline commit b643911882 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 12:24:31 2025 +0100 less logs commit 38f871e9c2 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 10:00:26 2025 +0100 fix yaml commit db9a773136 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 09:57:47 2025 +0100 clean up files commit c0525f41fa Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 09:44:56 2025 +0100 gha workflow commit 895bea7c52 Author: joshhunt <josh.hunt@grafana.com> Date: Mon Jun 30 19:33:08 2025 +0100 working dagger commit cea1f84437 Author: joshhunt <josh.hunt@grafana.com> Date: Mon Jun 30 16:17:46 2025 +0100 wip * shard gha * some tidy up * add flags for exporting results, and a gha step to merge runs * fix shard gha * add dashboard-duplicate-panel test * add dashboard-outline test * add dashboards-add-panel * remove some commented out code * add dashboards-title-description test * add dashboards-remove-panel * don't install cypress * gha: check playwright results * add dashboards-edit-adhoc-variables test * fix check-jobs * add dagger cloud token * add dagger cloud token * add edit-datasource-variable test * update CODEOWNERS * add dashboards-edit-group-by-variables (skipped for now) * add dashboards-edit-panel-title-description test * add dashboards-edit-transparent-bg test * add dashboards-edit-query-variables test * run with 8 shards * add dashboards-edit-variables * tidy up gha * add dashboard-group-panels * fix action * try to cache the grafana build * fix missing action becuase no checkout, use builtin continue-on-error instead * fix missing id * cat out.txt * debug build cache * fix debug build cache * add dashboards-panel-layouts test * tidy up * no more debug * fix grafana dir * add dashboards-move-panel test * skip some failing tests * mark up plugins tests with @plugins tag, only run @plugins tests in drone * Hackathon/Playwright Conversion - Various Suite (#107516) * Playwright Migration: Various Suite tests * skipping bad tests * fix some tests that can fail * fix uid * separate user for the verify-i18n test * build test plugins for grafana server * properly blur input fields * login manually * get dashboardPage from goto * ignore a couple of type assertions * remove a couple of timeouts * remove timeouts on dashboard-share-internally * use toBeHidden * make dashboard-share-internally more stable * remove TEMP_DAGGER_TOKEN * clean up visaulization-suggestions * unskip gauge test * unskip trace-view-scrolling * attempt to make create variable utils stable * unskip loki tests * make go linter happy * unskip edit-group-by-variables test * unskip move panel tests * isolate dashboard-timepicker tests with separate user * create data source as part of smoke test * make sure we're awaiting in dashboard-edit-adhoc-variables * make dashboards-edit-variables test more robust * Hackathon Playwright: Dashboards Search (#107580) * Hackathon Playwright: Dashboards Search * Feedback changes * make trace-view-scrolling more stable * add json report and bench step * fix bench version * move fail step to after the playwright report so we can report test failures * fix output file name * fix typo * try wrap in expect.poll * stability * bit more tidy up * fix dashboard-new-layouts tests * move test-plugins to e2e-playwright * fix go code for drone e2e run * move loki plugin-e2e test * make v2 dashboards work again --------- Co-authored-by: joshhunt <josh.hunt@grafana.com> Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com> Co-authored-by: Collin Fingar <collin.fingar@grafana.com> Co-authored-by: Jeff Levin <jeff@levinology.com>
2025-07-11 10:31:33 +01:00
parent ea0ddb3fc9
commit b6580ccb10
250 changed files with 22677 additions and 1038 deletions
@@ -0,0 +1,176 @@
+import { selectors } from '@grafana/e2e-selectors';
+import { test, expect } from '@grafana/plugin-e2e';
+
+import { normalTableName } from './mocks/mysql.mocks';
+import { mockDataSourceRequest } from './utils';
+
+test.beforeEach(mockDataSourceRequest);
+
+test.describe(
+  'mysql',
+  {
+    tag: '@plugins',
+  },
+  () => {
+    test('visual query builder should handle macros', async ({ explorePage, page }) => {
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.headerTableSelector).click();
+      await page.getByText(normalTableName, { exact: true }).click();
+
+      // Open Data operations
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectAggregation).click();
+      const select = page.getByLabel('Select options menu');
+      await select.locator(page.getByText('$__timeGroupAlias')).click();
+
+      // Open column selector
+      await explorePage
+        .getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Column'))
+        .click();
+      await select.locator(page.getByText('createdAt')).click();
+
+      // Open Interval selector
+      await explorePage
+        .getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Interval'))
+        .click();
+      await select.locator(page.getByText('$__interval')).click();
+
+      await page.getByRole('button', { name: 'Add column' }).click();
+
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectAggregation).nth(1).click();
+      await select.locator(page.getByText('AVG')).click();
+
+      await explorePage
+        .getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Column'))
+        .nth(1)
+        .click();
+      await select.locator(page.getByText('bigint')).click();
+
+      // Validate the query
+      await expect(
+        explorePage.getByGrafanaSelector(selectors.components.CodeEditor.container).getByRole('textbox')
+      ).toHaveValue(
+        `SELECT\n  $__timeGroupAlias(createdAt, $__interval),\n  AVG(\`bigint\`)\nFROM\n  DataMaker.normalTable\nLIMIT\n  50`
+      );
+    });
+
+    test('visual query builder should handle time filter macro', async ({ explorePage, page }) => {
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.headerTableSelector).click();
+      await page.getByText(normalTableName, { exact: true }).click();
+
+      // Open column selector
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectColumn).click();
+      const select = page.getByLabel('Select options menu');
+      await select.locator(page.getByText('createdAt')).click();
+
+      // Toggle where row
+      await page.getByLabel('Filter').last().click();
+
+      // Click add filter button
+      await page.getByRole('button', { name: 'Add filter' }).click();
+      await page.getByRole('button', { name: 'Add filter' }).click(); // For some reason we need to click twice
+
+      // Open field selector
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.filterField).click();
+      await select.locator(page.getByText('createdAt')).click();
+
+      // Open operator selector
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.filterOperator).click();
+      await select.locator(page.getByText('Macros')).click();
+
+      // Open macros value selector
+      await explorePage.getByGrafanaSelector('Macros value selector').click();
+      await select.locator(page.getByText('timeFilter', { exact: true })).click();
+
+      // Validate that the timeFilter macro was added
+      await expect(
+        explorePage.getByGrafanaSelector(selectors.components.CodeEditor.container).getByRole('textbox')
+      ).toHaveValue(
+        `SELECT\n  createdAt\nFROM\n  DataMaker.normalTable\nWHERE\n  $__timeFilter(createdAt)\nLIMIT\n  50`
+      );
+
+      // Validate that the timeFilter macro was removed when changed to equals operator
+      await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.filterOperator).click();
+      await select.locator(page.getByText('==')).click();
+
+      await explorePage.getByGrafanaSelector(selectors.components.DateTimePicker.input).click();
+      await explorePage.getByGrafanaSelector(selectors.components.DateTimePicker.input).blur();
+
+      await expect(
+        explorePage.getByGrafanaSelector(selectors.components.CodeEditor.container).getByRole('textbox')
+      ).not.toHaveValue(`SELECT\n  createdAt\nFROM\n  DataMaker.normalTable\nWHERE\n  createdAt = NULL\nLIMIT\n  50`);
+    });
+
+    test('visual query builder should not crash when filter is set to select_any_in', async ({ explorePage, page }) => {
+      const queryParams = new URLSearchParams();
+      queryParams.set('schemaVersion', '1');
+      queryParams.set('orgId', '1');
+      const panes = {
+        mmm: {
+          datasource: 'P4FDCC188E688367F',
+          queries: [
+            {
+              refId: 'A',
+              datasource: {
+                type: 'mysql',
+                uid: 'P4FDCC188E688367F',
+              },
+              format: 'table',
+              rawSql: "SELECT * FROM DataMaker.normalTable WHERE name IN ('a') LIMIT 50 ",
+              editorMode: 'builder',
+              sql: {
+                columns: [
+                  {
+                    type: 'function',
+                    parameters: [
+                      {
+                        type: 'functionParameter',
+                        name: '*',
+                      },
+                    ],
+                  },
+                ],
+                groupBy: [
+                  {
+                    type: 'groupBy',
+                    property: {
+                      type: 'string',
+                    },
+                  },
+                ],
+                limit: 50,
+                whereJsonTree: {
+                  id: 'baa99aa9-0123-4456-b89a-b195d1dcfc6a',
+                  type: 'group',
+                  children1: [
+                    {
+                      type: 'rule',
+                      id: 'bb9a8bba-89ab-4cde-b012-3195d1dd2c91',
+                      properties: {
+                        fieldSrc: 'field',
+                        field: 'name',
+                        operator: 'select_any_in',
+                        value: ['a'],
+                        valueSrc: ['value'],
+                        valueType: ['text'],
+                      },
+                    },
+                  ],
+                },
+                whereString: "name IN ('a')",
+              },
+              dataset: 'DataMaker',
+              table: 'normalTable',
+            },
+          ],
+        },
+      };
+      queryParams.set('panes', JSON.stringify(panes));
+
+      await explorePage.goto({ queryParams });
+
+      // Validate the query
+      await expect(
+        explorePage.getByGrafanaSelector(selectors.components.CodeEditor.container).getByRole('textbox')
+      ).toHaveValue(`SELECT\n  *\nFROM\n  DataMaker.normalTable\nWHERE\n  name IN ('a')\nLIMIT\n  50`);
+    });
+  }
+);