WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/13/2023 08:11:41 AM (12 months 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.