Ignore common dynamic elements and blur pixels

tests/e2e/config/bootstrap.js

@@ -33,11 +33,12 @@ const OBSERVED_CONSOLE_MESSAGE_TYPES = {
 const pageEvents = [];
 
 // The Jest timeout is increased because these tests are a bit slow
-jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
+jest.setTimeout(PUPPETEER_TIMEOUT || 100000);
 
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
 	dumpDiffToConsole: true,
-  });
+	blur: 1,
+});
 
 // Extend Jest's "expect" with image snapshot functionality.
 expect.extend({ toMatchImageSnapshot });
@@ -47,36 +48,36 @@ expect.extend({ toMatchImageSnapshot });
  * handlers, to assure that they are removed at test teardown.
  */
 function capturePageEventsForTearDown() {
-	page.on( 'newListener', ( eventName, listener ) => {
-		pageEvents.push( [ eventName, listener ] );
-	} );
+	page.on('newListener', (eventName, listener) => {
+		pageEvents.push([eventName, listener]);
+	});
 }
 
 /**
  * Removes all bound page event handlers.
  */
 function removePageEvents() {
-	pageEvents.forEach( ( [ eventName, handler ] ) => {
-		page.removeListener( eventName, handler );
-	} );
+	pageEvents.forEach(([eventName, handler]) => {
+		page.removeListener(eventName, handler);
+	});
 }
 
 /**
  * Adds a page event handler to emit uncaught exception to process if one of
  * the observed console logging types is encountered.
  */
 function observeConsoleLogging() {
-	page.on( 'console', ( message ) => {
+	page.on('console', (message) => {
 		const type = message.type();
-		if ( ! OBSERVED_CONSOLE_MESSAGE_TYPES.hasOwnProperty( type ) ) {
+		if (!OBSERVED_CONSOLE_MESSAGE_TYPES.hasOwnProperty(type)) {
 			return;
 		}
 
 		let text = message.text();
 
 		// An exception is made for _blanket_ deprecation warnings: Those
 		// which log regardless of whether a deprecated feature is in use.
-		if ( text.includes( 'This is a global warning' ) ) {
+		if (text.includes('This is a global warning')) {
 			return;
 		}
 
@@ -88,7 +89,7 @@ function observeConsoleLogging() {
 
 		// Viewing posts on the front end can result in this error, which
 		// has nothing to do with Gutenberg.
-		if ( text.includes( 'net::ERR_UNKNOWN_URL_SCHEME' ) ) {
+		if (text.includes('net::ERR_UNKNOWN_URL_SCHEME')) {
 			return;
 		}
 
@@ -99,13 +100,13 @@ function observeConsoleLogging() {
 		//
 		// See: https://core.trac.wordpress.org/ticket/47183
 		if (
-			text.startsWith( 'Failed to decode downloaded font:' ) ||
-			text.startsWith( 'OTS parsing error:' )
+			text.startsWith('Failed to decode downloaded font:') ||
+			text.startsWith('OTS parsing error:')
 		) {
 			return;
 		}
 
-		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
+		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[type];
 
 		// As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of
 		// type JSHandle for error logging, instead of the expected string.
@@ -118,33 +119,33 @@ function observeConsoleLogging() {
 		// correctly. Instead, the logic here synchronously inspects the
 		// internal object shape of the JSHandle to find the error text. If it
 		// cannot be found, the default text value is used instead.
-		text = get( message.args(), [ 0, '_remoteObject', 'description' ], text );
+		text = get(message.args(), [0, '_remoteObject', 'description'], text);
 
 		// Disable reason: We intentionally bubble up the console message
 		// which, unless the test explicitly anticipates the logging via
 		// @wordpress/jest-console matchers, will cause the intended test
 		// failure.
 
 		// eslint-disable-next-line no-console
-		console[ logFunction ]( text );
-	} );
+		console[logFunction](text);
+	});
 }
 
 // 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.
-beforeAll( async () => {
+beforeAll(async () => {
 	capturePageEventsForTearDown();
 	enablePageDialogAccept();
 	observeConsoleLogging();
-	await setBrowserViewport( 'large' );
-} );
+	await setBrowserViewport('large');
+});
 
-afterEach( async () => {
+afterEach(async () => {
 	await clearLocalStorage();
-	await setBrowserViewport( 'large' );
-} );
+	await setBrowserViewport('large');
+});
 
-afterAll( () => {
+afterAll(() => {
 	removePageEvents();
-} );
+});

tests/e2e/specs/visual-snapshots.test.js

@@ -4,137 +4,174 @@ const screenshotOptions = {
 	fullPage: true,
 }
 
-describe( 'Admin Visual Snapshots', () => {
+async function hideDynamicElements(elements) {
+	for (let i = 0; i < elements.length; i++) {
+		await page.$eval(elements[i], el => {
+			el.style.visibility = 'hidden'
+		});
+	}
+}
+
+const commonDynamicElements = [
+	'#footer-upgrade',
+	'#wp-admin-bar-updates',
+	'#wp-admin-bar-comments',
+	'#wp-admin-bar-new-content'
+];
+
+describe('Admin Visual Snapshots', () => {
 
-	it( 'All Posts', async () => {
-		await visitAdminPage( '/edit.php' );
+	it('All Posts', async () => {
+		await visitAdminPage('/edit.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Categories', async () => {
-		await visitAdminPage( '/edit-tags.php','taxonomy=category' );
+	it('Categories', async () => {
+		await visitAdminPage('/edit-tags.php', 'taxonomy=category');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Tags', async () => {
-		await visitAdminPage( '/edit-tags.php','taxonomy=post_tag' );
+	it('Tags', async () => {
+		await visitAdminPage('/edit-tags.php', 'taxonomy=post_tag');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Media Library', async () => {
-		await visitAdminPage( '/upload.php' );
+	it('Media Library', async () => {
+		await visitAdminPage('/upload.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Add New Media', async () => {
-		await visitAdminPage( '/media-new.php' );
+	it('Add New Media', async () => {
+		await visitAdminPage('/media-new.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'All Pages', async () => {
-		await visitAdminPage( '/edit.php','post_type=page' );
+	it('All Pages', async () => {
+		await visitAdminPage('/edit.php', 'post_type=page');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Comments', async () => {
-		await visitAdminPage( '/edit-comments.php' );
+	it('Comments', async () => {
+		await visitAdminPage('/edit-comments.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Widgets', async () => {
-		await visitAdminPage( '/widgets.php' );
+	it('Widgets', async () => {
+		await visitAdminPage('/widgets.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Menus', async () => {
-		await visitAdminPage( '/nav-menus.php' );
+	it('Menus', async () => {
+		await visitAdminPage('/nav-menus.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Plugins', async () => {
-		await visitAdminPage( '/plugins.php' );
+	it('Plugins', async () => {
+		await visitAdminPage('/plugins.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'All Users', async () => {
-		await visitAdminPage( '/users.php' );
+	it('All Users', async () => {
+		await visitAdminPage('/users.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Add New User', async () => {
-		await visitAdminPage( '/user-new.php' );
+	it('Add New User', async () => {
+		await visitAdminPage('/user-new.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Your Profile', async () => {
-		await visitAdminPage( '/profile.php' );
+	it('Your Profile', async () => {
+		await visitAdminPage('/profile.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Available Tools', async () => {
-		await visitAdminPage( '/tools.php' );
+	it('Available Tools', async () => {
+		await visitAdminPage('/tools.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Import', async () => {
-		await visitAdminPage( '/import.php' );
+	it('Import', async () => {
+		await visitAdminPage('/import.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Export', async () => {
-		await visitAdminPage( '/export.php' );
+	it('Export', async () => {
+		await visitAdminPage('/export.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Export Personal Data', async () => {
-		await visitAdminPage( '/export-personal-data.php' );
+	it('Export Personal Data', async () => {
+		await visitAdminPage('/export-personal-data.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Erase Personal Data', async () => {
-		await visitAdminPage( '/erase-personal-data.php' );
+	it('Erase Personal Data', async () => {
+		await visitAdminPage('/erase-personal-data.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Reading Settings', async () => {
-		await visitAdminPage( '/options-reading.php' );
+	it('Reading Settings', async () => {
+		await visitAdminPage('/options-reading.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Discussion Settings', async () => {
-		await visitAdminPage( '/options-discussion.php' );
+	it('Discussion Settings', async () => {
+		await visitAdminPage('/options-discussion.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Media Settings', async () => {
-		await visitAdminPage( '/options-media.php' );
+	it('Media Settings', async () => {
+		await visitAdminPage('/options-media.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
+		expect(image).toMatchImageSnapshot();
+	});
 
-	it( 'Privacy Settings', async () => {
-		await visitAdminPage( '/options-privacy.php' );
+	it('Privacy Settings', async () => {
+		await visitAdminPage('/options-privacy.php');
+		await hideDynamicElements(commonDynamicElements);
 		const image = await page.screenshot(screenshotOptions);
-    	expect(image).toMatchImageSnapshot();
-	} );
-} );
+		expect(image).toMatchImageSnapshot();
+	});
+});