[Observability][Scout] Migrate navigation e2e tests to Scout (elastic#264422)

Co-authored-by: Dzmitry Lemechko <dzmitry.lemechko@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: 3 people

.buildkite/ftr_oblt_stateful_configs.yml

@@ -49,4 +49,3 @@ enabled:
   - x-pack/solutions/observability/test/api_integration_deployment_agnostic/configs/stateful/oblt.ai_assistant.stateful.config.ts
   - x-pack/solutions/observability/test/api_integration_deployment_agnostic/feature_flag_configs/stateful/oblt.stateful.config.ts
   - x-pack/solutions/observability/test/api_integration_deployment_agnostic/configs/stateful/oblt.ai_agent.stateful.config.ts
-  - x-pack/solutions/observability/test/functional_solution_sidenav/config.ts

.buildkite/scout_ci_config.yml

@@ -40,6 +40,7 @@ plugins:
     - search_inference_endpoints
     - security
     - security_solution
+    - serverless_observability
     - share
     - slo
     - spaces

.github/CODEOWNERS

@@ -1889,7 +1889,6 @@ x-pack/platform/plugins/shared/streams/test/scout/api/tests/sig_events @elastic/
 
 # Observability-ui
 /x-pack/solutions/observability/test/serverless/api_integration/configs/index.ts @elastic/observability-ui
-/x-pack/solutions/observability/test/functional_solution_sidenav/ @elastic/observability-ui
 /x-pack/solutions/observability/test/functional/page_objects/observability_page.ts @elastic/observability-ui
 /x-pack/solutions/observability/plugins/observability/server/services/index.ts @elastic/observability-ui
 

x-pack/solutions/observability/packages/kbn-scout-oblt/src/playwright/fixtures/parallel_run_fixtures.ts

@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import { spaceTest as spaceBase, mergeTests } from '@kbn/scout';
+import { spaceTest as spaceBase } from '@kbn/scout';
 import { extendPageObjects } from '../page_objects';
-import { profilingSetupFixture } from './worker';
 
 import type { ObltParallelTestFixtures, ObltParallelWorkerFixtures } from './types';
 
-const baseFixture = spaceBase.extend<ObltParallelTestFixtures, ObltParallelWorkerFixtures>({
+/**
+ * Does not merge `profilingSetupFixture`: it extends non-space `test`; `mergeTests`
+ * would overwrite the space-scoped `page` and break `scoutSpace` isolation.
+ * Profiling stays on single-thread `test` / `apiTest` / global setup.
+ */
+export const spaceTest = spaceBase.extend<ObltParallelTestFixtures, ObltParallelWorkerFixtures>({
   pageObjects: async (
     {
       pageObjects,
@@ -34,8 +38,3 @@ const baseFixture = spaceBase.extend<ObltParallelTestFixtures, ObltParallelWorke
     { scope: 'worker' },
   ],
 });
-
-/**
- * Should be used test spec files, running in parallel in isolated spaces against the same Kibana instance.
- */
-export const spaceTest = mergeTests(baseFixture, profilingSetupFixture);

x-pack/solutions/observability/packages/kbn-scout-oblt/src/playwright/fixtures/types.ts

@@ -33,5 +33,4 @@ export interface ObltParallelTestFixtures extends ScoutParallelTestFixtures {
 
 export interface ObltParallelWorkerFixtures extends ScoutParallelWorkerFixtures {
   apiServices: ObltApiServicesFixture;
-  profilingSetup: ProfilingSetupFixture;
 }

x-pack/solutions/observability/packages/kbn-scout-oblt/src/playwright/page_objects/observability_navigation.ts

@@ -5,16 +5,153 @@
  * 2.0.
  */
 
-import type { ScoutPage } from '@kbn/scout';
+import type { Locator, ScoutPage } from '@kbn/scout';
 
+/** Chrome nav for Observability — locators and actions only; specs own `expect`. */
 export class ObservabilityNavigation {
-  constructor(private readonly page: ScoutPage) {}
+  public readonly sidenav: Locator;
+  public readonly primaryNav: Locator;
+  public readonly footerNav: Locator;
+  public readonly morePopover: Locator;
+  public readonly breadcrumbs: Locator;
+  public readonly logo: Locator;
+  public readonly moreMenuTrigger: Locator;
 
+  constructor(private readonly page: ScoutPage) {
+    this.sidenav = this.page.testSubj.locator('kbnChromeLayoutNavigation');
+    this.primaryNav = this.page.testSubj.locator('kbnChromeNav-primaryNavigation');
+    this.footerNav = this.page.testSubj.locator('kbnChromeNav-footer');
+    this.morePopover = this.page.testSubj.locator('side-nav-popover-More');
+    this.breadcrumbs = this.page.testSubj.locator('breadcrumbs');
+    this.logo = this.page.testSubj.locator('nav-header-logo');
+    this.moreMenuTrigger = this.page.testSubj.locator('kbnChromeNav-moreMenuTrigger');
+  }
+
+  /** `goto*` does not call `waitForLoad()` — sidenav may be absent (e.g. classic chrome); call `waitForLoad()` when interacting with nav. */
   async goto() {
     await this.page.gotoApp('observability');
   }
 
   async gotoLanding() {
     await this.page.gotoApp('observability/landing');
   }
+
+  async gotoApp(appName: string) {
+    await this.page.gotoApp(appName);
+  }
+
+  /** Waits on `primaryNav` (outer layout can be 0-width until CSS vars apply). */
+  async waitForLoad() {
+    await this.primaryNav.waitFor({ state: 'visible' });
+  }
+
+  /** App root or `kbnNoDataPage` (Discover/Dashboards with no data views). */
+  pageOrNoData(testSubj: string): Locator {
+    return this.page.testSubj.locator(testSubj).or(this.page.testSubj.locator('kbnNoDataPage'));
+  }
+
+  navItemInPrimaryByDeepLinkId(deepLinkId: string): Locator {
+    return this.primaryNav.locator(`[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"]`);
+  }
+
+  navItemInPrimaryById(id: string): Locator {
+    return this.primaryNav.locator(`[data-test-subj~="nav-item-id-${id}"]`);
+  }
+
+  /** Primary or More — for overflow-dependent placement; prefer scoped helpers when fixed. */
+  navItemInBodyByDeepLinkId(deepLinkId: string): Locator {
+    const selector = `[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"]`;
+    return this.primaryNav.locator(selector).or(this.morePopover.locator(selector));
+  }
+
+  navItemInBodyById(id: string): Locator {
+    const selector = `[data-test-subj~="nav-item-id-${id}"]`;
+    return this.primaryNav.locator(selector).or(this.morePopover.locator(selector));
+  }
+
+  navItemInFooterByDeepLinkId(deepLinkId: string): Locator {
+    return this.footerNav.locator(`[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"]`);
+  }
+
+  navItemInFooterById(id: string): Locator {
+    return this.footerNav.locator(`[data-test-subj~="nav-item-id-${id}"]`);
+  }
+
+  navItemInMoreByDeepLinkId(deepLinkId: string): Locator {
+    return this.morePopover.locator(`[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"]`);
+  }
+
+  navItemInMoreById(id: string): Locator {
+    return this.morePopover.locator(`[data-test-subj~="nav-item-id-${id}"]`);
+  }
+
+  navItemInSidenavByDeepLinkId(deepLinkId: string): Locator {
+    return this.sidenav.locator(`[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"]`);
+  }
+
+  navItemInSidenavById(id: string): Locator {
+    return this.sidenav.locator(`[data-test-subj~="nav-item-id-${id}"]`);
+  }
+
+  /** Item with `nav-item-isActive` in test-subj (current route). */
+  activeNavItemByDeepLinkId(deepLinkId: string): Locator {
+    return this.sidenav.locator(
+      `[data-test-subj~="nav-item-deepLinkId-${deepLinkId}"][data-test-subj~="nav-item-isActive"]`
+    );
+  }
+
+  activeNavItemById(id: string): Locator {
+    return this.sidenav.locator(
+      `[data-test-subj~="nav-item-id-${id}"][data-test-subj~="nav-item-isActive"]`
+    );
+  }
+
+  sidePanel(id: string): Locator {
+    return this.page.testSubj.locator(`~kbnChromeNav-sidePanel_${id}`);
+  }
+
+  nestedPanel(id: string): Locator {
+    return this.morePopover.locator(`[data-test-subj="kbnChromeNav-nestedPanel-${id}"]`);
+  }
+
+  anyPanel(id: string): Locator {
+    return this.sidePanel(id).or(this.nestedPanel(id));
+  }
+
+  /** By `breadcrumb-deepLinkId-*` test-subj or visible text. */
+  breadcrumb(by: { deepLinkId: string } | { text: string }): Locator {
+    if ('deepLinkId' in by) {
+      return this.breadcrumbs.locator(`[data-test-subj~="breadcrumb-deepLinkId-${by.deepLinkId}"]`);
+    }
+    return this.breadcrumbs.locator('[data-test-subj~="breadcrumb"]', { hasText: by.text });
+  }
+
+  /** If More is already open, Escape first so the next open is the root list. */
+  async openMoreMenu() {
+    if (await this.morePopover.isVisible()) {
+      await this.page.keyboard.press('Escape');
+      await this.morePopover.waitFor({ state: 'hidden' });
+    }
+    await this.moreMenuTrigger.click();
+    await this.morePopover.waitFor({ state: 'visible' });
+  }
+
+  async clickLogo() {
+    await this.logo.click();
+  }
+
+  /** Returns a function that is false after a full page reload (spec asserts). */
+  async createNoPageReloadCheck(): Promise<() => Promise<boolean>> {
+    const trackReloadTs = Date.now();
+    await this.page.evaluate((ts: number) => {
+      (window as unknown as { __testTrackReload__?: number }).__testTrackReload__ = ts;
+    }, trackReloadTs);
+
+    return async () => {
+      return this.page.evaluate((ts: number) => {
+        const w = window as unknown as { __testTrackReload__?: number };
+        return w.__testTrackReload__ === ts;
+      }, trackReloadTs);
+    };
+  }
 }

x-pack/solutions/observability/plugins/observability/test/scout/ui/parallel_tests/navigation/navigation_footer.spec.ts

@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { spaceTest as test, tags } from '@kbn/scout-oblt';
+import { expect } from '@kbn/scout-oblt/ui';
+
+test.describe(
+  'Stateful Observability Navigation - Footer',
+  { tag: [...tags.stateful.observability] },
+  () => {
+    test.beforeAll(async ({ scoutSpace }) => {
+      await scoutSpace.setSolutionView('oblt');
+    });
+
+    test.beforeEach(async ({ browserAuth, pageObjects }) => {
+      await browserAuth.loginAsAdmin();
+      await pageObjects.observabilityNavigation.goto();
+      await pageObjects.observabilityNavigation.waitForLoad();
+    });
+
+    test('renders expected footer items with working links', async ({ pageObjects }) => {
+      const nav = pageObjects.observabilityNavigation;
+
+      await test.step('Add data or Ingest Hub entry is visible and linked', async () => {
+        const addData = nav.navItemInFooterByDeepLinkId('observabilityOnboarding');
+        const ingestHub = nav.navItemInFooterByDeepLinkId('ingestHub');
+        const item = addData.or(ingestHub);
+        await expect(item).toBeVisible();
+        await expect(item).toHaveAttribute('href', /.+/);
+      });
+
+      await test.step('Developer tools is visible and linked', async () => {
+        const item = nav.navItemInFooterById('devTools');
+        await expect(item).toBeVisible();
+        await expect(item).toHaveAttribute('href', /.+/);
+      });
+
+      await test.step('Data management panel opener is visible', async () => {
+        await expect(nav.navItemInFooterById('data_management')).toBeVisible();
+      });
+
+      await test.step('Stack Management panel opener is visible', async () => {
+        await expect(nav.navItemInFooterById('stack_management')).toBeVisible();
+      });
+    });
+
+    test('clicking footer items navigates to the correct destinations', async ({
+      pageObjects,
+      page,
+    }) => {
+      const nav = pageObjects.observabilityNavigation;
+
+      await test.step('Developer tools navigates to the console app', async () => {
+        await nav.navItemInFooterById('devTools').click();
+        await expect(page.testSubj.locator('console')).toBeVisible();
+      });
+
+      await test.step('Data management opens its side panel', async () => {
+        await nav.navItemInFooterById('data_management').click();
+        await expect(nav.sidePanel('data_management')).toBeVisible();
+      });
+
+      await test.step('Stack Management opens its side panel', async () => {
+        await nav.navItemInFooterById('stack_management').click();
+        await expect(nav.sidePanel('stack_management')).toBeVisible();
+      });
+    });
+
+    test('Stack Management panel children navigate and update breadcrumbs', async ({
+      pageObjects,
+    }) => {
+      const nav = pageObjects.observabilityNavigation;
+
+      await test.step('stack_management → Tags', async () => {
+        await nav.navItemInFooterById('stack_management').click();
+        await expect(nav.sidePanel('stack_management')).toBeVisible();
+
+        await nav
+          .sidePanel('stack_management')
+          .locator('[data-test-subj~="nav-item-id-management:tags"]')
+          .click();
+        await expect(nav.breadcrumb({ text: 'Tags' })).toBeVisible();
+      });
+
+      await test.step('stack_management → Maintenance Windows', async () => {
+        await nav.navItemInFooterById('stack_management').click();
+        await expect(nav.sidePanel('stack_management')).toBeVisible();
+
+        await nav
+          .sidePanel('stack_management')
+          .locator('[data-test-subj~="nav-item-id-management:maintenanceWindows"]')
+          .click();
+        await expect(nav.breadcrumb({ text: 'Maintenance Windows' })).toBeVisible();
+      });
+    });
+
+    test('legacy management landing page opens the Stack Management panel', async ({
+      pageObjects,
+      page,
+    }) => {
+      const nav = pageObjects.observabilityNavigation;
+      await page.gotoApp('management');
+      await nav.waitForLoad();
+      await expect(page.testSubj.locator('managementHomeSolution')).toBeVisible();
+      await expect(nav.sidePanel('stack_management')).toBeVisible();
+    });
+
+    test('active sidenav panel is re-opened after a browser refresh', async ({
+      pageObjects,
+      page,
+    }) => {
+      const nav = pageObjects.observabilityNavigation;
+
+      await nav.navItemInFooterById('stack_management').click();
+      await expect(nav.sidePanel('stack_management')).toBeVisible();
+
+      await nav
+        .sidePanel('stack_management')
+        .locator('[data-test-subj~="nav-item-id-management:tags"]')
+        .click();
+      await expect(nav.breadcrumb({ text: 'Tags' })).toBeVisible();
+
+      await page.reload();
+      await nav.waitForLoad();
+
+      await expect(nav.sidePanel('stack_management')).toBeVisible();
+    });
+  }
+);