Try: Fix flaky router styles e2e tests (#72329)

Mamaduka · DAreRodz · luisherranz · web-flow · commit 6a200d5a8133 · 2025-10-16T17:46:41.000+02:00
* Try: Fix flaky router styles e2e tests

* Add a hydration check before each test

---------

Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: DAreRodz &lt;darerodz@git.wordpress.org&gt;
Co-authored-by: luisherranz &lt;luisherranz@git.wordpress.org&gt;
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -84,6 +84,16 @@ function () {
 		<?php echo $content; ?>
 	</div>
 
+	<!-- Flag to check whether hydration has occurred. -->
+	<div
+		data-testid="hydrated"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="state.undefined"
+		hidden
+	>
+		Hydrated
+	</div>
+
 	<!-- Text to check whether a navigation was client-side. -->
 	<div
 		data-testid="client-side navigation"
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -53,6 +53,7 @@ test.describe( 'Router styles', () => {
 
 	test.beforeEach( async ( { page, interactivityUtils: utils } ) => {
 		await page.goto( utils.getLink( 'none' ) );
+		await expect( page.getByTestId( 'hydrated' ) ).toBeVisible();
 	} );
 
 	test.afterAll( async ( { interactivityUtils: utils } ) => {
@@ -305,7 +306,7 @@ test.describe( 'Router styles', () => {
 		const linkPattern = '**/router-styles-red/style-from-link.css*';
 		await page.route( linkPattern, async ( route ) => {
 			await route.abort( 'failed' );
-			await page.unroute( linkPattern );
+			await page.unrouteAll( { behavior: 'ignoreErrors' } );
 		} );
 
 		// Navigate to the page with the Red block
