fix(e2e): stabilize flaky lib initialization check #3388
Conversation
Previously, the test checked for a style attribute to determine if the BPMN container was initialized. This approach was unreliable, especially on macOS with Firefox in CI environments, because the attribute could exist before its value was updated by the library, causing the test to miss the actual initialization and fail intermittently. This commit replaces the attribute check with a more robust method: it now waits for the presence of SVG elements (specifically, the expected group nodes) in the DOM, which reliably indicates that the library has completed initialization and rendering. This change improves test stability and reduces flakiness in CI environments.
tbouffard
added
the
chore
|
tbouffard
changed the title
There was a problem hiding this comment.
Pull Request Overview
This change improves the reliability of BPMN library initialization detection in end-to-end tests by replacing an unreliable style attribute check with a more robust DOM structure verification.
- Replaces checking for a style attribute with waiting for specific SVG group elements
- Updates log messages to better reflect the initialization verification process
- Adds explanatory comments about the SVG DOM structure being checked
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| async expectAvailableBpmnContainer(options?: PageWaitForSelectorOptions): Promise<void> { | ||
| pageCheckLog('Expecting the BPMN container available (confirm bpmn-visualization initialization)'); | ||
| pageCheckLog('Waiting for the BPMN container to be initialized (verifying bpmn-visualization setup)'); | ||
| // Check that mxGraph updated the DOM with the SVG element. This is done during the bpmn-visualization initialization. |
There was a problem hiding this comment.
The comment mentions 'mxGraph' but this may be outdated or incorrect. Consider verifying if this is the correct library name or updating the comment to reflect the actual library being used for BPMN visualization.
| // Check that mxGraph updated the DOM with the SVG element. This is done during the bpmn-visualization initialization. | |
| // Check that bpmn-visualization updated the DOM with the SVG element. This is done during the bpmn-visualization initialization. |
There was a problem hiding this comment.
mxGraph is correct. It is in charge of generating the SVG nodes.
Previously, the test checked for a style attribute to determine if the BPMN container was initialized.
This approach was unreliable, especially on macOS with Firefox in CI environments, because the attribute could exist before its value was updated by the library, causing the test to miss the actual initialization and fail intermittently.
This change replaces the attribute check with a more robust method: it now waits for the presence of SVG elements (specifically, the expected group nodes) in the DOM, which reliably indicates that the library has completed initialization and rendering.
This change improves test stability and reduces flakiness in CI environments.
Notes
The e2e tests with firefox on macos seem stabilized. I ran them 8 times in a row and they all succeeded. See https://github.com/process-analytics/bpmn-visualization-js/actions/runs/18231009284/job/51948148044?pr=3388
Here are the top five longest lib initialization that occured during the 7th run of the e2e tests. We see that some are quite long, which can explain why the tests previously failed. The lib initialization is sometime slow, so the style attribute of the bpmn container is not updated right away. This confirms that the former check failed in that case.
01_initialization.txt
02_initialization_with_duration.txt