From 5da7a6f9231e467ee1852fda6f2e08a9cca6a9a1 Mon Sep 17 00:00:00 2001 From: Tonya Mork Date: Tue, 2 Nov 2021 21:03:10 +0000 Subject: Build/Test Tools: Introduce local visual regression testing. Adds the ability to ''locally'' run visual regression testing for wp-admin pages via `npm run test:visual`. Snapshots are stored on contributors' local machines. Note: Wiring to the CI is not included. Why? The challenges for the CI are storage of the artifacts and unreliability of testing these across different environments. This commit is a first step towards visual regression testing. Running it locally provides a learning opportunity which could help to craft how to build it into the automated CI process. Props isabel_brison, andraganescu, azaozz, danfarrow, desrosj, hellofromTonya, justinahinon, netweb, talldanwp. Fixes #49606. git-svn-id: https://develop.svn.wordpress.org/trunk@51989 602fd350-edb4-49c9-b593-d223f7449a82 --- .../specs/visual-snapshots.test.js | 222 +++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 tests/visual-regression/specs/visual-snapshots.test.js (limited to 'tests/visual-regression/specs') diff --git a/tests/visual-regression/specs/visual-snapshots.test.js b/tests/visual-regression/specs/visual-snapshots.test.js new file mode 100644 index 0000000000..458c40f86e --- /dev/null +++ b/tests/visual-regression/specs/visual-snapshots.test.js @@ -0,0 +1,222 @@ +import { visitAdminPage } from '@wordpress/e2e-test-utils'; + +// See https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagescreenshotoptions for more available options. +const screenshotOptions = { + fullPage: true, +}; + +async function hideElementVisibility( elements ) { + for ( let i = 0; i < elements.length; i++ ) { + const elementOnPage = await page.$( elements[ i ] ); + if ( elementOnPage ) { + await elementOnPage.evaluate( ( el ) => { + el.style.visibility = 'hidden'; + } ); + } + } + await page.waitFor( 1000 ); +} + +async function removeElementFromLayout( elements ) { + for ( let i = 0; i < elements.length; i++ ) { + const elementOnPage = await page.$( elements[ i ] ); + if ( elementOnPage ) { + await elementOnPage.evaluate( ( el ) => { + el.style.visibility = 'hidden'; + } ); + } + } + await page.waitFor( 1000 ); +} + +const elementsToHide = [ '#footer-upgrade', '#wp-admin-bar-root-default' ]; + +const elementsToRemove = [ '#toplevel_page_gutenberg' ]; + +describe( 'Admin Visual Snapshots', () => { + beforeAll( async () => { + await page.setViewport( { + width: 1000, + height: 750, + } ); + } ); + + it( 'All Posts', async () => { + await visitAdminPage( '/edit.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Categories', async () => { + await visitAdminPage( '/edit-tags.php', 'taxonomy=category' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Tags', async () => { + await visitAdminPage( '/edit-tags.php', 'taxonomy=post_tag' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Media Library', async () => { + await visitAdminPage( '/upload.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Add New Media', async () => { + await visitAdminPage( '/media-new.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'All Pages', async () => { + await visitAdminPage( '/edit.php', 'post_type=page' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Comments', async () => { + await visitAdminPage( '/edit-comments.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Widgets', async () => { + await visitAdminPage( '/widgets.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Menus', async () => { + await visitAdminPage( '/nav-menus.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Plugins', async () => { + await visitAdminPage( '/plugins.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'All Users', async () => { + await visitAdminPage( '/users.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Add New User', async () => { + await visitAdminPage( '/user-new.php' ); + await hideElementVisibility( [ + ...elementsToHide, + '.password-input-wrapper', + ] ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Your Profile', async () => { + await visitAdminPage( '/profile.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Available Tools', async () => { + await visitAdminPage( '/tools.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Import', async () => { + await visitAdminPage( '/import.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Export', async () => { + await visitAdminPage( '/export.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Export Personal Data', async () => { + await visitAdminPage( '/export-personal-data.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Erase Personal Data', async () => { + await visitAdminPage( '/erase-personal-data.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Reading Settings', async () => { + await visitAdminPage( '/options-reading.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Discussion Settings', async () => { + await visitAdminPage( '/options-discussion.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Media Settings', async () => { + await visitAdminPage( '/options-media.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); + + it( 'Privacy Settings', async () => { + await visitAdminPage( '/options-privacy.php' ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); + const image = await page.screenshot( screenshotOptions ); + expect( image ).toMatchImageSnapshot(); + } ); +} ); -- cgit v1.2.3