Playwright: Fix remaining various-suite tests (#110667)

* get trace-view-scrolling working in playwright

* almost fix frontend-sandbox-datasource test

* properly fix frontend-sandbox-datasource tests

* convert migrate-to-cloud to playwright

* prometheus-variable-editor tests in playwright

* enable prometheus-config tests in playwright

* run on frontend changes

* skip test

* remove various-suite
This commit is contained in:
Ashley Harrison
2025-09-08 16:57:39 +01:00
committed by GitHub
parent 454380431d
commit f4833ee2d8
15 changed files with 1066 additions and 8825 deletions
@@ -1,20 +1,22 @@
import { test, expect } from '@grafana/plugin-e2e';
import { Page } from 'playwright-core';
import { test, expect, E2ESelectorGroups } from '@grafana/plugin-e2e';
import { addDashboard } from '../utils/dashboard-helpers';
import { getResources } from '../utils/prometheus-helpers';
test.describe.skip(
test.describe(
'Prometheus variable query editor',
{
tag: ['@various', '@wip'],
tag: ['@various'],
},
() => {
const DATASOURCE_NAME = 'prometheusVariableDS';
const DATASOURCE_PREFIX = 'prometheusVariableDS';
/**
* Click dashboard settings and then the variables tab
*/
async function navigateToVariables(page, selectors) {
async function navigateToVariables(page: Page, selectors: E2ESelectorGroups) {
const editButton = page.getByTestId(selectors.components.NavToolbar.editDashboard.editButton);
await expect(editButton).toBeVisible();
await editButton.click();
@@ -30,7 +32,12 @@ test.describe.skip(
/**
* Begin the process of adding a query type variable for a Prometheus data source
*/
async function addPrometheusQueryVariable(page, selectors, variableName) {
async function addPrometheusQueryVariable(
page: Page,
selectors: E2ESelectorGroups,
datasourceName: string,
variableName: string
) {
const addVariableButton = page.getByTestId(selectors.pages.Dashboard.Settings.Variables.List.addVariableCTAV2);
await addVariableButton.click();
@@ -42,7 +49,7 @@ test.describe.skip(
await expect(dataSourcePicker).toBeVisible();
await dataSourcePicker.click();
const dataSourceOption = page.getByText(DATASOURCE_NAME);
const dataSourceOption = page.getByText(datasourceName);
await dataSourceOption.scrollIntoViewIfNeeded();
await expect(dataSourceOption).toBeVisible();
await dataSourceOption.click();
@@ -53,10 +60,16 @@ test.describe.skip(
/**
* Create a Prometheus variable and navigate to the query editor to check that it is available to use.
*/
async function variableFlowToQueryEditor(page, selectors, variableName, queryType) {
async function variableFlowToQueryEditor(
page: Page,
selectors: E2ESelectorGroups,
datasourceName: string,
variableName: string,
queryType: string
) {
await addDashboard(page);
await navigateToVariables(page, selectors);
await addPrometheusQueryVariable(page, selectors, variableName);
await addPrometheusQueryVariable(page, selectors, datasourceName, variableName);
// Select query type
const queryTypeSelect = page.getByTestId(
@@ -88,7 +101,7 @@ test.describe.skip(
// Select prom data source from the data source list
const dataSourcePickerInput = page.getByTestId(selectors.components.DataSourcePicker.inputV2);
await dataSourcePickerInput.click();
await dataSourcePickerInput.fill(DATASOURCE_NAME);
await dataSourcePickerInput.fill(datasourceName);
await page.keyboard.press('Enter');
// Confirm the variable exists in the correct input
@@ -119,19 +132,21 @@ test.describe.skip(
}
}
test.beforeEach(async ({ page, selectors, createDataSourceConfigPage }) => {
await createDataSourceConfigPage({ type: 'prometheus', name: DATASOURCE_NAME });
});
test('should navigate to variable query editor', async ({ page, selectors }) => {
await addDashboard(page);
await navigateToVariables(page, selectors);
});
test('should select a query type for a Prometheus variable query', async ({ page, selectors }) => {
test('should select a query type for a Prometheus variable query', async ({
createDataSource,
page,
selectors,
}) => {
const DATASOURCE_NAME = `${DATASOURCE_PREFIX}_${Date.now()}`;
await createDataSource({ type: 'prometheus', name: DATASOURCE_NAME });
await addDashboard(page);
await navigateToVariables(page, selectors);
await addPrometheusQueryVariable(page, selectors, 'labelsVariable');
await addPrometheusQueryVariable(page, selectors, DATASOURCE_NAME, 'labelsVariable');
// Select query type
const queryTypeSelect = page.getByTestId(
@@ -142,29 +157,38 @@ test.describe.skip(
});
test('should create a label names variable that is selectable in the label select in query builder', async ({
createDataSource,
page,
selectors,
}) => {
await variableFlowToQueryEditor(page, selectors, 'labelnames', 'Label names');
const DATASOURCE_NAME = `${DATASOURCE_PREFIX}_${Date.now()}`;
await createDataSource({ type: 'prometheus', name: DATASOURCE_NAME });
await variableFlowToQueryEditor(page, selectors, DATASOURCE_NAME, 'labelnames', 'Label names');
});
test('should create a label values variable that is selectable in the label values select in query builder', async ({
createDataSource,
page,
selectors,
}) => {
await variableFlowToQueryEditor(page, selectors, 'labelvalues', 'Label values');
const DATASOURCE_NAME = `${DATASOURCE_PREFIX}_${Date.now()}`;
await createDataSource({ type: 'prometheus', name: DATASOURCE_NAME });
await variableFlowToQueryEditor(page, selectors, DATASOURCE_NAME, 'labelvalues', 'Label values');
});
test('should create a metric names variable that is selectable in the metric select in query builder', async ({
createDataSource,
page,
selectors,
}) => {
await variableFlowToQueryEditor(page, selectors, 'metrics', 'Metrics');
const DATASOURCE_NAME = `${DATASOURCE_PREFIX}_${Date.now()}`;
await createDataSource({ type: 'prometheus', name: DATASOURCE_NAME });
await variableFlowToQueryEditor(page, selectors, DATASOURCE_NAME, 'metrics', 'Metrics');
});
}
);
async function selectOption(page, option) {
async function selectOption(page: Page, option: string) {
const optionElement = page.getByRole('option', { name: option });
await expect(optionElement).toBeVisible();
await optionElement.click();