@grafana/plugin-e2e 0.17.1 → 0.18.0-canary.757.235cf2d.0

package/README.md

@@ -2,6 +2,10 @@
 
 E2E test Grafana plugins with ease.
 
+**Links**
+
+- [`@grafana/plugin-e2e` docs](https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/introduction)
+
 ## Overview
 
 `@grafana/plugin-e2e` is designed specifically for Grafana plugin developers. It extends [Playwright test](https://github.com/microsoft/playwright/) capabilities with fixtures, models, and expect matchers, enabling comprehensive end-to-end testing of Grafana plugins across multiple versions of Grafana. This package simplifies the testing process, ensuring your plugin is robust and compatible with various Grafana environments.
@@ -14,44 +18,66 @@ E2E test Grafana plugins with ease.
 - **Version Compatibility:** Ensures that your plugin is tested across multiple versions of Grafana, guaranteeing compatibility and stability.
 - **Integration with Playwright:** Seamlessly integrates with the Playwright testing framework, leveraging its powerful browser automation capabilities.
 
-## Getting Started
+## Get started
+
+Checkout our [`Get started`](https://grafana.com/developers/plugin-tools/e2e-test-a-plugin/get-started) guide for detailed instructions on how to install, configure, write tests and run your e2e tests in CI.
 
 ### Prerequisites
 
+- You need to have a Grafana plugin [development environment](https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment)
 - Node.js 18+
-- Basic knowledge of Playwright
-- Grafana plugin [development environment](https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment)
-
-### Installation
-
-To install `@grafana/plugin-e2e`, run the following command in your project directory:
-
-```bash
-npm install @grafana/plugin-e2e@latest --save-dev
-```
-
-To install Playwright along with the default browsers:
-
-```bash
-npm init playwright@latest
+- Basic Knowledge of Playwright. If you have not worked with Playwright before, we recommend following the [Getting started](https://playwright.dev/docs/intro) section in their documentation
+
+#### Install Playwright
+
+Please refer to the [Playwright documentation](https://playwright.dev/docs/intro#installing-playwright) for instruction on how to install. `@grafana/plugin-e2e` extends Playwright APIs, so you need to have `Playwright/test` with a minimum version of 0.40.0 installed as a dev dependency in the package.json file of your plugin.
+
+#### Configure Playwright
+
+Open the Playwright config file that was generated when Playwright was installed and paste the following configuration.
+
+```ts
+import { dirname } from 'path';
+import { defineConfig, devices } from '@playwright/test';
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+export default defineConfig({
+  testDir: './tests', // change this to the directory that was chosen when installing Playwright
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+  },
+  projects: [
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'run-tests',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'playwright/.auth/admin.json',
+      },
+      dependencies: ['auth'],
+    },
+  ],
+});
 ```
 
-> Note: @grafana/plugin-e2e uses @playwright/test version 1.40.0 internally, so the version you install in the plugin needs to be the same or higher.
-
-## Usage
-
 ### Writing Tests
 
 Here's a basic example of how to write an E2E test using `@grafana/plugin-e2e`:
 
-```typescript
-import { expect, test } from '@grafana/plugin-e2e';
+```ts
+import { test, expect } from '@grafana/plugin-e2e';
 
-test('query data request should return 200 when query is valid', async ({ panelEditPage }) => {
-  await panelEditPage.datasource.set('gdev-testdata');
-  const queryEditorRow = await panelEditPage.getQueryEditorRow('A');
-  await queryEditorRow.getByLabel('Labels').fill('key=value1, key2=value3');
+test('data query should return values 1 and 3', async ({ panelEditPage, readProvisionedDataSource }) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.setVisualization('Table');
   await expect(panelEditPage.refreshPanel()).toBeOK();
+  await expect(panelEditPage.panel.data).toContainText(['1', '3']);
 });
 ```
 
@@ -63,6 +89,6 @@ To run your tests, use the following command:
 npx playwright test
 ```
 
-# Contributing
+## Contributing
 
 We welcome contributions to @grafana/plugin-e2e. If you're interested in contributing, please read our [contributing guidelines](./CONTRIBUTING.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-e2e",
-  "version": "0.17.1",
+  "version": "0.18.0-canary.757.235cf2d.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -34,10 +34,10 @@
     "node": ">=18 <=20"
   },
   "peerDependencies": {
-    "@playwright/test": "^1.40.0"
+    "@playwright/test": "^1.41.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.0",
+    "@playwright/test": "^1.41.2",
     "@types/uuid": "^9.0.7",
     "dotenv": "^16.3.1"
   },
@@ -46,5 +46,5 @@
     "uuid": "^9.0.1",
     "yaml": "^2.3.4"
   },
-  "gitHead": "b366868940f45043ad4cff7b95aa85a4a630d936"
+  "gitHead": "235cf2de505b12058c164366089d67c0d24a7644"
 }