CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

flows.mddocs/

Test Flows

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

Capabilities

Authentication & Navigation

Login Flow

Authenticate user via UI or API with configurable credentials.

/**
 * Login to Grafana via UI or API
 * @param username - Username (default: from env)
 * @param password - Password (default: from env)  
 * @param loginViaApi - Use API login instead of UI (default: true)
 */
function login(username?: string, password?: string, loginViaApi?: boolean): void;

Success Notification

Assert that success notification appears after operations.

/**
 * Assert success notification appears
 */
function assertSuccessNotification(): void;

Dashboard Management

Add Dashboard

Create new dashboard with optional configuration including annotations, variables, and time range.

/**
 * Create dashboard with optional configuration
 * @param config - Dashboard configuration options
 */
function addDashboard(config?: Partial<AddDashboardConfig>): void;

interface AddDashboardConfig {
  /** Dashboard title */
  title: string;
  /** Time range configuration */
  timeRange: TimeRangeConfig;
  /** Dashboard variables */
  variables: PartialAddVariableConfig[];
  /** Dashboard annotations */
  annotations: AddAnnotationConfig[];
}

interface AddAnnotationConfig {
  /** Data source name for annotation */
  dataSource: string;
  /** Annotation name */
  name: string;
  /** Optional data source form configuration function */
  dataSourceForm?: () => void;
}

interface PartialAddVariableConfig {
  /** Variable name (required) */
  name: string;
  /** Variable type (default provided) */
  type?: string;
  /** Variable hide setting (default provided) */
  hide?: string;
  /** Constant value for constant variables */
  constantValue?: string;
  /** Data source for datasource variables */
  dataSource?: string;
  /** Variable label */
  label?: string;
  /** Variable query */
  query?: string;
  /** Variable regex filter */
  regex?: string;
  /** Custom variable query form function */
  variableQueryForm?: (config: AddVariableConfig) => void;
}

type AddVariableConfig = AddVariableDefault & AddVariableOptional & AddVariableRequired;

interface AddVariableDefault {
  /** Variable hide setting */
  hide: string;
  /** Variable type */
  type: string;
}

interface AddVariableOptional {
  /** Constant value for constant variables */
  constantValue?: string;
  /** Data source for datasource variables */
  dataSource?: string;
  /** Variable label */
  label?: string;
  /** Variable query */
  query?: string;
  /** Variable regex filter */
  regex?: string;
  /** Custom variable query form function */
  variableQueryForm?: (config: AddVariableConfig) => void;
}

interface AddVariableRequired {
  /** Variable name */
  name: string;
}

Delete Dashboard

Delete dashboard via UI or API by title or UID.

/**
 * Delete dashboard via UI or API
 * @param config - Dashboard deletion configuration
 */
function deleteDashboard(config: DeleteDashboardConfig): void;

interface DeleteDashboardConfig {
  /** Dashboard title */
  title?: string;
  /** Dashboard UID */
  uid?: string;
  /** Use quick delete (skip confirmation) */
  quick?: boolean;
}

Open Dashboard

Navigate to existing dashboard by UID.

/**
 * Open dashboard by UID
 * @param config - Dashboard opening configuration
 */
function openDashboard(config?: PartialOpenDashboardConfig): void;

interface PartialOpenDashboardConfig {
  /** Dashboard UID */
  uid?: string;
}

Save Dashboard

Save current dashboard changes.

/**
 * Save current dashboard
 */
function saveDashboard(): void;

Import Dashboard

Import dashboard from JSON configuration.

/**
 * Import dashboard from JSON
 * @param dashboard - Dashboard JSON configuration
 * @param timeout - Optional timeout in milliseconds
 * @param skipValidation - Skip validation if true
 */
function importDashboard(
  dashboard: Dashboard, 
  timeout?: number, 
  skipValidation?: boolean
): void;

/**
 * Import multiple dashboards from directory
 * @param dirPath - Directory path containing dashboard JSON files
 * @param timeout - Optional timeout in milliseconds
 * @param skipValidation - Skip validation if true
 */
function importDashboards(
  dirPath: string, 
  timeout?: number, 
  skipValidation?: boolean
): void;

Data Source Management

Add Data Source

Add new data source with configuration options.

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

interface AddDataSourceConfig {
  /** Data source name */
  name?: string;
  /** Data source type */
  type?: string;
  /** Data source URL */
  url?: string;
  /** Additional configuration */
  config?: Record<string, any>;
}

Delete Data Source

Delete data source via UI or API by name or ID.

/**
 * Delete data source via UI or API
 * @param config - Data source deletion configuration
 */
function deleteDataSource(config: DeleteDataSourceConfig): void;

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

Panel Operations

Add Panel

Add new panel to current dashboard with visualization and configuration.

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

interface PartialAddPanelConfig extends PartialConfigurePanelConfig {
  /** Data source name (required for add panel) */
  dataSourceName: string;
  /** Panel title (required for add panel) */
  panelTitle: string;
  /** Custom queries form function */
  queriesForm: (config: AddPanelConfig) => void;
}

Edit Panel

Edit existing panel configuration.

/**
 * Edit existing panel
 * @param config - Panel edit configuration
 */
function editPanel(config: Partial<PartialEditPanelConfig>): void;

interface PartialEditPanelConfig extends PartialConfigurePanelConfig {
  /** Panel title (required for edit panel) */
  panelTitle: string;
  /** Custom queries form function */
  queriesForm?: (config: EditPanelConfig) => void;
}

Configure Panel

Core panel configuration function for advanced panel setup with chart data, screenshots, and validation options.

/**
 * Core panel configuration function for advanced panel setup
 * @param config - Panel configuration object
 */
function configurePanel(config: PartialConfigurePanelConfig): void;

interface PartialConfigurePanelConfig {
  /** Whether this is editing an existing panel */
  isEdit: boolean;
  /** Chart data configuration for API monitoring */
  chartData?: {
    method: string;
    route: string | RegExp;
  };
  /** Dashboard UID (defaults to last added dashboard) */
  dashboardUid?: string;
  /** Data source name */
  dataSourceName?: string;
  /** Panel title */
  panelTitle?: string;
  /** Custom queries form function */
  queriesForm?: (config: ConfigurePanelConfig) => void;
  /** Time range configuration */
  timeRange?: TimeRangeConfig;
  /** Visualization type name */
  visualizationName?: string;
  /** Operation timeout in milliseconds */
  timeout?: number;
  /** Whether to match screenshot */
  matchScreenshot?: boolean;
  /** Whether to save dashboard after configuration */
  saveDashboard?: boolean;
  /** Screenshot filename for comparison */
  screenshotName?: string;
  /** Whether to visit dashboard at start */
  visitDashboardAtStart?: boolean;
}

Panel Menu Operations

Open panel context menu items for panel actions.

/**
 * Open panel context menu items
 * @param menu - Menu item to select
 * @param panelTitle - Panel title (optional)
 */
function openPanelMenuItem(menu: PanelMenuItems, panelTitle?: string): void;

type PanelMenuItems = 'Edit' | 'View' | 'Share' | 'Inspect' | 'More';

Time Management

Set Time Range

Set absolute time range for current context.

/**
 * Set absolute time range
 * @param config - Time range configuration
 */
function setTimeRange(config: TimeRangeConfig): void;

/**
 * Set dashboard time range (specific to dashboard context)
 * @param config - Time range configuration
 */
function setDashboardTimeRange(config: TimeRangeConfig): void;

interface TimeRangeConfig {
  /** Start time */
  from: string;
  /** End time */
  to: string;
}

Utility Functions

Select Option

Select dropdown option from Grafana UI components.

/**
 * Select dropdown option
 * @param config - Selection configuration
 */
function selectOption(config: SelectOptionConfig): void;

interface SelectOptionConfig {
  /** Container selector */
  container: string;
  /** Option text or value */
  optionText: string;
}

User Preferences

Manage user preferences and settings.

/**
 * Set user preferences
 * @param prefs - User preferences object
 */
function setUserPreferences(prefs: UserPreferences): void;

/**
 * Reset to default preferences
 */
function setDefaultUserPreferences(): void;

interface UserPreferences {
  /** Timezone preference (empty string for "Default" option) */
  timezone?: string;
}

Cleanup

Revert all changes made during test execution.

/**
 * Clean up all test changes (dashboards, data sources, preferences)
 */
function revertAllChanges(): void;

Visualization Constants

Pre-defined visualization type constants for panel creation:

const VISUALIZATION_ALERT_LIST = 'Alert list';
const VISUALIZATION_BAR_GAUGE = 'Bar gauge';
const VISUALIZATION_CLOCK = 'Clock';
const VISUALIZATION_DASHBOARD_LIST = 'Dashboard list';
const VISUALIZATION_GAUGE = 'Gauge';
const VISUALIZATION_GRAPH = 'Graph';
const VISUALIZATION_HEAT_MAP = 'Heatmap';
const VISUALIZATION_LOGS = 'Logs';
const VISUALIZATION_NEWS = 'News';
const VISUALIZATION_PIE_CHART = 'Pie Chart';
const VISUALIZATION_PLUGIN_LIST = 'Plugin list';
const VISUALIZATION_POLYSTAT = 'Polystat';
const VISUALIZATION_STAT = 'Stat';
const VISUALIZATION_TABLE = 'Table';
const VISUALIZATION_TEXT = 'Text';
const VISUALIZATION_WORLD_MAP = 'Worldmap Panel';

Variable Constants

Pre-defined variable type and hide constants:

const VARIABLE_HIDE_LABEL = 'Label';
const VARIABLE_HIDE_NOTHING = '';
const VARIABLE_HIDE_VARIABLE = 'Variable';
const VARIABLE_TYPE_AD_HOC_FILTERS = 'Ad hoc filters';
const VARIABLE_TYPE_CONSTANT = 'Constant';
const VARIABLE_TYPE_DATASOURCE = 'Datasource';
const VARIABLE_TYPE_QUERY = 'Query';

Usage Example:

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

// Complete workflow example
e2e.scenario({
  describeName: "Complete Workflow",
  itName: "should create dashboard with panel",
  scenario: () => {
    // Login
    e2e.flows.login();
    
    // Create dashboard
    e2e.flows.addDashboard({
      title: "Test Dashboard",
      tags: ["test", "automation"]
    });
    
    // Add panel
    e2e.flows.addPanel({
      panelTitle: "CPU Usage",
      visualization: e2e.flows.VISUALIZATION_GRAPH
    });
    
    // Save dashboard
    e2e.flows.saveDashboard();
    
    // Verify success
    e2e.flows.assertSuccessNotification();
    
    // Cleanup
    e2e.flows.revertAllChanges();
  }
});

docs

benchmark.md

flows.md

index.md

scenarios.md

selectors.md

tile.json