E2E: Fixed addSavedCard and Rate Limit adding card too soon with 3DS cards (#11024)

Author: htdat

changelog/fix-flaky-e2e-addSavedCard

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix flaky E2E test in addSavedCard function

tests/e2e/specs/wcpay/shopper/shopper-myaccount-saved-cards.spec.ts

@@ -171,9 +171,6 @@ test.describe( 'Shopper can save and delete cards', () => {
 							await confirmCardAuthentication( shopperPage );
 						}
 
-						// Take note of the time when we added this card
-						cardTimingHelper.markCardAdded();
-
 						// waiting for the new page to be loaded, since there is a redirect happening after the submission..
 						await shopperPage.waitForLoadState( 'networkidle' );
 
@@ -183,6 +180,9 @@ test.describe( 'Shopper can save and delete cards', () => {
 							)
 						).toBeVisible();
 
+						// Take note of the time when we added this card
+						cardTimingHelper.markCardAdded();
+
 						// Verify that the card was added
 						await expect(
 							shopperPage.getByText(

tests/e2e/utils/shopper.ts

@@ -587,7 +587,13 @@ export const addSavedCard = async (
 	zipCode?: string
 ) => {
 	await page.getByRole( 'link', { name: 'Add payment method' } ).click();
-	await page.waitForLoadState( 'networkidle' );
+
+	// Wait for the page to be stable
+	// Use a more reliable approach than networkidle which can timeout
+	await page.waitForLoadState( 'domcontentloaded' );
+	// Ensure UI is not blocked
+	await isUIUnblocked( page );
+
 	await page.getByText( 'Card', { exact: true } ).click();
 	const frameHandle = page.getByTitle( 'Secure payment input frame' );
 	const stripeFrame = frameHandle.contentFrame();