WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/13/2023 08:11:41 AM (3 years ago)
Author:
swissspidy
Message:

Build/Test Tools: Migrate Puppeteer tests to Playwright.

As per the migration plan shared last year, this migrates all browser-based tests in WordPress core to use Playwright.
This includes end-to-end, performance, and visual regression tests.

Props swissspidy, mamaduka, kevin940726, bartkalisz, desrosj, adamsilverstein.
Fixes #59517.

Location:
trunk/tests/visual-regression/specs
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/visual-regression/specs

    • Property svn:ignore

      •  

        old new  
        1 __image_snapshots__
         1__snapshots__

  • trunk/tests/visual-regression/specs/visual-snapshots.test.js

    r51989 r56926  
    1 import { visitAdminPage } from '@wordpress/e2e-test-utils';
     1import { test, expect } from '@wordpress/e2e-test-utils-playwright';
    22
    3 // See https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagescreenshotoptions for more available options.
    4 const screenshotOptions = {
    5         fullPage: true,
    6 };
     3const elementsToHide = [
     4        '#footer-upgrade',
     5        '#wp-admin-bar-root-default',
     6        '#toplevel_page_gutenberg'
     7];
    78
    8 async function hideElementVisibility( elements ) {
    9         for ( let i = 0; i < elements.length; i++ ) {
    10                 const elementOnPage = await page.$( elements[ i ] );
    11                 if ( elementOnPage ) {
    12                         await elementOnPage.evaluate( ( el ) => {
    13                                 el.style.visibility = 'hidden';
    14                         } );
    15                 }
    16         }
    17         await page.waitFor( 1000 );
    18 }
    19 
    20 async function removeElementFromLayout( elements ) {
    21         for ( let i = 0; i < elements.length; i++ ) {
    22                 const elementOnPage = await page.$( elements[ i ] );
    23                 if ( elementOnPage ) {
    24                         await elementOnPage.evaluate( ( el ) => {
    25                                 el.style.visibility = 'hidden';
    26                         } );
    27                 }
    28         }
    29         await page.waitFor( 1000 );
    30 }
    31 
    32 const elementsToHide = [ '#footer-upgrade', '#wp-admin-bar-root-default' ];
    33 
    34 const elementsToRemove = [ '#toplevel_page_gutenberg' ];
    35 
    36 describe( 'Admin Visual Snapshots', () => {
    37         beforeAll( async () => {
    38                 await page.setViewport( {
    39                         width: 1000,
    40                         height: 750,
    41                 } );
     9test.describe( 'Admin Visual Snapshots', () => {
     10        test( 'All Posts', async ({ admin, page }) => {
     11                await admin.visitAdminPage( '/edit.php' );
     12                await expect( page ).toHaveScreenshot( 'All Posts.png', {
     13                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     14                });
    4215        } );
    4316
    44         it( 'All Posts', async () => {
    45                 await visitAdminPage( '/edit.php' );
    46                 await hideElementVisibility( elementsToHide );
    47                 await removeElementFromLayout( elementsToRemove );
    48                 const image = await page.screenshot( screenshotOptions );
    49                 expect( image ).toMatchImageSnapshot();
     17        test( 'Categories', async ({ admin, page }) => {
     18                await admin.visitAdminPage( '/edit-tags.php', 'taxonomy=category' );
     19                await expect( page ).toHaveScreenshot( 'Categories.png', {
     20                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     21                });
    5022        } );
    5123
    52         it( 'Categories', async () => {
    53                 await visitAdminPage( '/edit-tags.php', 'taxonomy=category' );
    54                 await hideElementVisibility( elementsToHide );
    55                 await removeElementFromLayout( elementsToRemove );
    56                 const image = await page.screenshot( screenshotOptions );
    57                 expect( image ).toMatchImageSnapshot();
     24        test( 'Tags', async ({ admin, page }) => {
     25                await admin.visitAdminPage( '/edit-tags.php', 'taxonomy=post_tag' );
     26                await expect( page ).toHaveScreenshot( 'Tags.png', {
     27                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     28                });
    5829        } );
    5930
    60         it( 'Tags', async () => {
    61                 await visitAdminPage( '/edit-tags.php', 'taxonomy=post_tag' );
    62                 await hideElementVisibility( elementsToHide );
    63                 await removeElementFromLayout( elementsToRemove );
    64                 const image = await page.screenshot( screenshotOptions );
    65                 expect( image ).toMatchImageSnapshot();
     31        test( 'Media Library', async ({ admin, page }) => {
     32                await admin.visitAdminPage( '/upload.php' );
     33                await expect( page ).toHaveScreenshot( 'Media Library.png', {
     34                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     35                });
    6636        } );
    6737
    68         it( 'Media Library', async () => {
    69                 await visitAdminPage( '/upload.php' );
    70                 await hideElementVisibility( elementsToHide );
    71                 await removeElementFromLayout( elementsToRemove );
    72                 const image = await page.screenshot( screenshotOptions );
    73                 expect( image ).toMatchImageSnapshot();
     38        test( 'Add New Media', async ({ admin, page }) => {
     39                await admin.visitAdminPage( '/media-new.php' );
     40                await expect( page ).toHaveScreenshot( 'Add New Media.png', {
     41                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     42                });
    7443        } );
    7544
    76         it( 'Add New Media', async () => {
    77                 await visitAdminPage( '/media-new.php' );
    78                 await hideElementVisibility( elementsToHide );
    79                 await removeElementFromLayout( elementsToRemove );
    80                 const image = await page.screenshot( screenshotOptions );
    81                 expect( image ).toMatchImageSnapshot();
     45        test( 'All Pages', async ({ admin, page }) => {
     46                await admin.visitAdminPage( '/edit.php', 'post_type=page' );
     47                await expect( page ).toHaveScreenshot( 'All Pages.png', {
     48                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     49                });
    8250        } );
    8351
    84         it( 'All Pages', async () => {
    85                 await visitAdminPage( '/edit.php', 'post_type=page' );
    86                 await hideElementVisibility( elementsToHide );
    87                 await removeElementFromLayout( elementsToRemove );
    88                 const image = await page.screenshot( screenshotOptions );
    89                 expect( image ).toMatchImageSnapshot();
     52        test( 'Comments', async ({ admin, page }) => {
     53                await admin.visitAdminPage( '/edit-comments.php' );
     54                await expect( page ).toHaveScreenshot( 'Comments.png', {
     55                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     56                });
    9057        } );
    9158
    92         it( 'Comments', async () => {
    93                 await visitAdminPage( '/edit-comments.php' );
    94                 await hideElementVisibility( elementsToHide );
    95                 await removeElementFromLayout( elementsToRemove );
    96                 const image = await page.screenshot( screenshotOptions );
    97                 expect( image ).toMatchImageSnapshot();
     59        test( 'Widgets', async ({ admin, page }) => {
     60                await admin.visitAdminPage( '/widgets.php' );
     61                await expect( page ).toHaveScreenshot( 'Widgets.png', {
     62                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     63                });
    9864        } );
    9965
    100         it( 'Widgets', async () => {
    101                 await visitAdminPage( '/widgets.php' );
    102                 await hideElementVisibility( elementsToHide );
    103                 await removeElementFromLayout( elementsToRemove );
    104                 const image = await page.screenshot( screenshotOptions );
    105                 expect( image ).toMatchImageSnapshot();
     66        test( 'Menus', async ({ admin, page }) => {
     67                await admin.visitAdminPage( '/nav-menus.php' );
     68                await expect( page ).toHaveScreenshot( 'Menus.png', {
     69                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     70                });
    10671        } );
    10772
    108         it( 'Menus', async () => {
    109                 await visitAdminPage( '/nav-menus.php' );
    110                 await hideElementVisibility( elementsToHide );
    111                 await removeElementFromLayout( elementsToRemove );
    112                 const image = await page.screenshot( screenshotOptions );
    113                 expect( image ).toMatchImageSnapshot();
     73        test( 'Plugins', async ({ admin, page }) => {
     74                await admin.visitAdminPage( '/plugins.php' );
     75                await expect( page ).toHaveScreenshot( 'Plugins.png', {
     76                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     77                });
    11478        } );
    11579
    116         it( 'Plugins', async () => {
    117                 await visitAdminPage( '/plugins.php' );
    118                 await hideElementVisibility( elementsToHide );
    119                 await removeElementFromLayout( elementsToRemove );
    120                 const image = await page.screenshot( screenshotOptions );
    121                 expect( image ).toMatchImageSnapshot();
     80        test( 'All Users', async ({ admin, page }) => {
     81                await admin.visitAdminPage( '/users.php' );
     82                await expect( page ).toHaveScreenshot( 'All Users.png', {
     83                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     84                });
    12285        } );
    12386
    124         it( 'All Users', async () => {
    125                 await visitAdminPage( '/users.php' );
    126                 await hideElementVisibility( elementsToHide );
    127                 await removeElementFromLayout( elementsToRemove );
    128                 const image = await page.screenshot( screenshotOptions );
    129                 expect( image ).toMatchImageSnapshot();
     87        test( 'Add New User', async ({ admin, page }) => {
     88                await admin.visitAdminPage( '/user-new.php' );
     89                await expect( page ).toHaveScreenshot( 'Add New User.png', {
     90                        mask: [
     91                                        ...elementsToHide,
     92                                        '.password-input-wrapper'
     93                        ].map( ( selector ) => page.locator( selector ) ),
     94                });
    13095        } );
    13196
    132         it( 'Add New User', async () => {
    133                 await visitAdminPage( '/user-new.php' );
    134                 await hideElementVisibility( [
    135                         ...elementsToHide,
    136                         '.password-input-wrapper',
    137                 ] );
    138                 await removeElementFromLayout( elementsToRemove );
    139                 const image = await page.screenshot( screenshotOptions );
    140                 expect( image ).toMatchImageSnapshot();
     97        test( 'Your Profile', async ({ admin, page }) => {
     98                await admin.visitAdminPage( '/profile.php' );
     99                await expect( page ).toHaveScreenshot( 'Your Profile.png', {
     100                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     101                });
    141102        } );
    142103
    143         it( 'Your Profile', async () => {
    144                 await visitAdminPage( '/profile.php' );
    145                 await hideElementVisibility( elementsToHide );
    146                 await removeElementFromLayout( elementsToRemove );
    147                 const image = await page.screenshot( screenshotOptions );
    148                 expect( image ).toMatchImageSnapshot();
     104        test( 'Available Tools', async ({ admin, page }) => {
     105                await admin.visitAdminPage( '/tools.php' );
     106                await expect( page ).toHaveScreenshot( 'Available Tools.png', {
     107                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     108                });
    149109        } );
    150110
    151         it( 'Available Tools', async () => {
    152                 await visitAdminPage( '/tools.php' );
    153                 await hideElementVisibility( elementsToHide );
    154                 await removeElementFromLayout( elementsToRemove );
    155                 const image = await page.screenshot( screenshotOptions );
    156                 expect( image ).toMatchImageSnapshot();
     111        test( 'Import', async ({ admin, page }) => {
     112                await admin.visitAdminPage( '/import.php' );
     113                await expect( page ).toHaveScreenshot( 'Import.png', {
     114                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     115                });
    157116        } );
    158117
    159         it( 'Import', async () => {
    160                 await visitAdminPage( '/import.php' );
    161                 await hideElementVisibility( elementsToHide );
    162                 await removeElementFromLayout( elementsToRemove );
    163                 const image = await page.screenshot( screenshotOptions );
    164                 expect( image ).toMatchImageSnapshot();
     118        test( 'Export', async ({ admin, page }) => {
     119                await admin.visitAdminPage( '/export.php' );
     120                await expect( page ).toHaveScreenshot( 'Export.png', {
     121                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     122                });
    165123        } );
    166124
    167         it( 'Export', async () => {
    168                 await visitAdminPage( '/export.php' );
    169                 await hideElementVisibility( elementsToHide );
    170                 await removeElementFromLayout( elementsToRemove );
    171                 const image = await page.screenshot( screenshotOptions );
    172                 expect( image ).toMatchImageSnapshot();
     125        test( 'Export Personal Data', async ({ admin, page }) => {
     126                await admin.visitAdminPage( '/export-personal-data.php' );
     127                await expect( page ).toHaveScreenshot( 'Export Personal Data.png', {
     128                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     129                });
    173130        } );
    174131
    175         it( 'Export Personal Data', async () => {
    176                 await visitAdminPage( '/export-personal-data.php' );
    177                 await hideElementVisibility( elementsToHide );
    178                 await removeElementFromLayout( elementsToRemove );
    179                 const image = await page.screenshot( screenshotOptions );
    180                 expect( image ).toMatchImageSnapshot();
     132        test( 'Erase Personal Data', async ({ admin, page }) => {
     133                await admin.visitAdminPage( '/erase-personal-data.php' );
     134                await expect( page ).toHaveScreenshot( 'Erase Personal Data.png', {
     135                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     136                });
    181137        } );
    182138
    183         it( 'Erase Personal Data', async () => {
    184                 await visitAdminPage( '/erase-personal-data.php' );
    185                 await hideElementVisibility( elementsToHide );
    186                 await removeElementFromLayout( elementsToRemove );
    187                 const image = await page.screenshot( screenshotOptions );
    188                 expect( image ).toMatchImageSnapshot();
     139        test( 'Reading Settings', async ({ admin, page }) => {
     140                await admin.visitAdminPage( '/options-reading.php' );
     141                await expect( page ).toHaveScreenshot( 'Reading Settings.png', {
     142                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     143                });
    189144        } );
    190145
    191         it( 'Reading Settings', async () => {
    192                 await visitAdminPage( '/options-reading.php' );
    193                 await hideElementVisibility( elementsToHide );
    194                 await removeElementFromLayout( elementsToRemove );
    195                 const image = await page.screenshot( screenshotOptions );
    196                 expect( image ).toMatchImageSnapshot();
     146        test( 'Discussion Settings', async ({ admin, page }) => {
     147                await admin.visitAdminPage( '/options-discussion.php' );
     148                await expect( page ).toHaveScreenshot( 'Discussion Settings.png', {
     149                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     150                });
    197151        } );
    198152
    199         it( 'Discussion Settings', async () => {
    200                 await visitAdminPage( '/options-discussion.php' );
    201                 await hideElementVisibility( elementsToHide );
    202                 await removeElementFromLayout( elementsToRemove );
    203                 const image = await page.screenshot( screenshotOptions );
    204                 expect( image ).toMatchImageSnapshot();
     153        test( 'Media Settings', async ({ admin, page }) => {
     154                await admin.visitAdminPage( '/options-media.php' );
     155                await expect( page ).toHaveScreenshot( 'Media Settings.png', {
     156                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     157                });
    205158        } );
    206159
    207         it( 'Media Settings', async () => {
    208                 await visitAdminPage( '/options-media.php' );
    209                 await hideElementVisibility( elementsToHide );
    210                 await removeElementFromLayout( elementsToRemove );
    211                 const image = await page.screenshot( screenshotOptions );
    212                 expect( image ).toMatchImageSnapshot();
    213         } );
    214 
    215         it( 'Privacy Settings', async () => {
    216                 await visitAdminPage( '/options-privacy.php' );
    217                 await hideElementVisibility( elementsToHide );
    218                 await removeElementFromLayout( elementsToRemove );
    219                 const image = await page.screenshot( screenshotOptions );
    220                 expect( image ).toMatchImageSnapshot();
     160        test( 'Privacy Settings', async ({ admin, page }) => {
     161                await admin.visitAdminPage( '/options-privacy.php' );
     162                await expect( page ).toHaveScreenshot( 'Privacy Settings.png', {
     163                        mask: elementsToHide.map( ( selector ) => page.locator( selector ) ),
     164                });
    221165        } );
    222166} );
Note: See TracChangeset for help on using the changeset viewer.