Add plugin e2e

.github/workflows/dependabot-reviewer.yml

@@ -12,5 +12,5 @@ jobs:
     with:
       repository-merge-method: squash
       #  Add this to define production packages that dependabot can auto-update if the bump is minor
-      packages-minor-autoupdate: '["@grafana/data","@grafana/ui","@grafana/runtime","@grafana/e2e","@grafana/e2e-selectors"]'
+      packages-minor-autoupdate: '["@grafana/data","@grafana/ui","@grafana/runtime","@grafana/e2e-selectors"]'
     secrets: inherit

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+    - name: Install dependencies
+        run: yarn install --frozen-lockfile
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -6,4 +6,9 @@ coverage/**
 cypress/report.json
 cypress/screenshots/actual
 cypress/videos/
-dev/
+dev/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

cspell.config.json

@@ -20,6 +20,7 @@
     "httpadapter",
     "httpclient",
     "instancemgmt",
+    "jackspeak",
     "mhdw",
     "nolint",
     "testdata",

e2e/frontend/configEditor.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@grafana/plugin-e2e';
+import { formatExpectError } from './errors';
+
+const SENTRY_ORG_SLUG = 'mock-org-slug';
+const SENTRY_AUTH_TOKEN = 'mock-token';
+
+test.describe('Test config editor', () => {
+  test('empty configuration should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('invalid or empty organization slug');
+
+    // await page.getByTestId('Data source settings page Delete button').click();
+    // await page.getByTestId('data-testid Confirm Modal Danger Button').click();
+  });
+
+  test('empty auth token should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('empty or invalid auth token found');
+
+    // await page.getByTestId('Data source settings page Delete button').click();
+    // await page.getByTestId('data-testid Confirm Modal Danger Button').click();
+});
+
+  test('invalid auth token should throw valid error', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+    await page.getByPlaceholder('Sentry Authentication Token').fill('invalid-auth-token');
+
+    await expect(configPage.saveAndTest()).not.toBeOK();
+    await expect(page.getByTestId('data-testid Alert error')).toHaveText('404 Not Found EOF');
+
+//     await page.getByTestId('Data source settings page Delete button').click();
+//     await page.getByTestId('data-testid Confirm Modal Danger Button').click();
+  });
+
+  test('valid configuration should return valid health check', async ({ createDataSourceConfigPage, page }) => {
+    const configPage = await createDataSourceConfigPage({ type: 'grafana-sentry-datasource' });
+    configPage.mockHealthCheckResponse({ status: 200 });
+
+    await page.getByPlaceholder('https://sentry.io').fill('https://sentry.io');
+    await page.getByPlaceholder('Sentry org slug').fill(SENTRY_ORG_SLUG);
+    await page.getByPlaceholder('Sentry Authentication Token').fill(SENTRY_AUTH_TOKEN);
+
+    await expect(
+        configPage.saveAndTest(),
+        formatExpectError('Expected data source config to be successfully saved')
+      ).toBeOK();
+  });
+});

e2e/frontend/errors.ts

@@ -0,0 +1,5 @@
+export const formatExpectError = (message: string) => {
+    return `Error while verifying @grafana/plugin-e2e scenarios: ${message}. 
+      See https://github.com/grafana/grafana/blob/main/plugin-e2e/plugin-e2e-api-tests/README.md for more information.`;
+  };
+

e2e/frontend/variableEditor.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@grafana/plugin-e2e';
+import { formatExpectError } from './errors';
+
+const SENTRY_E2E_PROJECT_NAME = "project-002";
+const SENTRY_E2E_PROJECT_ID = "proj002";
+
+test.describe('Sentry variables', () => {
+    test('add and edit variables', async ({ variableEditPage, page }) => {
+        await variableEditPage.getByTestIdOrAriaLabel('Select a data source').fill("sentry");
+        await page.keyboard.press('Enter');
+        // await variableEditPage.datasource.set('Sentry');
+        // await variableEditPage.getByTestIdOrAriaLabel('Select your sentry variable query type here').click();
+        // await page.keyboard.press('Tab');
+        // await variableEditPage.runQuery();
+        // await expect(
+        //     variableEditPage,
+        //     formatExpectError('Expected variable edit page to display certain label names after query execution')
+        // ).toDisplayPreviews([`${SENTRY_E2E_PROJECT_NAME} (${SENTRY_E2E_PROJECT_ID})`]);
+    });
+});

package.json

@@ -10,9 +10,9 @@
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "dev_mock": "docker-compose -f docker-compose-mock.yml up",
-    "e2e": "yarn exec cypress install && yarn exec grafana-e2e run",
-    "e2e:open": "grafana-e2e open",
-    "e2e:update": "yarn exec cypress install && yarn exec grafana-e2e run --update-screenshots",
+    "e2e:playwright": "yarn playwright test",
+    "e2e:playwright:ui": "yarn playwright test --ui",
+    "e2e:playwright:report": "yarn playwright show-report",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "yarn run lint --fix",
     "server": "docker-compose up --build",
@@ -30,6 +30,7 @@
     "@grafana/runtime": "10.4.1",
     "@grafana/schema": "10.4.1",
     "@grafana/ui": "10.4.1",
+    "@playwright/test": "^1.42.1",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -38,9 +39,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
-    "@grafana/e2e": "10.4.1",
     "@grafana/e2e-selectors": "10.4.1",
     "@grafana/eslint-config": "^7.0.0",
+    "@grafana/plugin-e2e": "^0.25.1",
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.7",
@@ -58,7 +59,6 @@
     "copy-webpack-plugin": "^12.0.2",
     "cspell": "^8.6.1",
     "css-loader": "^6.10.0",
-    "cypress": "^13.7.2",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-webpack-plugin": "^4.1.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
@@ -80,7 +80,8 @@
     "webpack-livereload-plugin": "^3.0.2"
   },
   "resolutions": {
-    "rxjs": "6.3.3"
+    "rxjs": "6.3.3",
+    "jackspeak": "2.1.1"
   },
   "packageManager": "[email protected]"
 }

playwright.config.ts

@@ -0,0 +1,47 @@
+import { dirname } from 'path';
+import { defineConfig, devices } from '@playwright/test';
+import type { PluginOptions } from '@grafana/plugin-e2e';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+export default defineConfig<PluginOptions>({
+  testDir: './e2e/frontend',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    video: 'on'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'run-tests',
+      use: {
+        ...devices['Desktop Chrome'],
+        // @grafana/plugin-e2e writes the auth state to this file,
+        // the path should not be modified
+        storageState: 'playwright/.auth/admin.json',
+      },
+      dependencies: ['auth'],
+    }
+  ],
+});