[9.2] [APM] Migrate the Transaction Overview tests to Scout/Playwright/Component/API tests (#245972)

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/constants.ts

@@ -9,6 +9,7 @@ import type { KibanaRole } from '@kbn/scout-oblt';
 
 export const OPBEANS_START_DATE = '2021-10-10T00:00:00.000Z';
 export const OPBEANS_END_DATE = '2021-10-10T00:15:00.000Z';
+export const BIGGER_TIMEOUT = 45000;
 
 // APM-specific role definitions matching authentication.ts
 export const APM_ROLES = {

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/index.ts

@@ -23,7 +23,9 @@ import { AgentConfigurationsPage } from './page_objects/agent_configurations';
 import { AgentExplorerPage } from './page_objects/agent_explorer';
 import { AgentKeysPage } from './page_objects/agent_keys';
 import { AnomalyDetectionPage } from './page_objects/anomaly_detection';
+import { TransactionsOverviewPage } from './page_objects/transactions_overview';
 import { APM_ROLES } from './constants';
+import { TransactionDetailsPage } from './page_objects/transaction_details';
 
 export interface ApmBrowserAuthFixture extends BrowserAuthFixture {
   loginAsApmAllPrivilegesWithoutWriteSettings: () => Promise<void>;
@@ -42,6 +44,8 @@ export interface ExtendedScoutTestFixtures extends ObltTestFixtures {
     agentExplorerPage: AgentExplorerPage;
     agentKeysPage: AgentKeysPage;
     anomalyDetectionPage: AnomalyDetectionPage;
+    transactionsOverviewPage: TransactionsOverviewPage;
+    transactionDetailsPage: TransactionDetailsPage;
   };
   browserAuth: ApmBrowserAuthFixture;
 }
@@ -70,6 +74,8 @@ export const test = base.extend<ExtendedScoutTestFixtures, ObltWorkerFixtures>({
       agentExplorerPage: createLazyPageObject(AgentExplorerPage, page, kbnUrl),
       agentKeysPage: createLazyPageObject(AgentKeysPage, page, kbnUrl),
       anomalyDetectionPage: createLazyPageObject(AnomalyDetectionPage, page, kbnUrl),
+      transactionsOverviewPage: createLazyPageObject(TransactionsOverviewPage, page, kbnUrl),
+      transactionDetailsPage: createLazyPageObject(TransactionDetailsPage, page, kbnUrl),
       serviceGroupsPage: createLazyPageObject(ServiceGroupsPage, page, kbnUrl),
     };
 

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_helpers.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 type { ScoutPage } from '@kbn/scout-oblt';
+import { BIGGER_TIMEOUT } from './constants';
+
+/**
+ * Waits for the APM settings header link to be visible.
+ * This is commonly used to ensure the APM page has fully loaded.
+ */
+export async function waitForApmSettingsHeaderLink(page: ScoutPage): Promise<void> {
+  await page
+    .getByTestId('apmSettingsHeaderLink')
+    .waitFor({ state: 'visible', timeout: BIGGER_TIMEOUT });
+}
+
+/**
+ * Waits for the APM main container to be visible.
+ * This is commonly used to ensure the APM page has fully loaded.
+ */
+export async function waitForApmMainContainer(page: ScoutPage): Promise<void> {
+  await page.testSubj.waitForSelector('apmMainContainer', { timeout: BIGGER_TIMEOUT });
+}

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/agent_configurations.ts

@@ -14,13 +14,14 @@
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
 import { EuiComboBoxWrapper, EuiFieldTextWrapper } from '@kbn/scout-oblt';
+import { waitForApmMainContainer } from '../page_helpers';
 
 export class AgentConfigurationsPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/agent-configuration`);
-    await this.page.waitForLoadingIndicatorHidden();
+    await waitForApmMainContainer(this.page);
 
     // Wait for the page content to load
     this.page.getByRole('heading', { name: 'Settings', level: 1 });

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/agent_explorer.ts

@@ -6,6 +6,7 @@
  */
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
+import { waitForApmMainContainer } from '../page_helpers';
 
 export class AgentExplorerPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
@@ -16,8 +17,7 @@ export class AgentExplorerPage {
         'apm'
       )}/settings/agent-explorer?kuery=&agentLanguage=&serviceName=&comparisonEnabled=true&environment=ENVIRONMENT_ALL`
     );
-    await this.page.waitForLoadingIndicatorHidden();
-    this.page.getByRole('heading', { name: 'Settings', level: 1 });
+    await waitForApmMainContainer(this.page);
 
     return this.page;
   }

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/agent_keys.ts

@@ -6,13 +6,14 @@
  */
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class AgentKeysPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/agent-keys`);
-    await this.page.waitForLoadingIndicatorHidden();
+    await waitForApmSettingsHeaderLink(this.page);
     this.page.getByRole('heading', { name: 'Settings', level: 1 });
 
     return this.page;

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/anomaly_detection.ts

@@ -7,13 +7,15 @@
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
 import { EuiComboBoxWrapper } from '@kbn/scout-oblt';
+import { BIGGER_TIMEOUT } from '../constants';
+import { waitForApmMainContainer } from '../page_helpers';
 
 export class AnomalyDetectionPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/anomaly-detection`);
