[9.0] [scout/security] improve alerting table wait (#216262) (#217039)

# Backport This will backport the following commits from `main` to `9.0`: - [[scout/security] improve alerting table wait (#216262)](https://github.com/elastic/kibana/pull/216262)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Dzmitry Lemechko <dzmitry.lemechko@elastic.co>
2025-04-23 17:28:26 -04:00 · 2025-04-03 18:21:23 +02:00 · 2025-04-03 18:21:23 +02:00 · 6fdc566ace
commit 6fdc566ace
parent 599fe49bd4
2 changed files with 33 additions and 42 deletions
--- a/x-pack/solutions/security/packages/kbn-scout-security/src/playwright/fixtures/test/page_objects/alerts_table.ts
+++ b/x-pack/solutions/security/packages/kbn-scout-security/src/playwright/fixtures/test/page_objects/alerts_table.ts
@ -5,48 +5,33 @@
 * 2.0.
 */

-import { ScoutPage, Locator } from '@kbn/scout';
+import { ScoutPage, Locator, expect } from '@kbn/scout';

 const PAGE_URL = 'security/alerts';
-const EXPAND_EVENT = 'expand-event';

 export class AlertsTablePage {
-  public expandAlertBtn: Locator;
+  public alertRow: Locator;
+  public alertsTable: Locator;

  constructor(private readonly page: ScoutPage) {
-    this.expandAlertBtn = this.page.testSubj.locator(EXPAND_EVENT);
+    this.alertRow = this.page.locator('div.euiDataGridRow');
+    this.alertsTable = this.page.testSubj.locator('alertsTable');
  }

  async navigate() {
-    await this.page.gotoApp(PAGE_URL);
+    return this.page.gotoApp(PAGE_URL);
  }

-  async expandFirstAlertDetailsFlyout() {
-    const maxAttempts = 100;
-    let attempts = 0;
+  async expandAlertDetailsFlyout(ruleName: string) {
+    await this.page.waitForLoadingIndicatorHidden();
+    await this.alertsTable.waitFor({ state: 'visible' });
+    // Filter alert by unique rule name
+    const row = this.alertRow.filter({ hasText: ruleName });
+    await expect(
+      row,
+      `Alert with rule '${ruleName}' is not displayed in the alerts table`
+    ).toBeVisible();

-    while ((await this.expandAlertBtn.count()) === 0) {
-      if (attempts >= maxAttempts) {
-        throw new Error('Timed out waiting for alert buttons to appear');
-      }
-      await this.page.waitForTimeout(100);
-      attempts++;
-    }
-    const buttons = await this.expandAlertBtn.all();
-
-    if (buttons.length > 0) {
-      await buttons[0].click();
-    } else {
-      throw new Error('No expand alert details buttons found');
-    }
-  }
-
-  async getCurrentUrl() {
-    const url = this.page.url();
-    return url;
-  }
-
-  async reload() {
-    return this.page.reload();
+    return row.locator(`[data-test-subj='expand-event']`).click();
  }
 }
--- a/x-pack/solutions/security/plugins/security_solution/ui_tests/parallel_tests/flyout/alert_details_url_sync.spec.ts
+++ b/x-pack/solutions/security/plugins/security_solution/ui_tests/parallel_tests/flyout/alert_details_url_sync.spec.ts
@ -11,34 +11,40 @@ import { CUSTOM_QUERY_RULE } from '@kbn/scout-security/src/playwright/constants/
 const RIGHT = 'right';

 spaceTest.describe('Expandable flyout state sync', { tag: ['@ess', '@svlSecurity '] }, () => {
-  spaceTest.beforeEach(async ({ browserAuth, apiServices }) => {
-    await apiServices.detectionRule.deleteAll();
-    await apiServices.detectionRule.createCustomQueryRule(CUSTOM_QUERY_RULE);
+  let ruleName: string;
+  spaceTest.beforeEach(async ({ browserAuth, apiServices, scoutSpace }) => {
+    ruleName = `${CUSTOM_QUERY_RULE.name}_${scoutSpace.id}_${Date.now()}`;
+    await apiServices.detectionRule.createCustomQueryRule({ ...CUSTOM_QUERY_RULE, name: ruleName });
    await browserAuth.loginAsPlatformEngineer();
  });

-  spaceTest('should test flyout url sync', async ({ pageObjects }) => {
+  spaceTest.afterEach(async ({ apiServices }) => {
+    await apiServices.detectionRule.deleteAll();
+  });
+
+  spaceTest('should test flyout url sync', async ({ pageObjects, page }) => {
    await pageObjects.alertsTablePage.navigate();

-    const urlBeforeAlertDetails = await pageObjects.alertsTablePage.getCurrentUrl();
+    const urlBeforeAlertDetails = page.url();
    expect(urlBeforeAlertDetails).not.toContain(RIGHT);

-    await pageObjects.alertsTablePage.expandFirstAlertDetailsFlyout();
+    await pageObjects.alertsTablePage.expandAlertDetailsFlyout(ruleName);

-    const urlAfterAlertDetails = await pageObjects.alertsTablePage.getCurrentUrl();
+    const urlAfterAlertDetails = page.url();
    expect(urlAfterAlertDetails).toContain(RIGHT);

    const headerTitle = pageObjects.alertDetailsRightPanelPage.detailsFlyoutHeaderTitle;
-    await expect(headerTitle).toHaveText(CUSTOM_QUERY_RULE.name);
+    await expect(headerTitle).toHaveText(ruleName);

-    await pageObjects.alertsTablePage.reload();
+    await page.reload();
+    await page.waitForLoadingIndicatorHidden();

-    const urlAfterReload = await pageObjects.alertsTablePage.getCurrentUrl();
+    const urlAfterReload = page.url();
    expect(urlAfterReload).toContain(RIGHT);

    await pageObjects.alertDetailsRightPanelPage.closeFlyout();

-    const urlAfterClosingFlyout = await pageObjects.alertsTablePage.getCurrentUrl();
+    const urlAfterClosingFlyout = page.url();
    expect(urlAfterClosingFlyout).not.toContain(RIGHT);
  });
 });