Playwright: Gate server start up with `GRAFANA_URL` env var (#108302)

* refactor so server is created unless GRAFANA_URL is provided

* update documentation

* don't swallow errors from the server process

.drone.yml

@@ -289,7 +289,7 @@ steps:
 - commands:
   - npx wait-on@7.0.1 http://$HOST:$PORT
   - yarn playwright install --with-deps chromium
-  - yarn e2e:playwright --grep @plugins
+  - GRAFANA_URL=http://$HOST:$PORT yarn e2e:playwright --grep @plugins
   depends_on:
   - grafana-server
   - build-test-plugins
@@ -761,7 +761,7 @@ steps:
 - commands:
   - npx wait-on@7.0.1 http://$HOST:$PORT
   - yarn playwright install --with-deps chromium
-  - yarn e2e:playwright --grep @plugins
+  - GRAFANA_URL=http://$HOST:$PORT yarn e2e:playwright --grep @plugins
   depends_on:
   - grafana-server
   - build-test-plugins
@@ -2986,6 +2986,6 @@ kind: secret
 name: gcr_credentials
 ---
 kind: signature
-hmac: d20f1d6e2e8347701f82114ad352f53db57dc95b5b3831941fa93d063a92b9d8
+hmac: 70e5888d6be34ca57086672bc58d6de7de0029210e4485190571452972774e54
 
 ...

contribute/developer-guide.md

@@ -251,18 +251,20 @@ Each version of Playwright needs specific versions of browser binaries to operat
 yarn playwright install chromium
 ```
 
-To run all tests in a headless Chromium browser and display results in the terminal. This assumes you have Grafana running on port 3000.
+The following script starts a Grafana [development server](https://github.com/grafana/grafana/blob/main/scripts/grafana-server/start-server) (same server that is being used when running e2e tests in CI) on port 3001 and runs all the Playwright tests. The development server is provisioned with the [devenv](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#add-data-sources) dashboards, data sources and apps.
 
 ```
 yarn e2e:playwright
 ```
 
-The following script starts a Grafana [development server](https://github.com/grafana/grafana/blob/main/scripts/grafana-server/start-server) (same server that is being used when running e2e tests in Drone CI) on port 3001 and runs the Playwright tests. The development server is provisioned with the [devenv](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#add-data-sources) dashboards, data sources and apps.
+You can run against an arbitrary instance by setting the `GRAFANA_URL` environment variable:
 
 ```
-yarn e2e:playwright:server
+GRAFANA_URL=http://localhost:3000 yarn e2e:playwright
 ```
 
+Note this will not start a development server, so you must ensure that Grafana is running and accessible at the specified URL.
+
 ## Configure Grafana for development
 
 The default configuration, `defaults.ini`, is located in the `conf` directory.

contribute/style-guides/e2e-plugins.md

@@ -32,10 +32,12 @@ You can add Playwright end-to-end tests for plugins to the [`e2e-playwright/plug
 
 - `yarn e2e:playwright` runs all Playwright tests. Optionally, you can provide the `--project mysql` argument to run tests in a specific project.
 
-  The `yarn e2e:playwright` script assumes you have Grafana running on `localhost:3000`. You may change this with an environment variable:
+  The `yarn e2e:playwright` command starts a Grafana [development server](https://github.com/grafana/grafana/blob/main/scripts/grafana-server/start-server) on port 3001 and runs the Playwright tests.
 
-  `HOST=127.0.0.1 PORT=3001 yarn e2e:playwright`
+  You can run against an arbitrary instance by setting the `GRAFANA_URL` environment variable:
 
-  The `yarn e2e:playwright:server` starts a Grafana [development server](https://github.com/grafana/grafana/blob/main/scripts/grafana-server/start-server) on port 3001 and runs the Playwright tests.
+  `GRAFANA_URL=http://localhost:3000 yarn e2e:playwright`
+
+  Note this will not start a development server, so you must ensure that Grafana is running and accessible at the specified URL.
 
 - You can provision the development server with the [devenv](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#add-data-sources) dashboards, data sources, and apps.

e2e-playwright/start-server

@@ -15,9 +15,6 @@ fi
 if [ "$BASE_URL" != "" ]; then
     echo -e "BASE_URL set, skipping starting server"
 else
-  # Start it in the background
+  ./scripts/grafana-server/start-server $LICENSE_PATH > scripts/grafana-server/server.log
-  ./scripts/grafana-server/start-server $LICENSE_PATH 2>&1 > scripts/grafana-server/server.log &
-  ./scripts/grafana-server/wait-for-grafana
 fi
 
-PORT=3001 HOST=localhost yarn playwright test

package.json

@@ -24,7 +24,6 @@
     "e2e:enterprise:dev": "./e2e/start-and-run-suite enterprise dev",
     "e2e:enterprise:debug": "./e2e/start-and-run-suite enterprise debug",
     "e2e:playwright": "yarn playwright test",
-    "e2e:playwright:server": "yarn e2e:plugin:build && ./e2e-playwright/start-and-run-suite",
     "e2e:playwright:storybook": "yarn playwright test -c playwright.storybook.config.ts",
     "e2e:storybook": "PORT=9001 ./e2e/run-suite storybook true",
     "e2e:plugin:build": "nx run-many -t build --projects='@test-plugins/*'",

pkg/build/e2e-playwright/e2e.go

@@ -32,12 +32,17 @@ func RunTest(
 ) (*dagger.Container, error) {
 	playwrightCommand := buildPlaywrightCommand(opts)
 
+	grafanaHost, err := opts.GrafanaService.Hostname(ctx)
+	if err != nil {
+		return nil, err
+	}
+
 	e2eContainer := opts.FrontendContainer.
 		WithWorkdir("/src").
 		WithDirectory("/src", opts.HostSrc).
 		WithMountedCache(".nx", d.CacheVolume("nx-cache")).
-		WithEnvVariable("HOST", grafanaHost).
+		WithEnvVariable("CI", "true").
-		WithEnvVariable("PORT", fmt.Sprint(grafanaPort)).
+		WithEnvVariable("GRAFANA_URL", fmt.Sprintf("http://%s:%d", grafanaHost, grafanaPort)).
 		WithServiceBinding(grafanaHost, opts.GrafanaService).
 		WithEnvVariable("bustcache", "1").
 		WithEnvVariable("PLAYWRIGHT_HTML_OPEN", "never").

pkg/build/e2e-playwright/main.go

@@ -12,7 +12,6 @@ import (
 )
 
 var (
-	grafanaHost = "grafana"
 	grafanaPort = 3001
 )
 

playwright.config.ts

@@ -5,6 +5,7 @@ import { PluginOptions } from '@grafana/plugin-e2e';
 
 const testDirRoot = 'e2e-playwright';
 const pluginDirRoot = path.join(testDirRoot, 'plugin-e2e');
+const DEFAULT_URL = 'http://localhost:3001';
 
 export default defineConfig<PluginOptions>({
   fullyParallel: true,
@@ -16,7 +17,7 @@ export default defineConfig<PluginOptions>({
     ['html'], // pretty
   ],
   use: {
-    baseURL: `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`,
+    baseURL: process.env.GRAFANA_URL ?? DEFAULT_URL,
     trace: 'retain-on-failure',
     httpCredentials: {
       username: 'admin',
@@ -26,6 +27,14 @@ export default defineConfig<PluginOptions>({
     permissions: ['clipboard-read', 'clipboard-write'],
     provisioningRootDir: path.join(process.cwd(), process.env.PROV_DIR ?? 'conf/provisioning'),
   },
+  ...(!process.env.GRAFANA_URL && {
+    webServer: {
+      command: 'yarn e2e:plugin:build && ./e2e-playwright/start-server',
+      url: DEFAULT_URL,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+  }),
   projects: [
     // Login to Grafana with admin user and store the cookie on disk for use in other tests
     {

scripts/drone/steps/lib.star

@@ -834,7 +834,7 @@ def playwright_e2e_tests_step():
         "commands": [
             "npx wait-on@7.0.1 http://$HOST:$PORT",
             "yarn playwright install --with-deps chromium",
-            "yarn e2e:playwright --grep @plugins",
+            "GRAFANA_URL=http://$HOST:$PORT yarn e2e:playwright --grep @plugins",
         ],
     }