Skip to content

Commit

Permalink
Migrate from cypress to playwright as e2e testing framework
Browse files Browse the repository at this point in the history
  • Loading branch information
felix-mu committed Apr 22, 2024
1 parent 67231c4 commit b713664
Show file tree
Hide file tree
Showing 12 changed files with 887 additions and 36 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
@@ -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: lts/*
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
8 changes: 7 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,10 @@ plugin-validator

junit.xml

.eslintcache
.eslintcache
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

/playwright/.auth/
119 changes: 116 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
"scripts": {
"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
"e2e:cypress": "Xvfb :99 & export DISPLAY=:99 && npm exec cypress install && npx cypress run --browser electron --headless && pkill Xvfb",
"e2e": "npm exec cypress install && npm exec grafana-e2e run",
"e2e:update": "npm exec cypress install && npm exec grafana-e2e run --update-screenshots",
"e2e": "playwright test --trace on",
"e2e:cypress-troubleshoot": "Xvfb :99 & export DISPLAY=:99 && npm exec cypress install && npx cypress run --browser electron --headless && pkill Xvfb",
"e2e:cypress": "npm exec cypress install && npm exec grafana-e2e run",
"e2e:cypress-update": "npm exec cypress install && npm exec grafana-e2e run --update-screenshots",
"lint": "eslint --cache --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "npm run lint -- --fix",
"server": "docker-compose up --build",
Expand All @@ -25,7 +26,9 @@
"@grafana/e2e": "9.5.3",
"@grafana/e2e-selectors": "9.5.3",
"@grafana/eslint-config": "^6.0.0",
"@grafana/plugin-e2e": "^1.1.1",
"@grafana/tsconfig": "^1.2.0-rc1",
"@playwright/test": "^1.43.1",
"@swc/core": "^1.3.62",
"@swc/helpers": "^0.5.0",
"@swc/jest": "^0.2.26",
Expand Down
92 changes: 92 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { defineConfig, devices } from '@playwright/test';
import type { PluginOptions } from '@grafana/plugin-e2e';
import { dirname } from 'path';

const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* 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://127.0.0.1:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

/* Configure projects for major browsers */
projects: [
{
name: 'auth',
testDir: pluginE2eAuth,
testMatch: [/.*\.js/],
},
{
name: 'chromium',
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'],
},

// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },

// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
38 changes: 14 additions & 24 deletions provisioning/dashboards/dashboard_e2e.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,4 @@
{
"__inputs": [],
"__elements": {},
"__requires": [
{
"type": "panel",
"id": "geomap-wms-panel",
"name": "Geomap WMS",
"version": "1.4.5"
},
{
"type": "grafana",
"id": "grafana",
"name": "Grafana",
"version": "10.0.2"
}
],
"annotations": {
"list": [
{
Expand All @@ -34,7 +18,6 @@
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": null,
"links": [],
"liveNow": false,
"panels": [
Expand Down Expand Up @@ -87,22 +70,29 @@
"showZoom": true
},
"view": {
"id": "zero",
"lat": 0,
"lon": 0,
"zoom": 1
"id": "coords",
"lat": 48.138132,
"lon": 11.565519,
"zoom": 13.57
}
},
"title": "Geomap WMS Panel",
"type": "geomap-wms-panel"
}
],
"refresh": "",
"schemaVersion": 38,
"style": "dark",
"schemaVersion": 39,
"tags": [],
"templating": {
"list": []
"list": [
{
"hide": 2,
"name": "geomap_wms_spatial_filter_geometry",
"query": "POLYGON((-180 -90,180 -90,180 90,-180 90,-180 -90))",
"skipUrlSync": false,
"type": "constant"
}
]
},
"time": {
"from": "now-6h",
Expand Down
2 changes: 1 addition & 1 deletion src/editor/CustomWMSBasemapEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const CustomWMSBasemapEditor = ({ item, value, onChange, context }: Props
<Label description={'Select the layers to be displayed in base map'}>
Layers
</Label>
<MultiSelect options={options} value={selection} onChange={(selectableValue) => {
<MultiSelect aria-label="wms layer multiselect" options={options} value={selection} onChange={(selectableValue) => {
setSelection(selectableValue);
onChange({url: url, layers: selectableValue.map((e) => e.value!)}); // onChange sets the config.wms property; Only change it when layers are selected
}}></MultiSelect>
Expand Down
1 change: 1 addition & 0 deletions src/mapcontrols/SpatialFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class SpatialFilterControl extends Control {

const element = document.createElement('div');
element.className = `ol-zoom ol-touch ${olCss.CLASS_UNSELECTABLE} ${olCss.CLASS_CONTROL}`;
button.setAttribute("aria-label", "spatial filter tool button");
element.style.top = "50%";
element.appendChild(button);

Expand Down
Loading

0 comments on commit b713664

Please sign in to comment.