E2E Test Utils: Improve test reliability in plugins/themes and login …

…procedures (#52144)

* Create logical promise ordering for navigation watchers.

By Creating the promise for navigations before attempting the navigation, we ensure that there's no risk of race conditions where one promise triggers before the other, leaving the navigation watcher in limbo.

* Add heightened timeout values when waiting for plugins or themes to be installed.

Plugin and theme installations are dependent on external factors, such as WordPress.org availability, disk read/writes, and such. Some inconsistent test runs were traced back to prolonged time needed to install either, causing false positive test failures.

* Update packages/e2e-test-utils/src/install-plugin.js

* Update packages/e2e-test-utils/src/install-theme.js

* Allow linting to pass

---------

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
Co-authored-by: Sergey Biryukov <sergeybiryukov.ru@gmail.com>

packages/e2e-test-utils/src/install-plugin.js

@@ -20,6 +20,8 @@ export async function installPlugin( slug, searchTerm ) {
 			'&tab=search&type=term'
 	);
 	await page.click( `.install-now[data-slug="${ slug }"]` );
-	await page.waitForSelector( `.activate-now[data-slug="${ slug }"]` );
+	await page.waitForSelector( `.activate-now[data-slug="${ slug }"]`, {
+		timeout: 60000,
+	} );
 	await switchUserToTest();
 }

packages/e2e-test-utils/src/install-theme.js

@@ -37,6 +37,8 @@ export async function installTheme( slug, { searchTerm } = {} ) {
 
 	await page.waitForSelector( `.theme-install[data-slug="${ slug }"]` );
 	await page.click( `.theme-install[data-slug="${ slug }"]` );
-	await page.waitForSelector( `.theme[data-slug="${ slug }"] .activate` );
+	await page.waitForSelector( `.theme[data-slug="${ slug }"] .activate`, {
+		timeout: 60000,
+	} );
 	await switchUserToTest();
 }

packages/e2e-test-utils/src/login-user.js

@@ -17,7 +17,9 @@ export async function loginUser(
 	password = WP_PASSWORD
 ) {
 	if ( ! isCurrentURL( 'wp-login.php' ) ) {
+		const waitForLoginPageNavigation = page.waitForNavigation();
 		await page.goto( createURL( 'wp-login.php' ) );
+		await waitForLoginPageNavigation;
 	}
 
 	await page.focus( '#user_login' );
@@ -27,8 +29,6 @@ export async function loginUser(
 	await pressKeyWithModifier( 'primary', 'a' );
 	await page.type( '#user_pass', password );
 
-	await Promise.all( [
-		page.waitForNavigation(),
-		page.click( '#wp-submit' ),
-	] );
+	const waitForLoginNavigation = page.waitForNavigation();
+	await Promise.all( [ waitForLoginNavigation, page.click( '#wp-submit' ) ] );
 }