diff --git a/tests/visual-regression/config/bootstrap.js b/tests/visual-regression/config/bootstrap.js index 49f19881b5f48..6130909e0c6fe 100644 --- a/tests/visual-regression/config/bootstrap.js +++ b/tests/visual-regression/config/bootstrap.js @@ -1,6 +1,8 @@ import { configureToMatchImageSnapshot } from 'jest-image-snapshot'; +// All available options: https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api const toMatchImageSnapshot = configureToMatchImageSnapshot( { + // Maximum diff to allow in px. failureThreshold: 1, } ); diff --git a/tests/visual-regression/specs/visual-snapshots.test.js b/tests/visual-regression/specs/visual-snapshots.test.js index a47077da47391..ebed041e65f2f 100644 --- a/tests/visual-regression/specs/visual-snapshots.test.js +++ b/tests/visual-regression/specs/visual-snapshots.test.js @@ -1,14 +1,15 @@ 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 hideDynamicElements( elements ) { +async function hideElementVisibility( elements ) { for ( let i = 0; i < elements.length; i++ ) { const elementOnPage = await page.$( elements[ i ] ); if ( elementOnPage ) { - await page.$eval( elements[ i ], ( el ) => { + await elementOnPage.evaluate( ( el ) => { el.style.visibility = 'hidden'; } ); } @@ -16,11 +17,21 @@ async function hideDynamicElements( elements ) { await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) ); } -const commonDynamicElements = [ - '#footer-upgrade', - '#wp-admin-bar-root-default', - '#toplevel_page_gutenberg', -]; +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 new Promise( ( resolve ) => setTimeout( resolve, 1000 ) ); +} + +const elementsToHide = [ '#footer-upgrade', '#wp-admin-bar-root-default' ]; + +const elementsToRemove = [ '#toplevel_page_gutenberg' ]; describe( 'Admin Visual Snapshots', () => { beforeAll( async () => { @@ -32,157 +43,179 @@ describe( 'Admin Visual Snapshots', () => { it( 'All Posts', async () => { await visitAdminPage( '/edit.php' ); - await hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Media Library', async () => { await visitAdminPage( '/upload.php' ); - await hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Comments', async () => { await visitAdminPage( '/edit-comments.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Widgets', async () => { await visitAdminPage( '/widgets.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Menus', async () => { await visitAdminPage( '/nav-menus.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Plugins', async () => { await visitAdminPage( '/plugins.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'All Users', async () => { await visitAdminPage( '/users.php' ); - await hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( [ - ...commonDynamicElements, + 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 hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Available Tools', async () => { await visitAdminPage( '/tools.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Import', async () => { await visitAdminPage( '/import.php' ); - await hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } ); it( 'Export', async () => { await visitAdminPage( '/export.php' ); - await hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + 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 hideDynamicElements( commonDynamicElements ); + await hideElementVisibility( elementsToHide ); + await removeElementFromLayout( elementsToRemove ); const image = await page.screenshot( screenshotOptions ); expect( image ).toMatchImageSnapshot(); } );