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,188 @@
+/*
+ * This is a dummy plugin to test the frontend sandbox
+ * It is not meant to be used in any other way
+ * This file doesn't require any compilation
+ */
+define(['react', '@grafana/data'], function (React, grafanaData) {
+  // This would be a custom editor component
+  function Editor() {
+    const onChangeInternal = (event) => {
+      const outsideEl =
+        event.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
+          .parentElement.parentElement;
+      outsideEl.dataset.sandboxTest = 'panel-editor';
+    };
+    return React.createElement('input', {
+      type: 'text',
+      onChange: onChangeInternal,
+      'data-testid': 'panel-editor-custom-editor-input',
+    });
+  }
+
+  const PanelComponent = () => {
+    const [testedGlobals, setTestedGlobals] = React.useState([]);
+    const createIframe = () => {
+      // direct iframe creation
+      const iframe = document.createElement('iframe');
+      iframe.src = 'about:blank';
+      iframe.id = 'createElementIframe';
+      iframe.style.width = '10%';
+      iframe.style.height = '10%';
+      iframe.style.border = 'none';
+      document.body.appendChild(iframe);
+
+      // via innerHTML
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      div.innerHTML =
+        '<iframe src="about:blank" id="innerHTMLIframe" style="width: 10%; height: 10%; border: none;"></iframe>';
+
+      // via append
+      const appendIframe = document.createElement('iframe');
+      appendIframe.src = 'about:blank';
+      appendIframe.id = 'appendIframe';
+      appendIframe.style.width = '10%';
+      appendIframe.style.height = '10%';
+      appendIframe.style.border = 'none';
+      document.body.append(appendIframe);
+
+      // via prepend
+      const prependIframe = document.createElement('iframe');
+      prependIframe.src = 'about:blank';
+      prependIframe.id = 'prependIframe';
+      prependIframe.style.width = '10%';
+      prependIframe.style.height = '10%';
+      prependIframe.style.border = 'none';
+      document.body.prepend(prependIframe);
+
+      // via after
+      const referenceElementAfter = document.createElement('div');
+      document.body.appendChild(referenceElementAfter);
+      const afterIframe = document.createElement('iframe');
+      afterIframe.src = 'about:blank';
+      afterIframe.id = 'afterIframe';
+      afterIframe.style.width = '10%';
+      afterIframe.style.height = '10%';
+      afterIframe.style.border = 'none';
+      referenceElementAfter.after(afterIframe);
+
+      // via before
+      const referenceElementBefore = document.createElement('div');
+      document.body.appendChild(referenceElementBefore);
+      const beforeIframe = document.createElement('iframe');
+      beforeIframe.src = 'about:blank';
+      beforeIframe.id = 'beforeIframe';
+      beforeIframe.style.width = '10%';
+      beforeIframe.style.height = '10%';
+      beforeIframe.style.border = 'none';
+      referenceElementBefore.before(beforeIframe);
+
+      // via outerHTML
+      const outerHTMLIframe = document.createElement('iframe');
+      outerHTMLIframe.src = 'about:blank';
+      outerHTMLIframe.id = 'outerHTMLIframeTemp';
+      outerHTMLIframe.style.width = '10%';
+      outerHTMLIframe.style.height = '10%';
+      outerHTMLIframe.style.border = 'none';
+      document.body.appendChild(outerHTMLIframe);
+      outerHTMLIframe.outerHTML =
+        '<iframe src="about:blank" id="outerHTMLIframe" style="width: 10%; height: 10%; border: none;"></iframe>';
+
+      // via parseFromString
+      const iframeString =
+        '<iframe src="about:blank" id="parseFromStringIframe" style="width: 10%; height: 10%; border: none;"></iframe>';
+      const parser = new DOMParser();
+      const parsedDoc = parser.parseFromString(iframeString, 'text/html');
+      document.body.appendChild(parsedDoc.body.firstChild);
+
+      // via insertBefore
+      const referenceForInsertBefore = document.createElement('div');
+      document.body.appendChild(referenceForInsertBefore);
+      const insertBeforeIframe = document.createElement('iframe');
+      insertBeforeIframe.src = 'about:blank';
+      insertBeforeIframe.id = 'insertBeforeIframe';
+      insertBeforeIframe.style.width = '10%';
+      insertBeforeIframe.style.height = '10%';
+      insertBeforeIframe.style.border = 'none';
+      document.body.insertBefore(insertBeforeIframe, referenceForInsertBefore);
+
+      // via replaceChild
+      const replaceChildDiv = document.createElement('div');
+      document.body.appendChild(replaceChildDiv);
+      const replaceChildIframe = document.createElement('iframe');
+      replaceChildIframe.src = 'about:blank';
+      replaceChildIframe.id = 'replaceChildIframe';
+      replaceChildIframe.style.width = '10%';
+      replaceChildIframe.style.height = '10%';
+      replaceChildIframe.style.border = 'none';
+      document.body.replaceChild(replaceChildIframe, replaceChildDiv);
+    };
+
+    const reachOut = (e) => {
+      const outsideEl = e.target.parentElement.parentElement.parentElement.parentElement.parentElement;
+      outsideEl.dataset.sandboxTest = 'true';
+    };
+
+    // a function for each global we want to test
+    const globalTests = [
+      function () {
+        try {
+          console.log(window.Prism.languages);
+          return 'Prism';
+        } catch (e) {}
+      },
+      function () {
+        try {
+          console.log(window.jQuery.fn.jquery);
+          console.log(window.$.fn.jquery);
+          return 'jQuery';
+        } catch (e) {}
+      },
+      function () {
+        try {
+          console.log(window.locationSandbox);
+          return 'location';
+        } catch (e) {}
+      },
+    ];
+
+    // it'll assign a variable with one attribute of the Globals
+    // and create a new element with the name of the global.
+    const testGlobals = () => {
+      const results = globalTests.map((test) => test());
+      setTestedGlobals(results);
+    };
+
+    const elements = testedGlobals.map((item) => {
+      const attributes = { 'data-sandbox-global': `${item}` };
+      return React.createElement('div', attributes, item);
+    });
+
+    return React.createElement(
+      'div',
+      { className: 'frontend-sandbox-test' },
+      React.createElement(
+        'button',
+        { onClick: createIframe, 'data-testid': 'button-create-iframes' },
+        'Create iframes'
+      ),
+      React.createElement('button', { onClick: reachOut, 'data-testid': 'button-reach-out' }, 'Reach out'),
+      React.createElement('button', { onClick: testGlobals, 'data-testid': 'button-test-globals' }, 'Test Globals'),
+      React.createElement('div', null, elements)
+    );
+  };
+
+  const plugin = new grafanaData.PanelPlugin(PanelComponent);
+
+  plugin.setPanelOptions((builder) => {
+    builder.addCustomEditor({
+      id: 'buttons',
+      path: 'buttons',
+      name: 'Button Configuration',
+      defaultValue: [{ text: '', datasource: '', query: '' }],
+      editor: (props) => React.createElement(Editor, { onChange: props.onChange }),
+    });
+  });
+
+  return { plugin };
+});