Plugin E2E: Pass testinfo to models (#769)

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');