-    await this.page.waitForLoadingIndicatorHidden();
+    await waitForApmMainContainer(this.page);
 
     // Wait for the page content to load
     this.page.getByRole('heading', { name: 'Settings', level: 1 });
@@ -41,6 +43,7 @@ export class AnomalyDetectionPage {
   async selectEnvironment(environmentName: string) {
     const environmentComboBox = new EuiComboBoxWrapper(this.page, { locator: '.euiComboBox' });
     await environmentComboBox.setCustomMultiOption(environmentName);
+    await this.page.keyboard.press('Escape');
   }
 
   async clickCreateJobsButton() {
@@ -55,4 +58,15 @@ export class AnomalyDetectionPage {
 
     this.page.getByText('Anomaly detection jobs created');
   }
+
+  async deleteMlJob() {
+    const manageJobsButton = this.page.testSubj.locator('apmMLManageJobsTextLink');
+    await manageJobsButton.waitFor({ state: 'visible', timeout: BIGGER_TIMEOUT });
+    await manageJobsButton.click();
+    const allActionsButton = this.page.getByLabel('All actions, row 1');
+    await allActionsButton.click();
+    await this.page.testSubj.locator('mlActionButtonDeleteJob').click();
+    await this.page.testSubj.locator('mlDeleteJobConfirmModalButton').click();
+    await expect(this.page.getByText('deleted successfully')).toBeVisible();
+  }
 }

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/custom_links.ts

@@ -7,6 +7,7 @@
 
 import type { KibanaUrl, Locator, ScoutPage } from '@kbn/scout-oblt';
 import { expect } from '@kbn/scout-oblt/ui';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class CustomLinksPage {
   public saveButton: Locator;
@@ -16,7 +17,7 @@ export class CustomLinksPage {
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/custom-links`);
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async getCreateCustomLinkButton() {

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/general_settings.ts

@@ -6,13 +6,14 @@
  */
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class GeneralSettingsPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/general-settings`);
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async getInspectEsQueriesButton() {

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/indices.ts

@@ -6,13 +6,14 @@
  */
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class IndicesPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async goto() {
     await this.page.goto(`${this.kbnUrl.app('apm')}/settings/apm-indices`);
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async getErrorIndexInput() {

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/service_groups.ts

@@ -7,6 +7,7 @@
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
 import { expect } from '@kbn/scout-oblt/ui';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class ServiceGroupsPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
@@ -15,7 +16,7 @@ export class ServiceGroupsPage {
     await this.page.goto(
       `${this.kbnUrl.app('apm')}/service-groups?&rangeFrom=${start}&rangeTo=${end}`
     );
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async typeInTheSearchBar(text: string) {

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/service_inventory.ts

@@ -6,12 +6,13 @@
  */
 
 import type { KibanaUrl, ScoutPage } from '@kbn/scout-oblt';
+import { BIGGER_TIMEOUT } from '../constants';
 
 export class ServiceInventoryPage {
   constructor(private readonly page: ScoutPage, private readonly kbnUrl: KibanaUrl) {}
 
   async gotoDetailedServiceInventoryWithDateSelected(start: string, end: string) {
     await this.page.goto(`${this.kbnUrl.app('apm')}/services?&rangeFrom=${start}&rangeTo=${end}`);
-    return this.page.waitForLoadingIndicatorHidden();
+    await this.page.testSubj.waitForSelector('apmUnifiedSearchBar', { timeout: BIGGER_TIMEOUT });
   }
 }

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/page_objects/service_map.ts

@@ -7,6 +7,7 @@
 
 import type { KibanaUrl, Locator, ScoutPage } from '@kbn/scout-oblt';
 import { expect } from '@kbn/scout-oblt/ui';
+import { waitForApmSettingsHeaderLink } from '../page_helpers';
 
 export class ServiceMapPage {
   public serviceMap: Locator;
@@ -27,7 +28,7 @@ export class ServiceMapPage {
     await this.page.goto(
       `${this.kbnUrl.app('apm')}/service-map?&rangeFrom=${start}&rangeTo=${end}`
     );
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async gotoDetailedServiceMapWithDateSelected(start: string, end: string) {
@@ -36,7 +37,7 @@ export class ServiceMapPage {
         'apm'
       )}/services/opbeans-java/service-map?&rangeFrom=${start}&rangeTo=${end}`
     );
-    return this.page.waitForLoadingIndicatorHidden();
+    return await waitForApmSettingsHeaderLink(this.page);
   }
 
   async getSearchBar() {