PluginE2E: Move away from networkIdle

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",

packages/plugin-e2e/playwright.config.ts

@@ -72,11 +72,7 @@ export default defineConfig<PluginOptions>({
       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<PluginOptions>({
       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<PluginOptions>({
       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'],
     },

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.

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;
   }
 
   /*

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

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

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();
     }

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();
 });

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 }) => {

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