tessl/npm-grafana--e2e

Grafana End-to-End Test Library built on Cypress with structured API for testing Grafana dashboards, data sources, panels, and administrative functions

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@grafana/e2e

Name: tessl/npm-grafana--e2e
Author: tessl

@grafana/e2e is a comprehensive end-to-end testing library for Grafana and its ecosystem, built on top of Cypress. It provides structured APIs for testing Grafana dashboards, data sources, panels, and administrative functions with pre-built selectors, flows, and scenarios tailored for Grafana's UI components and workflows.

Note: This package is deprecated. For new plugin development, use @grafana/plugin-e2e instead.

Package Information

Package Name: @grafana/e2e
Package Type: npm
Language: TypeScript
Installation: npm install @grafana/e2e

Core Imports

import { e2e } from "@grafana/e2e";

CommonJS:

const { e2e } = require("@grafana/e2e");

Basic Usage

import { e2e } from "@grafana/e2e";

// Set up a test scenario
e2e.scenario({
  describeName: "Dashboard Tests",
  itName: "should create and delete dashboard",
  scenario: () => {
    // Login to Grafana
    e2e.flows.login();
    
    // Add a new dashboard
    e2e.flows.addDashboard();
    
    // Add a panel to the dashboard
    e2e.flows.addPanel({
      visualization: "Table",
      panelTitle: "Test Panel"
    });
    
    // Save the dashboard
    e2e.flows.saveDashboard();
    
    // Clean up
    e2e.flows.revertAllChanges();
  }
});

Architecture

@grafana/e2e is built around several key components:

Main e2e Object: Hybrid function and object combining Cypress chainable with e2e utilities
Flows Module: Pre-built test flows for common Grafana operations (dashboards, data sources, panels)
Selector System: Page object model with components and pages selectors from @grafana/e2e-selectors
Scenario Management: Structured test scenario setup with automatic cleanup
Benchmark Testing: Performance testing capabilities for Grafana operations
Type System: Full TypeScript integration with selector factory pattern

Capabilities

Main e2e Object

Core entry point providing Cypress integration and utility functions for test setup and execution.

interface E2EObject {
  /** Access Cypress environment variables */
  env(args: string): any;
  /** Get Cypress configuration */
  config(): Cypress.Config;
  /** Convert blob to base64 string */
  blobToBase64String(blob: Blob): Promise<string>;
  /** Convert image source to blob */
  imgSrcToBlob(url: string): Promise<Blob>;
  /** Create e2e test scenarios */
  scenario(args: ScenarioArguments): void;
  /** Benchmark testing functionality */
  benchmark: typeof benchmark;
  /** Page object selectors */
  pages: E2ESelectors;
  /** Component selectors */  
  components: E2ESelectors;
  /** Pre-built test flows */
  flows: typeof flows;
  /** Type definitions and utilities (internal use) */
  typings: typeof typings;
  /** Get current scenario context */
  getScenarioContext(): ScenarioContext;
  /** Set scenario context */
  setScenarioContext(context: Partial<ScenarioContext>): void;
  /** Generate selector factory */
  getSelectors<T>(selectors: E2ESelectors<T>): E2ESelectors<T>;
}

/** Main e2e export - hybrid function and object */
const e2e: (() => Cypress.cy) & E2EObject;

Test Scenarios

Structured test scenario creation with automatic setup, cleanup, and context management. Perfect for organizing complex test suites.

function e2eScenario(args: ScenarioArguments): void;

interface ScenarioArguments {
  /** Test suite name */
  describeName: string;
  /** Test case name */
  itName: string;
  /** Test implementation function */
  scenario: () => void;
  /** Skip execution if true */
  skipScenario?: boolean;
  /** Auto-add data source for test */
  addScenarioDataSource?: boolean;
  /** Auto-add dashboard for test */
  addScenarioDashBoard?: boolean;
  /** Use API login instead of UI (default: true) */
  loginViaApi?: boolean;
}

Test Scenarios

Test Flows

Pre-built test flows for common Grafana operations including dashboard management, data source operations, panel configuration, and authentication.

/** Login via UI or API */
function login(username?: string, password?: string, loginViaApi?: boolean): void;

/** Create dashboard with configuration */
function addDashboard(config?: Partial<AddDashboardConfig>): void;

/** Delete dashboard via UI or API */
function deleteDashboard(config: DeleteDashboardConfig): void;

/** Add data source with configuration */
function addDataSource(config?: Partial<AddDataSourceConfig>): void;

/** Add new panel to dashboard */
function addPanel(config?: Partial<PartialAddPanelConfig>): void;

/** Edit existing panel */
function editPanel(config: Partial<PartialEditPanelConfig>): void;

Test Flows

Benchmark Testing

Performance benchmark testing for measuring Grafana operation performance and collecting application statistics.

function benchmark(args: BenchmarkArguments): void;

interface BenchmarkArguments {
  /** Benchmark name */
  name: string;
  /** Dashboard configuration */
  dashboard: {
    folder: string;
    delayAfterOpening: number;
    skipPanelValidation: boolean;
  };
  /** Number of iterations */
  repeat: number;
  /** Duration per test */
  duration: number;
  /** App statistics collection */
  appStats?: {
    startCollecting?(window: Window): void;
    collect(window: Window): Record<string, unknown>;
  };
  /** Skip execution if true */
  skipScenario?: boolean;
}

Benchmark Testing

Selector Utilities

CSS selector utilities for creating robust element selectors for Grafana's UI components.

interface Selector {
  /** Create aria-label selector */
  fromAriaLabel(selector: string): string;
  /** Create data-testid selector */
  fromDataTestId(selector: string): string;
  /** Pass-through selector */
  fromSelector(selector: string): string;
}

Selector Utilities

Types

interface ScenarioContext {
  /** Dashboards to clean up */
  addedDashboards: DeleteDashboardConfig[];
  /** Data sources to clean up */
  addedDataSources: DeleteDataSourceConfig[];
  /** Last dashboard title */
  lastAddedDashboard: string;
  /** Last dashboard UID */
  lastAddedDashboardUid: string;
  /** Last data source name */
  lastAddedDataSource: string;
  /** Last data source ID */
  lastAddedDataSourceId: string;
  /** Preferences change flag */
  hasChangedUserPreferences: boolean;
}

interface DeleteDashboardConfig {
  title?: string;
  uid?: string;
  quick?: boolean;
}

interface DeleteDataSourceConfig {
  /** Data source name */
  name?: string;
  /** Data source ID */
  id?: string;
  /** Use quick delete (skip confirmation) */
  quick?: boolean;
}

interface E2ESelectors<T = any> {
  [key: string]: string | E2ESelectors<any>;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/@grafana/e2e@11.0.x
Publish Source: CLI
Badge