Skip to content

[kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status #217230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

dmlemeshko
Copy link
Member

@dmlemeshko dmlemeshko commented Apr 4, 2025

Summary

Follow-up to #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

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).
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
image

@dmlemeshko dmlemeshko changed the title [@kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status [kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid based on loading status Apr 4, 2025
@dmlemeshko dmlemeshko marked this pull request as ready for review April 7, 2025 16:00
@dmlemeshko dmlemeshko requested review from a team as code owners April 7, 2025 16:00
@dmlemeshko dmlemeshko self-assigned this Apr 7, 2025
@dmlemeshko dmlemeshko added release_note:skip Skip the PR/issue when compiling release notes backport:version Backport to applied version labels labels Apr 7, 2025
@jbudz jbudz removed the request for review from a team April 7, 2025 17:12
@fkanout fkanout self-requested a review April 8, 2025 09:39
Copy link
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice improvement, thank you for doing this!!
LGTM for the @elastic/security-threat-hunting-investigations team

Copy link
Contributor

@szwarckonrad szwarckonrad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Defend Workflows changes LGTM!

Copy link
Contributor

@maxcold maxcold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cloud_security_posture changes LGTM

Copy link
Contributor

@tomsonpl tomsonpl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome! Thanks!

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

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.6KB 796.7KB +33.0B
ml 5.3MB 5.3MB +33.0B
observability 1.3MB 1.3MB +33.0B
securitySolution 9.0MB 9.0MB +33.0B
triggersActionsUi 1.4MB 1.4MB +33.0B
total +198.0B

History

cc @dmlemeshko

@dmlemeshko dmlemeshko merged commit edf8d6d into elastic:main Apr 15, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/14467872286

@kibanamachine
Copy link
Contributor

💔 All backports failed

Status Branch Result
8.x Backport failed because of merge conflicts
9.0 Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 217230

Questions ?

Please refer to the Backport tool documentation

dmlemeshko added a commit to dmlemeshko/kibana that referenced this pull request Apr 15, 2025
…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
Copy link
Member Author

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

@dmlemeshko dmlemeshko removed the v9.0.1 label Apr 15, 2025
dmlemeshko added a commit that referenced this pull request Apr 15, 2025
…rid based on loading status (#217230) (#218243)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn/response-ops-alerts-table] set data-test-subj for EuiDataGrid
based on loading status
(#217230)](#217230)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Dzmitry
Lemechko","email":"dzmitry.lemechko@elastic.co"},"sourceCommit":{"committedDate":"2025-04-15T11:05:49Z","message":"[kbn/response-ops-alerts-table]
set data-test-subj for EuiDataGrid based on loading status
(#217230)\n\n## Summary\n\nFollow-up to #217153\n\n### Problem
Description\nIn UI tests, there was no reliable way to determine when
the Alerts\ntable content had fully loaded before interacting with it.
This could\nlead to flaky tests where interactions occurred before the
data was\navailable (rows are not present yet), causing failures or
inconsistent\nresults (checking for row with specific content to
exist)\n\n\n![image](https://github.com/user-attachments/assets/6580f134-0bf2-48b8-8cc9-b6d476f4e932)\n\nQuite
often we see tests waiting for global indicator (spinner in the\ntop
left corner) to be hidden as a condition for page loading is\ncomplete.
This is quite unreliable approach and testing tools have no\nconsistent
built-in solution: FTR, Cypress or even Playwright - network\nidle wait
is officially marked
as\n[discouraged](https://playwright.dev/docs/api/class-page)).\nWe need
to help testing tool to interact with UI components in ready\nstate
only.\n\n\n### Solution\nTo address this issue, I modified a
`data-test-subj` property in the\n`<EuiDataGrid>` component. The
property dynamically switches between\n`alertsTableIsLoading` when data
is still loading and\n`alertsTableIsLoaded `once the content is
available. This allows UI\ntests to wait for precisely
`alertsTableIsLoaded` to be in in the DOM\nbefore interacting with the
table, ensuring more reliable and stable\ntest execution.\n\n\nPassed
10/10\n<img width=\"538\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/e44bae5f-4094-4ed2-89f3-74a52cb2be53\"\n/>","sha":"edf8d6d975f7ae2bd4df8a469bc391ca602ddc1e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","v9.1.0","v8.19.0","v9.0.1"],"title":"[kbn/response-ops-alerts-table]
set data-test-subj for EuiDataGrid based on loading
status","number":217230,"url":"https://github.com/elastic/kibana/pull/217230","mergeCommit":{"message":"[kbn/response-ops-alerts-table]
set data-test-subj for EuiDataGrid based on loading status
(#217230)\n\n## Summary\n\nFollow-up to #217153\n\n### Problem
Description\nIn UI tests, there was no reliable way to determine when
the Alerts\ntable content had fully loaded before interacting with it.
This could\nlead to flaky tests where interactions occurred before the
data was\navailable (rows are not present yet), causing failures or
inconsistent\nresults (checking for row with specific content to
exist)\n\n\n![image](https://github.com/user-attachments/assets/6580f134-0bf2-48b8-8cc9-b6d476f4e932)\n\nQuite
often we see tests waiting for global indicator (spinner in the\ntop
left corner) to be hidden as a condition for page loading is\ncomplete.
This is quite unreliable approach and testing tools have no\nconsistent
built-in solution: FTR, Cypress or even Playwright - network\nidle wait
is officially marked
as\n[discouraged](https://playwright.dev/docs/api/class-page)).\nWe need
to help testing tool to interact with UI components in ready\nstate
only.\n\n\n### Solution\nTo address this issue, I modified a
`data-test-subj` property in the\n`<EuiDataGrid>` component. The
property dynamically switches between\n`alertsTableIsLoading` when data
is still loading and\n`alertsTableIsLoaded `once the content is
available. This allows UI\ntests to wait for precisely
`alertsTableIsLoaded` to be in in the DOM\nbefore interacting with the
table, ensuring more reliable and stable\ntest execution.\n\n\nPassed
10/10\n<img width=\"538\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/e44bae5f-4094-4ed2-89f3-74a52cb2be53\"\n/>","sha":"edf8d6d975f7ae2bd4df8a469bc391ca602ddc1e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","9.0"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217230","number":217230,"mergeCommit":{"message":"[kbn/response-ops-alerts-table]
set data-test-subj for EuiDataGrid based on loading status
(#217230)\n\n## Summary\n\nFollow-up to #217153\n\n### Problem
Description\nIn UI tests, there was no reliable way to determine when
the Alerts\ntable content had fully loaded before interacting with it.
This could\nlead to flaky tests where interactions occurred before the
data was\navailable (rows are not present yet), causing failures or
inconsistent\nresults (checking for row with specific content to
exist)\n\n\n![image](https://github.com/user-attachments/assets/6580f134-0bf2-48b8-8cc9-b6d476f4e932)\n\nQuite
often we see tests waiting for global indicator (spinner in the\ntop
left corner) to be hidden as a condition for page loading is\ncomplete.
This is quite unreliable approach and testing tools have no\nconsistent
built-in solution: FTR, Cypress or even Playwright - network\nidle wait
is officially marked
as\n[discouraged](https://playwright.dev/docs/api/class-page)).\nWe need
to help testing tool to interact with UI components in ready\nstate
only.\n\n\n### Solution\nTo address this issue, I modified a
`data-test-subj` property in the\n`<EuiDataGrid>` component. The
property dynamically switches between\n`alertsTableIsLoading` when data
is still loading and\n`alertsTableIsLoaded `once the content is
available. This allows UI\ntests to wait for precisely
`alertsTableIsLoaded` to be in in the DOM\nbefore interacting with the
table, ensuring more reliable and stable\ntest execution.\n\n\nPassed
10/10\n<img width=\"538\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/e44bae5f-4094-4ed2-89f3-74a52cb2be53\"\n/>","sha":"edf8d6d975f7ae2bd4df8a469bc391ca602ddc1e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:version Backport to applied version labels release_note:skip Skip the PR/issue when compiling release notes v8.19.0 v9.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants