diff --git a/package-lock.json b/package-lock.json index 91fec94acd..8d2afecf20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@auto-it/omit-commits": "11.3.0", "@auto-it/slack": "11.3.0", "@grafana/eslint-config": "^8.0.0", + "@playwright/test": "^1.52.0", "@rollup/plugin-commonjs": "^28.0.3", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.1", diff --git a/package.json b/package.json index 6d7ecf1741..96e83cad75 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@auto-it/omit-commits": "11.3.0", "@auto-it/slack": "11.3.0", "@grafana/eslint-config": "^8.0.0", + "@playwright/test": "^1.52.0", "@rollup/plugin-commonjs": "^28.0.3", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.1", diff --git a/packages/plugin-e2e/playwright.config.ts b/packages/plugin-e2e/playwright.config.ts index 4621f52924..667c74014e 100644 --- a/packages/plugin-e2e/playwright.config.ts +++ b/packages/plugin-e2e/playwright.config.ts @@ -72,11 +72,7 @@ export default defineConfig({ testDir: './tests/as-admin-user', use: { ...devices['Desktop Chrome'], - launchOptions: { - args: ['--disable-features=PlzDedicatedWorker'], // because https://github.com/microsoft/playwright/pull/34400 - }, storageState: 'playwright/.auth/admin.json', - channel: 'chrome', }, dependencies: ['authenticate'], }, @@ -87,15 +83,11 @@ export default defineConfig({ testDir: './tests/as-admin-user', use: { ...devices['Desktop Chrome'], - launchOptions: { - args: ['--disable-features=PlzDedicatedWorker'], // because https://github.com/microsoft/playwright/pull/34400 - }, storageState: 'playwright/.auth/admin.json', viewport: { width: 1920, height: 1080, }, - channel: 'chrome', }, dependencies: ['authenticate'], }, @@ -105,11 +97,7 @@ export default defineConfig({ testDir: './tests/as-viewer-user', use: { ...devices['Desktop Chrome'], - launchOptions: { - args: ['--disable-features=PlzDedicatedWorker'], // because https://github.com/microsoft/playwright/pull/34400 - }, storageState: 'playwright/.auth/viewer.json', - channel: 'chrome', }, dependencies: ['createUserAndAuthenticate'], }, diff --git a/packages/plugin-e2e/src/models/components/DataSourcePicker.ts b/packages/plugin-e2e/src/models/components/DataSourcePicker.ts index 4b0910fddf..816a18708d 100644 --- a/packages/plugin-e2e/src/models/components/DataSourcePicker.ts +++ b/packages/plugin-e2e/src/models/components/DataSourcePicker.ts @@ -1,5 +1,5 @@ import * as semver from 'semver'; -import { Locator } from '@playwright/test'; +import { Locator, expect } from '@playwright/test'; import { PluginTestCtx } from '../../types'; import { GrafanaPage } from '../pages/GrafanaPage'; @@ -25,6 +25,7 @@ export class DataSourcePicker extends GrafanaPage { }).locator('input'); } + await expect(datasourcePicker).toBeVisible(); await datasourcePicker.fill(name); // this is a hack to get the selection to work in 10.ish versions of Grafana. diff --git a/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts b/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts index 9eecb89d1c..b3f549bbec 100644 --- a/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts +++ b/packages/plugin-e2e/src/models/pages/AlertRuleEditPage.ts @@ -2,7 +2,8 @@ import * as semver from 'semver'; import { AlertRuleArgs, NavigateOptions, PluginTestCtx, RequestOptions } from '../../types'; import { GrafanaPage } from './GrafanaPage'; import { AlertRuleQuery } from '../components/AlertRuleQuery'; - +import { expect } from '@playwright/test'; +import { isFeatureEnabled } from '../../fixtures/isFeatureToggleEnabled'; const QUERY_AND_EXPRESSION_STEP_ID = '2'; export class AlertRuleEditPage extends GrafanaPage { @@ -41,12 +42,20 @@ export class AlertRuleEditPage extends GrafanaPage { } async isAdvancedModeSupported() { - // why not check if alertingQueryAndExpressionsStepMode feature is enabled? then we'd have to update the code when the toggle is removed. - const count = await this.getByGrafanaSelector( - this.ctx.selectors.components.AlertRules.stepAdvancedModeSwitch(QUERY_AND_EXPRESSION_STEP_ID) - ).count(); + const alertingQueryAndExpressionsStepMode = await isFeatureEnabled( + this.ctx.page, + 'alertingQueryAndExpressionsStepMode' + ); + + if (alertingQueryAndExpressionsStepMode) { + await expect(this.advancedModeSwitch).toBeVisible(); + await expect(this.advancedModeSwitch).toHaveCount(1); + return true; + } - return count > 0; + await expect(this.advancedModeSwitch).not.toBeVisible(); + await expect(this.advancedModeSwitch).toHaveCount(0); + return false; } /* diff --git a/packages/plugin-e2e/src/models/pages/DashboardPage.ts b/packages/plugin-e2e/src/models/pages/DashboardPage.ts index 3446d67a20..023befc1b4 100644 --- a/packages/plugin-e2e/src/models/pages/DashboardPage.ts +++ b/packages/plugin-e2e/src/models/pages/DashboardPage.ts @@ -94,9 +94,15 @@ export class DashboardPage extends GrafanaPage { await this.getByGrafanaSelector(components.NavToolbar.editDashboard.editButton).click(); } // on small screens, the toolbar buttons are hidden behind a "Show more items" button - const toolbarButtonsHidden = !scenesEnabled && !!(await this.ctx.page.getByLabel('Show more items').count()); - if (toolbarButtonsHidden) { - await this.ctx.page.getByLabel('Show more items').click(); + const viewportDimensions = await this.ctx.page.viewportSize(); + let toolbarButtonsHidden = false; + + if (viewportDimensions && viewportDimensions.width <= 620) { + const showMoreItems = await this.ctx.page.getByLabel('Show more items'); + toolbarButtonsHidden = !scenesEnabled && (await showMoreItems.count()) > 0; + if (toolbarButtonsHidden) { + await showMoreItems.click(); + } } if (semver.gte(this.ctx.grafanaVersion, '9.5.0')) { diff --git a/packages/plugin-e2e/src/models/pages/GrafanaPage.ts b/packages/plugin-e2e/src/models/pages/GrafanaPage.ts index 7603e2a231..59ea2e0c1d 100644 --- a/packages/plugin-e2e/src/models/pages/GrafanaPage.ts +++ b/packages/plugin-e2e/src/models/pages/GrafanaPage.ts @@ -19,7 +19,7 @@ export abstract class GrafanaPage { url += `?${queryParams.toString()}`; } await this.ctx.page.goto(url, { - waitUntil: 'networkidle', + waitUntil: 'load', ...this.pageArgs, ...options, }); diff --git a/packages/plugin-e2e/src/models/pages/VariableEditPage.ts b/packages/plugin-e2e/src/models/pages/VariableEditPage.ts index f2dba860ac..10e552f6be 100644 --- a/packages/plugin-e2e/src/models/pages/VariableEditPage.ts +++ b/packages/plugin-e2e/src/models/pages/VariableEditPage.ts @@ -1,4 +1,5 @@ import * as semver from 'semver'; +import { expect } from '@playwright/test'; import { DashboardEditViewArgs, NavigateOptions, PluginTestCtx } from '../../types'; import { DataSourcePicker } from '../components/DataSourcePicker'; import { GrafanaPage } from './GrafanaPage'; @@ -30,9 +31,10 @@ export class VariableEditPage extends GrafanaPage { // In versions before 9.2.0, the variable index is not part of the URL so there's no way to navigate to it directly. // Instead, we have to click the nth row in the variable list to navigate to the edit page for a given variable index. if (semver.lt(this.ctx.grafanaVersion, '9.2.0') && this.args.id) { - const list = this.getByGrafanaSelector(this.ctx.selectors.pages.Dashboard.Settings.Variables.List.table).locator( - 'tbody tr' - ); + const list = await this.getByGrafanaSelector( + this.ctx.selectors.pages.Dashboard.Settings.Variables.List.table + ).locator('tbody tr'); + await expect(list).toBeVisible(); const variables = await list.all(); await variables[Number(this.args.id)].click(); } diff --git a/packages/plugin-e2e/tests/as-admin-user/app/app-config/appConfig.spec.ts b/packages/plugin-e2e/tests/as-admin-user/app/app-config/appConfig.spec.ts index c8c069271a..e176a8b882 100644 --- a/packages/plugin-e2e/tests/as-admin-user/app/app-config/appConfig.spec.ts +++ b/packages/plugin-e2e/tests/as-admin-user/app/app-config/appConfig.spec.ts @@ -16,6 +16,6 @@ test('should wait for plugin config settings API to respond', async ({ gotoAppCo ); const response = configPage.waitForSettingsResponse(); - await page.getByRole('button', { name: 'Disable' }).first().click(); + await page.getByRole('button', { name: /Disable|Enable/i }).first().click(); await expect(response).toBeOK(); }); diff --git a/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.advancedMode.spec.ts b/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.advancedMode.spec.ts index 6313ac86f4..e2187655ec 100644 --- a/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.advancedMode.spec.ts +++ b/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.advancedMode.spec.ts @@ -6,7 +6,7 @@ const skipMsg = 'Alerting rule test API are only compatible with Grafana 9.5.0 a test.describe('Test alert rule APIs', () => { test('advanced mode should be enabled', async ({ grafanaVersion, alertRuleEditPage }) => { test.skip(semver.lt(grafanaVersion, '11.6.0'), 'Advanced mode is not supported in Grafana versions < 11.6.0'); - expect(await alertRuleEditPage.isAdvancedModeSupported()).toBe(true); + await expect(alertRuleEditPage.advancedModeSwitch).toHaveCount(1); }); test('should be possible to enable advanced mode', async ({ grafanaVersion, alertRuleEditPage }) => { diff --git a/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.basicMode.spec.ts b/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.basicMode.spec.ts index eb93d38e60..9521e2b16d 100644 --- a/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.basicMode.spec.ts +++ b/packages/plugin-e2e/tests/as-admin-user/datasource/alerting/alerting.basicMode.spec.ts @@ -6,7 +6,7 @@ test.use({ featureToggles: { alertingQueryAndExpressionsStepMode: false, alertin test.describe('Test alert rule APIs', () => { test('advanced mode should be disabled', async ({ grafanaVersion, alertRuleEditPage }) => { test.skip(semver.lt(grafanaVersion, '9.5.0'), skipMsg); - expect(await alertRuleEditPage.isAdvancedModeSupported()).toBe(false); + await expect(alertRuleEditPage.advancedModeSwitch).toHaveCount(0); }); });