E2E tests: fix some failing tests (#13500)

* minor clean-up

* make sure Ads block is visible in inserter

* wait for selector before scrolling

* fix selector reference

* Reset page before selecting the mc list

* fix typo

* log js and php errors

* add some debugging logs

* create debug.log

* a bit more debug logging

* more debugging for wp setup

* fix typo

* Update puppeteer & fix minor stuff

* make sure Ads block is visible in inserter

* Reset page before selecting the mc list

* add some debugging logs

* create debug.log

* more debugging for wp setup

* revert some unneeded changes

* remove debug logging

tests/e2e/bin/setup-e2e-travis.sh

@@ -146,6 +146,9 @@ PHP
 	wp db create
 
 	wp core install --url="$WP_SITE_URL" --title="E2E Gutenpack blocks" --admin_user=wordpress --admin_password=wordpress [email protected] --path=$WP_CORE_DIR
+
+	# create a debug.log file
+	touch $WP_CORE_DIR/wp-content/debug.log
 }
 
 prepare_jetpack() {
@@ -165,6 +168,9 @@ if [ "${1}" == "reset_wp" ]; then
 	wp --path=$WP_CORE_DIR db reset --yes
 	wp --path=$WP_CORE_DIR core install --url="$WP_SITE_URL" --title="E2E Gutenpack blocks" --admin_user=wordpress --admin_password=wordpress [email protected]
 	wp --path=$WP_CORE_DIR plugin activate jetpack
+
+	# create a debug.log file
+	touch $WP_CORE_DIR/wp-content/debug.log
 else
 	install_ngrok
 	start_ngrok

tests/e2e/lib/blocks/word-ads.js

@@ -23,7 +23,7 @@ export default class WordAdsBlock {
 		await clickBlockToolbarButton( 'Pick an ad format' );
 
 		const formatButtonsSelector = '.wp-block-jetpack-wordads__format-picker button';
-		waitForSelector( this.page, formatButtonsSelector );
+		await waitForSelector( this.page, formatButtonsSelector );
 		const allButtons = await this.page.$$( formatButtonsSelector );
 		await allButtons[ buttonNumber ].click();
 	}

tests/e2e/lib/jest.test.failure.js

@@ -7,7 +7,7 @@ import { wrap } from 'lodash';
  */
 import { sendFailedTestScreenshotToSlack, sendFailedTestMessageToSlack } from './reporters/slack';
 import { takeScreenshot } from './reporters/screenshot';
-
+import { readFileSync } from 'fs';
 /**
  * Override the test case method so we can take screenshots of assertion failures.
  *
@@ -36,6 +36,9 @@ global.it = async ( name, func ) => {
 				const filePath = await takeScreenshot( currentBlock, name );
 				await sendFailedTestMessageToSlack( { block: currentBlock, name, error } );
 				await sendFailedTestScreenshotToSlack( filePath );
+				const fileContents = readFileSync( '/home/travis/wordpress/wp-content/debug.log' );
+				console.log( '##### WP DEBUG.LOG' );
+				console.log( fileContents.toString() );
 			}
 
 			if ( E2E_DEBUG ) {

tests/e2e/lib/page-helper.js

@@ -158,3 +158,14 @@ export async function clickAndWaitForNewPage( page, selector, timeout = 25000 )
 	const target = await Promise.race( [ newTabTarget, timeoutPromise ] );
 	return await target.page();
 }
+
+/**
+ * Scroll the element into view
+ *
+ * @param {Puppeteer.Page} page Puppeteer representation of the page.
+ * @param {string} selector CSS selector of the element
+ */
+export async function scrollIntoView( page, selector ) {
+	await waitForSelector( page, selector );
+	return await page.evaluate( s => document.querySelector( s ).scrollIntoView(), selector );
+}

tests/e2e/lib/pages/wp-admin/block-editor.js

@@ -6,7 +6,7 @@ import Page from '../page';
  * WordPress dependencies
  */
 import { getAllBlocks, searchForBlock } from '@wordpress/e2e-test-utils';
-import { waitAndClick, waitForSelector } from '../../page-helper';
+import { waitAndClick, waitForSelector, scrollIntoView } from '../../page-helper';
 
 export default class BlockEditorPage extends Page {
 	constructor( page ) {
@@ -16,8 +16,10 @@ export default class BlockEditorPage extends Page {
 
 	async insertBlock( blockName ) {
 		await searchForBlock( blockName );
-		const insertButton = `.editor-inserter__menu button[aria-label*='${ blockName }']`;
-		await waitAndClick( this.page, insertButton );
+		const blockIconSelector = `.editor-inserter__menu button[aria-label*='${ blockName }']`;
+		const jetpackPanelSelector = '.components-panel__body .jetpack-logo';
+		await scrollIntoView( this.page, jetpackPanelSelector );
+		await waitAndClick( this.page, blockIconSelector );
 		const blockInfo = await this.getInsertedBlock();
 		return blockInfo;
 	}

tests/e2e/lib/pages/wp-admin/dashboard.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import Page from '../page';
-import { isEventuallyVisible } from '../../page-helper';
+import { isEventuallyVisible, waitAndClick } from '../../page-helper';
 
 export default class DashboardPage extends Page {
 	constructor( page ) {
@@ -12,6 +12,11 @@ export default class DashboardPage extends Page {
 
 	async isConnectBannerVisible() {
 		const selector = ".jp-wpcom-connect__container a[href*='register']";
-		return isEventuallyVisible( this.page, selector );
+		return await isEventuallyVisible( this.page, selector );
+	}
+
+	async connect() {
+		const selector = ".jp-wpcom-connect__container a[href*='register']";
+		return await waitAndClick( this.page, selector );
 	}
 }

tests/e2e/lib/pages/wp-admin/jetpack.js

@@ -12,12 +12,12 @@ export default class JetpackPage extends Page {
 
 	async connect() {
 		const connectButtonSelector = '.jp-connect-full__button-container .dops-button';
-		await waitAndClick( this.page, connectButtonSelector );
+		return await waitAndClick( this.page, connectButtonSelector );
 	}
 
 	async openMyPlan() {
 		const myPlanButton = "a[href*='my-plan'] span";
-		await waitAndClick( this.page, myPlanButton );
+		return await waitAndClick( this.page, myPlanButton );
 	}
 
 	async isPremium() {

tests/e2e/lib/pages/wpcom/login.js

@@ -42,6 +42,6 @@ export default class LoginPage extends Page {
 
 	async isLoggedIn() {
 		const publishSelector = '#header .masterbar__publish';
-		return isEventuallyVisible( this.page, publishSelector, 4000 );
+		return await isEventuallyVisible( this.page, publishSelector, 4000 );
 	}
 }

tests/e2e/lib/pages/wpcom/pick-a-plan.js

@@ -23,7 +23,7 @@ export default class PickAPlanPage extends Page {
 
 	async selectFreeJetpackPlan() {
 		const freePlanButton = '.plans-skip-button button';
-		return waitAndClick( this.page, freePlanButton );
+		return await waitAndClick( this.page, freePlanButton );
 	}
 
 	async selectPremiumPlan() {

tests/e2e/lib/setup-env.js

@@ -19,6 +19,17 @@ async function setupBrowser() {
 	await setBrowserViewport( 'large' );
 }
 
+function setupConsoleLogs() {
+	page.on( 'pageerror', function( err ) {
+		const theTempValue = err.toString();
+		console.log( 'Page error: ' + theTempValue );
+	} );
+	page.on( 'error', function( err ) {
+		const theTempValue = err.toString();
+		console.log( 'Error: ' + theTempValue );
+	} );
+}
+
 // Before every test suite run, delete all content created by the test. This ensures
 // other posts/comments/etc. aren't dirtying tests and tests don't depend on
 // each other's side-effects.
@@ -27,6 +38,7 @@ beforeAll( async () => {
 
 	// Handles not saved changed dialog in block editor
 	await enablePageDialogAccept();
+	setupConsoleLogs();
 } );
 
 afterEach( async () => {

tests/e2e/specs/mailchimp.test.js

@@ -19,8 +19,7 @@ async function activatePublicizeModule() {
 		cmd = 'wp jetpack module activate publicize --path="/home/travis/wordpress"';
 	}
 
-	const out = await execShellCommand( cmd );
-	console.log( out );
+	await execShellCommand( cmd );
 }
 
 describe( 'Mailchimp Block', () => {

tests/e2e/specs/word-ads.test.js

@@ -19,8 +19,7 @@ async function activateWordAdsModule() {
 		cmd = 'wp jetpack module activate wordads --path="/home/travis/wordpress"';
 	}
 
-	const out = await execShellCommand( cmd );
-	console.log( out );
+	await execShellCommand( cmd );
 }
 
 describe( 'WordAds block', () => {