Skip to content

[8.x] [kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status (#217230)#218243

Merged
dmlemeshko merged 1 commit intoelastic:8.xfrom
dmlemeshko:backport/8.x/pr-217230
Apr 15, 2025
Merged

[8.x] [kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status (#217230)#218243
dmlemeshko merged 1 commit intoelastic:8.xfrom
dmlemeshko:backport/8.x/pr-217230

Conversation

@dmlemeshko
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

…sed on loading status (elastic#217230)

## Summary

Follow-up to elastic#217153

### Problem Description
In UI tests, there was no reliable way to determine when the Alerts
table content had fully loaded before interacting with it. This could
lead to flaky tests where interactions occurred before the data was
available (rows are not present yet), causing failures or inconsistent
results (checking for row with specific content to exist)

![image](https://github.com/user-attachments/assets/6580f134-0bf2-48b8-8cc9-b6d476f4e932)

Quite often we see tests waiting for global indicator (spinner in the
top left corner) to be hidden as a condition for page loading is
complete. This is quite unreliable approach and testing tools have no
consistent built-in solution: FTR, Cypress or even Playwright - network
idle wait is officially marked as
[discouraged](https://playwright.dev/docs/api/class-page)).
We need to help testing tool to interact with UI components in ready
state only.

### Solution
To address this issue, I modified a `data-test-subj` property in the
`<EuiDataGrid>` component. The property dynamically switches between
`alertsTableIsLoading` when data is still loading and
`alertsTableIsLoaded `once the content is available. This allows UI
tests to wait for precisely `alertsTableIsLoaded` to be in in the DOM
before interacting with the table, ensuring more reliable and stable
test execution.

Passed 10/10
<img width="538" alt="image"
src="https://github.com/user-attachments/assets/e44bae5f-4094-4ed2-89f3-74a52cb2be53"
/>

(cherry picked from commit edf8d6d)

# Conflicts:
#	x-pack/test/functional/services/observability/alerts/common.ts
@dmlemeshko dmlemeshko merged commit 2e306a2 into elastic:8.x Apr 15, 2025
11 checks passed
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
cases 1.3MB 1.3MB +33.0B
embeddableAlertsTable 796.4KB 796.4KB +33.0B
ml 5.4MB 5.4MB +33.0B
observability 1.3MB 1.3MB +33.0B
securitySolution 9.1MB 9.1MB +33.0B
triggersActionsUi 1.4MB 1.4MB +33.0B
total +198.0B

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants