Feat/AN-4120 playwright e2e tests

.github/workflows/ci.yml

@@ -6,14 +6,17 @@ permissions: read-all
 
 jobs:
   build:
+    name: Build, lint and unit tests
     runs-on: ubuntu-latest
+    outputs:
+      plugin-id: ${{ steps.metadata.outputs.plugin-id }}
+      plugin-version: ${{ steps.metadata.outputs.plugin-version }}
+      has-e2e: ${{ steps.check-for-e2e.outputs.has-e2e }}
+      has-backend: ${{ steps.check-for-backend.outputs.has-backend }}
     env:
       GRAFANA_ACCESS_POLICY_TOKEN: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.ref }}
-
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
@@ -65,31 +68,11 @@ jobs:
       - name: Check for E2E
         id: check-for-e2e
         run: |
-          if [ -d "cypress" ]
+          if [ -f "playwright.config.ts" ]
           then
             echo "has-e2e=true" >> $GITHUB_OUTPUT
           fi
 
-      - name: Start grafana docker
-        if: steps.check-for-e2e.outputs.has-e2e == 'true'
-        run: docker-compose up -d
-
-      - name: Run e2e tests
-        if: steps.check-for-e2e.outputs.has-e2e == 'true'
-        run: yarn run e2e
-
-      - name: Stop grafana docker
-        if: steps.check-for-e2e.outputs.has-e2e == 'true'
-        run: docker-compose down
-
-      - name: Archive E2E output
-        uses: actions/upload-artifact@v4
-        if: steps.check-for-e2e.outputs.has-e2e == 'true' && steps.run-e2e-tests.outcome != 'success'
-        with:
-          name: cypress-videos
-          path: cypress/videos
-          retention-days: 5
-
       - name: Sign plugin
         run: yarn run sign
         if: ${{ env.GRAFANA_ACCESS_POLICY_TOKEN != '' }}
@@ -119,3 +102,96 @@ jobs:
           name: ${{ steps.metadata.outputs.plugin-id }}-${{ steps.metadata.outputs.plugin-version }}
           path: ${{ steps.metadata.outputs.plugin-id }}
           retention-days: 5
+
+  resolve-versions:
+    name: Resolve e2e images
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+    needs: build
+    if: ${{ needs.build.outputs.has-e2e == 'true' }}
+    outputs:
+      matrix: ${{ steps.resolve-versions.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Resolve Grafana E2E versions
+        id: resolve-versions
+        uses: grafana/plugin-actions/e2e-version@main
+
+  playwright-tests:
+    needs: [resolve-versions, build]
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        GRAFANA_IMAGE: ${{fromJson(needs.resolve-versions.outputs.matrix)}}
+    name: e2e test ${{ matrix.GRAFANA_IMAGE.name }}@${{ matrix.GRAFANA_IMAGE.VERSION }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download plugin
+        uses: actions/download-artifact@v4
+        with:
+          path: dist
+          name: ${{ needs.build.outputs.plugin-id }}-${{ needs.build.outputs.plugin-version }}
+
+      - name: Execute permissions on binary
+        if: needs.build.outputs.has-backend == 'true'
+        run: |
+          chmod +x ./dist/gpx_*
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dev dependencies
+        run: yarn install --immutable --prefer-offline
+
+      - name: Start Grafana
+        run: |
+          docker-compose pull
+          DEVELOPMENT=false GRAFANA_VERSION=${{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=${{ matrix.GRAFANA_IMAGE.NAME }} docker-compose up -d
+
+      - name: Wait for Grafana to start
+        uses: nev7n/wait_for_response@v1
+        with:
+          url: 'http://localhost:3000/'
+          responseCode: 200
+          timeout: 60000
+          interval: 500
+
+      - name: Install Playwright Browsers
+        run: yarn exec playwright install chromium --with-deps
+
+      - name: Run Playwright tests
+        id: run-tests
+        run: yarn run e2e
+
+      - name: Docker logs
+        if: ${{ always() && steps.run-tests.outcome == 'failure' }}
+        run: |
+          docker logs test-test-datasource >& grafana-server.log
+
+      - name: Stop grafana docker
+        run: docker-compose down
+
+      - name: Upload server log
+        uses: actions/upload-artifact@v4
+        if: ${{ always() && steps.run-tests.outcome == 'failure' }}
+        with:
+          name: ${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}-server-log
+          path: grafana-server.log
+          retention-days: 5
+
+      # Uncomment this step to upload the Playwright report to Github artifacts.
+      # If your repository is public, the report will be public on the Internet so beware not to expose sensitive information.
+      # - name: Upload artifacts
+      #   uses: actions/upload-artifact@v4
+      #   if: ${{ always() && steps.run-tests.outcome == 'failure' }}
+      #   with:
+      #     name: playwright-report-${{ matrix.GRAFANA_IMAGE.NAME }}-v${{ matrix.GRAFANA_IMAGE.VERSION }}-${{github.run_id}}
+      #     path: playwright-report/
+      #     retention-days: 5

.gitignore

@@ -24,11 +24,15 @@ coverage
 artifacts/
 work/
 ci/
-e2e-results/
-**/cypress/videos
-**/cypress/report.json
 
 # Editor
 .idea
 
 .eslintcache
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

README.md

@@ -103,7 +103,7 @@ This project was generated with `yarn create @grafana/plugin@4.3.0`.
    yarn run server
    ```
 
-6. Run the E2E tests (using Cypress)
+6. Run the E2E tests (using Playwright)
 
    ```bash
    # Spins up a Grafana instance first that we tests against

e2e/configurationEditor.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '@grafana/plugin-e2e';
+import { BitmovinDataSourceOptions } from '../src/types/grafanaTypes';
+
+test('should save and test valid configuration', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  page,
+  selectors,
+}) => {
+  await page.route('*/**/analytics/licenses', async (route) => {
+    await route.fulfill({ status: 200, body: 'OK' });
+  });
+  const ds = await readProvisionedDataSource<BitmovinDataSourceOptions>({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+
+  await page.getByTestId(`config-editor-${configPage.datasource.name}_api-key-input`).fill('test-api-key');
+  await page.getByTestId(`config-editor-${configPage.datasource.name}_tenant-org-id-input`).fill('test-tenant-org-id');
+
+  const queryPromise = page.waitForRequest('*/**/analytics/licenses');
+  await configPage.getByGrafanaSelector(selectors.pages.DataSource.saveAndTest).click();
+  const queryRequest = await queryPromise;
+
+  expect(queryRequest.headers()['x-api-client']).toBe('analytics-grafana-datasource');
+  expect(queryRequest.headers()['x-api-key']).toBe('test-api-key');
+  expect(queryRequest.headers()['x-tenant-org-id']).toBe('test-tenant-org-id');
+
+  expect(configPage).toHaveAlert('success');
+});
+
+test('should not save invalid configuration', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  page,
+  selectors,
+}) => {
+  const ds = await readProvisionedDataSource<BitmovinDataSourceOptions>({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+
+  await page.getByTestId(`config-editor-${configPage.datasource.name}_api-key-input`).fill('grafana-invalid-api-key');
+
+  const responsePromise = page.waitForResponse('*/**/analytics/licenses');
+  await configPage.getByGrafanaSelector(selectors.pages.DataSource.saveAndTest).click();
+  const response = await responsePromise;
+
+  expect(response.status()).toBe(403);
+  expect(configPage).toHaveAlert('error');
+});