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

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

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

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

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

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

export const dataSourcesPageFactory = (testDataSourceName: string) =>
  new TestPage({
    url: '/datasources',
    pageObjects: {
      testData: new ClickablePageObject(Selector.fromAriaLabel(`Data source list item for ${testDataSourceName}`)),
    },
  });

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 { 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')),
  },
});