How to use the @grafana/toolkit/src/e2e.TestPage function in @grafana/toolkit

import { TestPage, ClickablePageObject, Selector, ClickablePageObjectType } from '@grafana/toolkit/src/e2e';

export interface AddDataSourcePage {
  testDataDB: ClickablePageObjectType;
}

export const addDataSourcePage = new TestPage({
  url: '/datasources/new',
  pageObjects: {
    testDataDB: new ClickablePageObject(Selector.fromAriaLabel('TestData DB datasource plugin')),
  },
});

TestPage,
  ClickablePageObjectType,
  ClickablePageObject,
  Selector,
  InputPageObjectType,
  InputPageObject,
  PageObject,
} from '@grafana/toolkit/src/e2e';

export interface SaveDashboardModal {
  name: InputPageObjectType;
  save: ClickablePageObjectType;
  success: PageObject;
}

export const saveDashboardModal = new TestPage({
  pageObjects: {
    name: new InputPageObject(Selector.fromAriaLabel('Save dashboard title field')),
    save: new ClickablePageObject(Selector.fromAriaLabel('Save dashboard button')),
    success: new PageObject(Selector.fromSelector('.alert-success')),
  },
});

import { ClickablePageObjectType, TestPage } from '@grafana/toolkit/src/e2e';

export interface Panel {
  panelTitle: ClickablePageObjectType;
  share: ClickablePageObjectType;
}

export const panel = new TestPage({
  pageObjects: {
    panelTitle: 'Panel Title',
    share: 'Share panel menu item',
  },
});

import { TestPage, ClickablePageObjectType, ClickablePageObject, Selector } from '@grafana/toolkit/src/e2e';

export interface Panel {
  panelTitle: ClickablePageObjectType;
  share: ClickablePageObjectType;
}

export const panel = new TestPage({
  pageObjects: {
    panelTitle: new ClickablePageObject(Selector.fromAriaLabel('Panel Title')),
    share: new ClickablePageObject(Selector.fromAriaLabel('Share panel menu item')),
  },
});

import { ClickablePageObjectType, Selector, SelectPageObjectType, TestPage } from '@grafana/toolkit/src/e2e';

export interface EditPanelPage {
  queriesTab: ClickablePageObjectType;
  saveDashboard: ClickablePageObjectType;
  scenarioSelect: SelectPageObjectType;
  showXAxis: ClickablePageObjectType;
  visualizationTab: ClickablePageObjectType;
}

export const editPanelPage = new TestPage({
  pageObjects: {
    queriesTab: 'Queries tab button',
    saveDashboard: 'Save dashboard navbar button',
    scenarioSelect: 'Scenario Select',
    showXAxis: () => Selector.fromSelector('[aria-label="X-Axis section"] [label=Show] .gf-form-switch'),
    visualizationTab: 'Visualization tab button',
  },
});

SelectPageObjectType,
  SelectPageObject,
  Selector,
  ClickablePageObjectType,
  ClickablePageObject,
} from '@grafana/toolkit/src/e2e';

export interface EditPanelPage {
  queriesTab: ClickablePageObjectType;
  saveDashboard: ClickablePageObjectType;
  scenarioSelect: SelectPageObjectType;
  showXAxis: ClickablePageObjectType;
  visualizationTab: ClickablePageObjectType;
}

export const editPanelPage = new TestPage({
  pageObjects: {
    queriesTab: new ClickablePageObject(Selector.fromAriaLabel('Queries tab button')),
    saveDashboard: new ClickablePageObject(Selector.fromAriaLabel('Save dashboard navbar button')),
    scenarioSelect: new SelectPageObject(Selector.fromAriaLabel('Scenario Select')),
    showXAxis: new ClickablePageObject(
      Selector.fromSelector('[aria-label="X-Axis section"] [label=Show] .gf-form-switch')
    ),
    visualizationTab: new ClickablePageObject(Selector.fromAriaLabel('Visualization tab button')),
  },
});

import { TestPage, ClickablePageObjectType, ClickablePageObject, Selector } from '@grafana/toolkit/src/e2e';

export interface CreateDashboardPage {
  addQuery: ClickablePageObjectType;
}

export const createDashboardPage = new TestPage({
  url: '/dashboard/new',
  pageObjects: {
    addQuery: new ClickablePageObject(Selector.fromAriaLabel('Add Query CTA button')),
  },
});

import { ClickablePageObjectType, TestPage } from '@grafana/toolkit/src/e2e';

export interface SharePanelModal {
  directLinkRenderedImage: ClickablePageObjectType;
}

export const sharePanelModal = new TestPage({
  pageObjects: {
    directLinkRenderedImage: 'Link to rendered image',
  },
});

import {
  TestPage,
  ClickablePageObjectType,
  PageObjectType,
  ClickablePageObject,
  PageObject,
  Selector,
} from '@grafana/toolkit/src/e2e';

export interface EditDataSourcePage {
  saveAndTest: ClickablePageObjectType;
  alert: PageObjectType;
  alertMessage: PageObjectType;
}

export const editDataSourcePage = new TestPage({
  pageObjects: {
    saveAndTest: new ClickablePageObject(Selector.fromAriaLabel('Save and Test button')),
    alert: new PageObject(Selector.fromAriaLabel('Datasource settings page Alert')),
    alertMessage: new PageObject(Selector.fromAriaLabel('Datasource settings page Alert message')),
  },
});

import { TestPage, ClickablePageObjectType, ClickablePageObject, Selector } from '@grafana/toolkit/src/e2e';

export interface SharePanelModal {
  directLinkRenderedImage: ClickablePageObjectType;
}

export const sharePanelModal = new TestPage({
  pageObjects: {
    directLinkRenderedImage: new ClickablePageObject(Selector.fromAriaLabel('Link to rendered image')),
  },
});