从 @grafana/e2e 迁移

危险

随着 Grafana 11.0.0 的发布，@grafana/e2e 包已被弃用，并且已停止支持。我们建议所有插件作者迁移其端到端测试，以使用 Playwright 和 @grafana/plugin-e2e 来代替 Cypress 和 @grafana/e2e。

在本指南中，您将学习

如何在您的插件中手动设置 @grafana/plugin-e2e
如何迁移测试
如何在 CI 中运行 Playwright 测试
如何卸载 Cypress 和 @grafana/e2e

手动安装 @grafana/plugin-e2e

使用 create-plugin v4.6.0 及更高版本搭建的插件会自动包含 @grafana/plugin-e2e 和 @playwright/test 的配置。要手动添加此配置，请按照以下步骤操作

步骤 1：安装 Playwright

@grafana/plugin-e2e 工具扩展了 Playwright API，因此您需要在插件的 package.json 文件中安装 @playwright/test，最低版本为 1.41.2，作为开发依赖项。有关如何安装的说明，请参阅 Playwright 文档。确保您可以运行安装期间生成的示例测试。如果示例测试运行成功，您可以继续删除它们，因为不再需要它们。

步骤 2：安装 `@grafana/plugin-e2e`

打开终端并在插件的项目目录中运行以下命令

npm
Yarn
pnpm

npm install @grafana/plugin-e2e@latest --save-dev

yarn add @grafana/plugin-e2e@latest --dev

pnpm add @grafana/plugin-e2e@latest --save-dev

步骤 3：配置 Playwright

打开安装 Playwright 时生成的 Playwright 配置文件。

取消注释 baseUrl 并将其更改为 'https://127.0.0.1:3000'。

playwright.config.ts
  baseURL: 'https://127.0.0.1:3000',

Playwright 使用项目来逻辑地分组具有相同配置的测试。我们将添加两个项目
1. auth 是一个设置项目，它将登录到 Grafana 并将身份验证状态存储在磁盘上。
2. run-tests 在您选择的浏览器中运行所有测试。通过添加对 auth 项目的依赖，我们确保登录只发生一次，并且 run-tests 项目中的所有测试都将以已身份验证的状态启动。
您的 Playwright 配置应具有以下项目配置

playwright.config.ts
import { dirname } from 'path';
import { defineConfig, devices } from '@playwright/test';
import type { PluginOptions } from '@grafana/plugin-e2e';

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

export default defineConfig<PluginOptions>({
    ...
    projects: [
    {
      name: 'auth',
      testDir: pluginE2eAuth,
      testMatch: [/.*\.js/],
    },
    {
      name: 'run-tests',
      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'],
    }
  ],
});

身份验证状态以以下文件名模式存储在磁盘上：<plugin-root>/playwright/.auth/<username>.json。

为了防止这些文件被版本控制，您可以将以下行添加到您的 .gitignore 文件中

.gitignore
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
/playwright/.auth/