Fix E2E setup error (#3336)

* Enable E2E setup DEBUG flag * Replace docker-compose with docker compose * Disable the E2E setup DEBUG flag * Add 2sec wait to SCA test as a temp measure to reduce flakiness
woocommerce · Aug 2, 2024 · 771a8e9 · 771a8e9
1 parent 5ca67d4
commit 771a8e9
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/tests/e2e/bin/setup.sh b/tests/e2e/bin/setup.sh
@@ -34,7 +34,7 @@ if ! docker info > /dev/null 2>&1; then
 fi
 
 step "Starting E2E docker containers"
-CWD="$CWD" E2E_ROOT="$E2E_ROOT" redirect_output docker-compose -p wcstripe-e2e -f "$E2E_ROOT"/env/docker-compose.yml up --build --force-recreate -d wordpress
+CWD="$CWD" E2E_ROOT="$E2E_ROOT" redirect_output docker compose -p wcstripe-e2e -f "$E2E_ROOT"/env/docker-compose.yml up --build --force-recreate -d wordpress
 
 step "Configuring Wordpress"
 # Wait for containers to be started up before setup.

diff --git a/tests/e2e/tests/_legacy-experience/checkout/sca-card.spec.js b/tests/e2e/tests/_legacy-experience/checkout/sca-card.spec.js
@@ -30,6 +30,8 @@ test( 'customer can checkout with a SCA card @smoke', async ( { page } ) => {
 	) {
 		await page.waitForTimeout( 1000 );
 	}
+	// Not ideal, but the iframe body gets repalced after load, so a waitFor does not work here.
+	await page.waitForTimeout( 2000 );
 
 	await page
 		.frame( {
@@ -38,7 +40,7 @@ test( 'customer can checkout with a SCA card @smoke', async ( { page } ) => {
 		.getByRole( 'button', { name: 'Complete' } )
 		.click();
 
-	await page.waitForNavigation();
+	await page.waitForURL( '**/checkout/order-received/**' );
 
 	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
 		'Order received'

diff --git a/tests/e2e/tests/checkout/blocks/sca-card.spec.js b/tests/e2e/tests/checkout/blocks/sca-card.spec.js
@@ -29,6 +29,8 @@ test( 'customer can checkout with a SCA card @smoke @blocks', async ( {
 	) {
 		await page.waitForTimeout( 1000 );
 	}
+	// Not ideal, but the iframe body gets repalced after load, so a waitFor does not work here.
+	await page.waitForTimeout( 2000 );
 
 	await page
 		.frame( {
@@ -37,7 +39,7 @@ test( 'customer can checkout with a SCA card @smoke @blocks', async ( {
 		.getByRole( 'button', { name: 'Complete' } )
 		.click();
 
-	await page.waitForNavigation();
+	await page.waitForURL( '**/checkout/order-received/**' );
 
 	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
 		'Order received'

diff --git a/tests/e2e/tests/checkout/shortcode/sca-card.spec.js b/tests/e2e/tests/checkout/shortcode/sca-card.spec.js
@@ -27,6 +27,8 @@ test( 'customer can checkout with a SCA card @smoke', async ( { page } ) => {
 	) {
 		await page.waitForTimeout( 1000 );
 	}
+	// Not ideal, but the iframe body gets repalced after load, so a waitFor does not work here.
+	await page.waitForTimeout( 2000 );
 
 	await page
 		.frame( {
@@ -35,7 +37,7 @@ test( 'customer can checkout with a SCA card @smoke', async ( { page } ) => {
 		.getByRole( 'button', { name: 'Complete' } )
 		.click();
 
-	await page.waitForNavigation();
+	await page.waitForURL( '**/checkout/order-received/**' );
 
 	await expect( page.locator( 'h1.entry-title' ) ).toHaveText(
 		'Order received'