Migrate E2E tests to Playwright (#346)

Author: kevinwcyu

.github/dependabot.yml

@@ -21,11 +21,10 @@ updates:
     schedule:
       interval: 'weekly'
     ignore:
-      - dependency-name: '@grafana/e2e*'
       - dependency-name: 'react'
-        update-types: ["version-update:semver-major"]
+        update-types: ['version-update:semver-major']
       - dependency-name: 'react-dom'
-        update-types: ["version-update:semver-major"]
+        update-types: ['version-update:semver-major']
     groups:
       all-node-dependencies:
         patterns:

.github/workflows/e2e-tests.yml

@@ -0,0 +1,89 @@
+name: E2E tests
+on:
+  pull_request:
+  schedule:
+    - cron: '0 11 * * *' #Run e2e tests once a day at 11 UTC
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  resolve-versions:
+    name: Resolve Grafana images
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+    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
+        with:
+          version-resolver-type: version-support-policy
+
+  playwright-tests:
+    needs: resolve-versions
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        GRAFANA_IMAGE: ${{fromJson(needs.resolve-versions.outputs.matrix)}}
+    name: e2e ${{ matrix.GRAFANA_IMAGE.name }}@${{ matrix.GRAFANA_IMAGE.VERSION }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install yarn dependencies
+        run: yarn install
+
+      - name: Install Mage
+        uses: magefile/mage-action@v3
+        with:
+          install-only: true
+
+      - name: Build binaries
+        run: mage -v build:linux
+
+      - name: Build frontend
+        run: yarn build
+
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+
+      - name: Get secrets from vault
+        id: get-secrets
+        uses: grafana/shared-workflows/actions/get-vault-secrets@main
+        with:
+          repo_secrets: |
+            ACCESS_KEY=e2e:accessKey
+            SECRET_KEY=e2e:secretKey
+
+      - name: Start Grafana
+        run: |
+          docker compose pull
+          GRAFANA_VERSION=${{ matrix.GRAFANA_IMAGE.VERSION }} GRAFANA_IMAGE=${{ matrix.GRAFANA_IMAGE.NAME }} ACCESS_KEY=${{env.ACCESS_KEY}} SECRET_KEY=${{env.SECRET_KEY}} docker compose up -d
+
+      - name: Wait for grafana server
+        uses: grafana/plugin-actions/wait-for-grafana@main
+
+      - name: Run Playwright tests
+        id: run-tests
+        run: yarn playwright test
+
+      # 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 == 'success') || (failure() && 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: 30

.gitignore

@@ -9,8 +9,6 @@ __debug_bin
 # Test binary, built with `go test -c`
 *.test
 
-provisioning
-
 # Logs
 logs
 *.log
@@ -48,9 +46,12 @@ e2e-results/
 
 # End to End tests
 provisioning/
-cypress/report.json
-cypress/screenshots/actual
-cypress/videos/
+!provisioning/datasources/aws-redshift-e2e.yaml
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
 
 # OS
 *.DS_Store

CONTRIBUTING.md

@@ -70,6 +70,12 @@ From https://go.dev/blog/get-familiar-with-workspaces:
 
 If you build Grafana locally, you can for example symlink `redshift-datasource` to your clone of `github.com/grafana/grafana`'s `data/plugins` directory, e.g. `cd <path to your Grafana repo>/github.com/grafana/grafana/data/plugins && ln -s <path to your workspaces>/redshift_workspace/redshift-datasource redshift-datasource`
 
+## E2E Tests
+
+1. `yarn playwright install --with-deps`
+1. `yarn server`
+1. `yarn e2e`
+
 ## Build a release for the Redshift data source plugin
 
 You need to have commit rights to the GitHub repository to publish a release.

cspell.config.json

@@ -3,7 +3,7 @@
     ".github/**",
     "node_modules/**",
     "dist/**",
-    "cypress/**",
+    "playwright*/**",
     "provisioning/**",
     "src/dashboards/**",
     "yarn.lock",
@@ -102,6 +102,11 @@
     "eslintcache",
     "gofmt",
     "pids",
-    "lefthook"
+    "lefthook",
+    "seccomp",
+    "dataproxy",
+    "redshiftqueryeditor",
+    "saletime",
+    "catname"
   ]
 }

cypress/integration/smoke.spec.ts

@@ -1,14 +1,19 @@
-version: '3.0'
-
 services:
   grafana:
+    user: root
     container_name: 'grafana-redshift-datasource'
+
     build:
       context: ./.config
       args:
-        grafana_version: ${GRAFANA_VERSION:-10.0.0}
+        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
+        grafana_version: ${GRAFANA_VERSION:-latest}
     ports:
       - 3000:3000/tcp
     volumes:
       - ./dist:/var/lib/grafana/plugins/grafana-redshift-datasource
       - ./provisioning:/etc/grafana/provisioning
+
+    environment:
+      ACCESS_KEY: ${ACCESS_KEY}
+      SECRET_KEY: ${SECRET_KEY}

cypress/screenshots/blank.md

@@ -5,9 +5,7 @@
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
-    "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 test",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "yarn run lint --fix",
     "server": "docker compose up --build",
@@ -40,10 +38,10 @@
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@grafana/aws-sdk": "0.6.0",
-    "@grafana/e2e": "10.2.0",
-    "@grafana/e2e-selectors": "10.0.0",
     "@grafana/eslint-config": "^8.0.0",
+    "@grafana/plugin-e2e": "^1.16.0",
     "@grafana/tsconfig": "^2.0.0",
+    "@playwright/test": "^1.49.1",
     "@stylistic/eslint-plugin-ts": "^2.13.0",
     "@swc/core": "^1.10.8",
     "@swc/helpers": "^0.5.15",
@@ -55,13 +53,13 @@
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.14",
     "@types/node": "^22.10.7",
+    "@types/semver": "^7.5.8",
     "@types/testing-library__jest-dom": "6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "copy-webpack-plugin": "^12.0.2",
     "cspell": "8.17.2",
     "css-loader": "^7.1.2",
-    "cypress": "14.0.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-deprecation": "^3.0.0",