Plugin E2E: Pass testinfo to models

docusaurus/docs/e2e-test-a-plugin/setup-resources.md

@@ -36,9 +36,9 @@ test('should expand multi-valued variable before calling backend', async ({
  page,
  selectors,
  grafanaVersion,
-}) => {
+}, testInfo) => {
  const dashboard = await readProvisionDashboard({ fileName: 'variable.json' });
- const dashboardPage = new DashboardPage({ request, page, selectors, grafanaVersion }, dashboard);
+ const dashboardPage = new DashboardPage({ request, page, selectors, grafanaVersion, testInfo }, dashboard);
  await dashboardPage.goto();
  const panelEditPage = await dashboardPage.addPanel();
  const queryDataSpy = panelEditPage.waitForQueryDataRequest((request) =>
@@ -90,6 +90,9 @@ The `readProvisionedDashboard` fixture allows you to read the content of a dashb
 
 ```ts title="variableEditPage.spec.ts"
 const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
-const variableEditPage = new VariableEditPage({ request, page, selectors, grafanaVersion }, { dashboard, id: '2' });
+const variableEditPage = new VariableEditPage(
+ { request, page, selectors, grafanaVersion, testInfo },
+ { dashboard, id: '2' }
+);
 await variableEditPage.goto();
 ```

packages/plugin-e2e/src/fixtures/annotationEditPage.ts

@@ -8,8 +8,12 @@ type AnnotationEditPageFixture = TestFixture<
  PluginFixture & PluginOptions & PlaywrightCombinedArgs
 >;
 
-const annotationEditPage: AnnotationEditPageFixture = async ({ page, selectors, grafanaVersion, request }, use) => {
- const annotationPage = new AnnotationPage({ page, selectors, grafanaVersion, request });
+const annotationEditPage: AnnotationEditPageFixture = async (
+ { page, selectors, grafanaVersion, request },
+ use,
+ testInfo
+) => {
+ const annotationPage = new AnnotationPage({ page, selectors, grafanaVersion, request, testInfo });
  await annotationPage.goto();
  const annotationEditPage = await annotationPage.clickAddNew();
  await use(annotationEditPage);

packages/plugin-e2e/src/fixtures/commands/createDataSourceConfigPage.ts

@@ -12,14 +12,15 @@ type CreateDataSourceConfigPageFixture = TestFixture<
 
 const createDataSourceConfigPage: CreateDataSourceConfigPageFixture = async (
  { request, page, selectors, grafanaVersion },
- use
+ use,
+ testInfo
 ) => {
  let datasourceConfigPage: DataSourceConfigPage | undefined;
  let deleteDataSource = true;
  await use(async (args) => {
  deleteDataSource = args.deleteDataSourceAfterTest ?? true;
  const datasource = await createDataSourceViaAPI(request, args);
- datasourceConfigPage = new DataSourceConfigPage({ page, selectors, grafanaVersion, request }, datasource);
+ datasourceConfigPage = new DataSourceConfigPage({ page, selectors, grafanaVersion, request, testInfo }, datasource);
  await datasourceConfigPage.goto();
  return datasourceConfigPage;
  });

packages/plugin-e2e/src/fixtures/explorePage.ts

@@ -5,8 +5,8 @@ import { PlaywrightCombinedArgs } from './types';
 
 type ExplorePageFixture = TestFixture<ExplorePage, PluginFixture & PluginOptions & PlaywrightCombinedArgs>;
 
-const explorePage: ExplorePageFixture = async ({ page, selectors, grafanaVersion, request }, use) => {
- const explorePage = new ExplorePage({ page, selectors, grafanaVersion, request });
+const explorePage: ExplorePageFixture = async ({ page, selectors, grafanaVersion, request }, use, testInfo) => {
+ const explorePage = new ExplorePage({ page, selectors, grafanaVersion, request, testInfo });
  await explorePage.goto();
  await use(explorePage);
 };

packages/plugin-e2e/src/fixtures/newDashboardPage.ts

@@ -5,8 +5,12 @@ import { PlaywrightCombinedArgs } from './types';
 
 type NewDashboardPageFixture = TestFixture<DashboardPage, PluginFixture & PluginOptions & PlaywrightCombinedArgs>;
 
-const newDashboardPage: NewDashboardPageFixture = async ({ page, request, selectors, grafanaVersion }, use) => {
- const newDashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request });
+const newDashboardPage: NewDashboardPageFixture = async (
+ { page, request, selectors, grafanaVersion },
+ use,
+ testInfo
+) => {
+ const newDashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request, testInfo });
  await newDashboardPage.goto();
  await use(newDashboardPage);
 };

packages/plugin-e2e/src/fixtures/variableEditPage.ts

@@ -5,8 +5,12 @@ import { PlaywrightCombinedArgs } from './types';
 
 type VariableEditPageFixture = TestFixture<VariableEditPage, PluginFixture & PluginOptions & PlaywrightCombinedArgs>;
 
-const variableEditPage: VariableEditPageFixture = async ({ page, selectors, grafanaVersion, request }, use) => {
- const variablePage = new VariablePage({ page, selectors, grafanaVersion, request });
+const variableEditPage: VariableEditPageFixture = async (
+ { page, selectors, grafanaVersion, request },
+ use,
+ testInfo
+) => {
+ const variablePage = new VariablePage({ page, selectors, grafanaVersion, request, testInfo });
  await variablePage.goto();
  const variableEditPage = await variablePage.clickAddNew();
  await use(variableEditPage);

packages/plugin-e2e/src/types.ts

@@ -1,11 +1,11 @@
-import { Locator, PlaywrightTestArgs, Response } from '@playwright/test';
+import { Locator, PlaywrightTestArgs, Response, TestInfo } from '@playwright/test';
 
 import { E2ESelectors } from './e2e-selectors/types';
 
 /**
  * The context object passed to page object models
  */
-export type PluginTestCtx = { grafanaVersion: string; selectors: E2ESelectors } & Pick<
+export type PluginTestCtx = { grafanaVersion: string; selectors: E2ESelectors; testInfo: TestInfo } & Pick<
  PlaywrightTestArgs,
  'page' | 'request'
 >;

packages/plugin-e2e/tests/as-admin-user/datasource/annotations/annotationQueryRunner.integration.spec.ts

@@ -37,10 +37,10 @@ test('should run successfully if valid Redshift query was provided in provisione
  selectors,
  grafanaVersion,
  readProvisionedDashboard,
-}) => {
+}, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
  const annotationEditPage = new AnnotationEditPage(
- { request, page, selectors, grafanaVersion },
+ { request, page, selectors, grafanaVersion, testInfo },
  { dashboard, id: '1' }
  );
  await annotationEditPage.goto();

packages/plugin-e2e/tests/as-admin-user/datasource/data-assertions/dataAssertion.spec.ts

@@ -8,9 +8,12 @@ test.describe('panel edit page', () => {
  grafanaVersion,
  request,
  readProvisionedDashboard,
- }) => {
+ }, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
- const panelEditPage = new PanelEditPage({ page, selectors, grafanaVersion, request }, { dashboard, id: '3' });
+ const panelEditPage = new PanelEditPage(
+ { page, selectors, grafanaVersion, request, testInfo },
+ { dashboard, id: '3' }
+ );
  await panelEditPage.goto();
  await panelEditPage.setVisualization('Table');
  await expect(panelEditPage.panel.locator).toBeVisible();
@@ -24,9 +27,12 @@ test.describe('panel edit page', () => {
  grafanaVersion,
  request,
  readProvisionedDashboard,
- }) => {
+ }, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'google-sheets.json' });
- const panelEditPage = new PanelEditPage({ page, selectors, grafanaVersion, request }, { dashboard, id: '1' });
+ const panelEditPage = new PanelEditPage(
+ { page, selectors, grafanaVersion, request, testInfo },
+ { dashboard, id: '1' }
+ );
  await panelEditPage.goto();
  await panelEditPage.setVisualization('Time series');
  await panelEditPage.toggleTableView();
@@ -36,18 +42,30 @@ test.describe('panel edit page', () => {
 });
 
 test.describe('dashboard page', () => {
- test('getting panel by title', async ({ page, selectors, grafanaVersion, request, readProvisionedDashboard }) => {
+ test('getting panel by title', async ({
+ page,
+ selectors,
+ grafanaVersion,
+ request,
+ readProvisionedDashboard,
+ }, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
- const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request }, dashboard);
+ const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request, testInfo }, dashboard);
  await dashboardPage.goto();
  const panel = await dashboardPage.getPanelByTitle('Basic table example');
  await expect(panel.fieldNames).toContainText(['time', 'temperature', 'humidity', 'environment']);
  await expect(panel.data).toContainText(['25', '32', 'staging']);
  });
 
- test('getting panel by id', async ({ page, selectors, grafanaVersion, request, readProvisionedDashboard }) => {
+ test('getting panel by id', async ({
+ page,
+ selectors,
+ grafanaVersion,
+ request,
+ readProvisionedDashboard,
+ }, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
- const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request }, dashboard);
+ const dashboardPage = new DashboardPage({ page, selectors, grafanaVersion, request, testInfo }, dashboard);
  await dashboardPage.goto();
  const panel = await dashboardPage.getPanelById('3');
  await expect(panel.fieldNames).toContainText(['time', 'temperature', 'humidity', 'environment']);

packages/plugin-e2e/tests/as-admin-user/datasource/variables/customVariableQueryRunner.integration.spec.ts

@@ -24,10 +24,10 @@ test('custom variable editor query runner should return data when valid query fr
  selectors,
  grafanaVersion,
  readProvisionedDashboard,
-}) => {
+}, testInfo) => {
  const provision = await readProvisionedDashboard({ fileName: 'redshift.json' });
  const variableEditPage = new VariableEditPage(
- { request, page, selectors, grafanaVersion },
+ { request, page, selectors, grafanaVersion, testInfo },
  { dashboard: { uid: provision.uid }, id: '2' }
  );
  await variableEditPage.goto();

packages/plugin-e2e/tests/as-admin-user/datasource/variables/variableInterpolation.spec.ts

@@ -1,9 +1,15 @@
 import { test, expect, PanelEditPage } from '../../../../src';
 
-test('variable interpolation', async ({ readProvisionedDashboard, request, page, selectors, grafanaVersion }) => {
+test('variable interpolation', async ({
+ readProvisionedDashboard,
+ request,
+ page,
+ selectors,
+ grafanaVersion,
+}, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
  const panelEditPage = new PanelEditPage(
- { request, page, selectors, grafanaVersion },
+ { request, page, selectors, grafanaVersion, testInfo },
  {
  id: '5',
  dashboard,
@@ -24,10 +30,10 @@ test('variable interpolation (navigate to panel from dashboard)', async ({
  page,
  selectors,
  grafanaVersion,
-}) => {
+}, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
  const panelEditPage = new PanelEditPage(
- { request, page, selectors, grafanaVersion },
+ { request, page, selectors, grafanaVersion, testInfo },
  {
  id: '5',
  dashboard,

packages/plugin-e2e/tests/as-admin-user/panel/panel.spec.ts

@@ -18,10 +18,10 @@ test('open a clock panel in a provisioned dashboard and set time format to "12 h
  request,
  grafanaVersion,
  readProvisionedDashboard,
-}) => {
+}, testInfo) => {
  const dashboard = await readProvisionedDashboard({ fileName: 'clock-panel.json' });
  const args = { dashboard: { uid: dashboard.uid }, id: '5' };
- const panelEditPage = await new PanelEditPage({ page, selectors, grafanaVersion, request }, args);
+ const panelEditPage = await new PanelEditPage({ page, selectors, grafanaVersion, request, testInfo }, args);
  await panelEditPage.goto();
  await expect(panelEditPage.getVisualizationName()).toHaveText('Clock');
  await panelEditPage.collapseSection('Clock');