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

Author: diegocurbelo

package-lock.json

@@ -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.

tests/e2e/bin/setup.sh

@@ -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'

tests/e2e/tests/_legacy-experience/checkout/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'

tests/e2e/tests/checkout/blocks/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'