[APM] Migrate the Transaction Overview tests to Scout/Playwright/Component/API tests

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

@@ -10,6 +10,7 @@ import { generateLongIdWithSeed } from '@kbn/synthtrace-client/src/lib/utils/gen
 
 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;
 
 export const PRODUCT_TRANSACTION_NAME = 'GET /api/product';
 // Error constants - based on opbeans synthtrace data

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

@@ -25,6 +25,7 @@ import { AgentExplorerPage } from './page_objects/agent_explorer';
 import { AgentKeysPage } from './page_objects/agent_keys';
 import { AnomalyDetectionPage } from './page_objects/anomaly_detection';
 import { ErrorsPage } from './page_objects/errors';
+import { TransactionsOverviewPage } from './page_objects/transactions_overview';
 import { APM_ROLES } from './constants';
 import { TransactionDetailsPage } from './page_objects/transaction_details';
 
@@ -48,6 +49,7 @@ export interface ExtendedScoutTestFixtures extends ObltTestFixtures {
     agentKeysPage: AgentKeysPage;
     anomalyDetectionPage: AnomalyDetectionPage;
     errorsPage: ErrorsPage;
+    transactionsOverviewPage: TransactionsOverviewPage;
     transactionDetailsPage: TransactionDetailsPage;
   };
   browserAuth: ApmBrowserAuthFixture;
@@ -80,6 +82,7 @@ export const test = base.extend<ExtendedScoutTestFixtures, ObltWorkerFixtures>({
       agentKeysPage: createLazyPageObject(AgentKeysPage, page, kbnUrl),
       anomalyDetectionPage: createLazyPageObject(AnomalyDetectionPage, page, kbnUrl),
       errorsPage: createLazyPageObject(ErrorsPage, page, kbnUrl),
+      transactionsOverviewPage: createLazyPageObject(TransactionsOverviewPage, page, kbnUrl),
       transactionDetailsPage: createLazyPageObject(TransactionDetailsPage, 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.testSubj.waitForSelector('apmMainContainer');
+    await waitForApmMainContainer(this.page);
 
     // Wait for the page content to load
     await this.page.getByRole('heading', { name: 'Settings', level: 1 }).waitFor();

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,7 +17,7 @@ export class AgentExplorerPage {
         'apm'
       )}/settings/agent-explorer?kuery=&agentLanguage=&serviceName=&comparisonEnabled=true&environment=ENVIRONMENT_ALL`
     );
-    await this.page.testSubj.waitForSelector('apmMainContainer');
+    await waitForApmMainContainer(this.page);
 
     // Wait for the page content to load
     await this.page.getByRole('heading', { name: 'Settings', level: 1 }).waitFor();

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

@@ -8,13 +8,15 @@
 import { expect } from '@kbn/scout-oblt';
 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.testSubj.waitForSelector('apmMainContainer');
+    await waitForApmMainContainer(this.page);
 
     // Wait for the page content to load
     await this.page.getByRole('heading', { name: 'Settings', level: 1 }).waitFor();
@@ -40,6 +42,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() {
@@ -57,6 +60,7 @@ export class AnomalyDetectionPage {
 
   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();

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';
+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';
+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}`);
-    await this.page.testSubj.waitForSelector('apmUnifiedSearchBar');
+    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';
+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() {