diff --git a/plugins/woocommerce/changelog/51004-e2e-external-sites-update-customize-store-tests b/plugins/woocommerce/changelog/51004-e2e-external-sites-update-customize-store-tests new file mode 100644 index 00000000000..17ac089f383 --- /dev/null +++ b/plugins/woocommerce/changelog/51004-e2e-external-sites-update-customize-store-tests @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update /customize-store tests, so they are passing against Pressable env. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js index d0ae4f28382..988e4d3bbea 100644 --- a/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js +++ b/plugins/woocommerce/tests/e2e-pw/envs/default-pressable/playwright.config.js @@ -15,6 +15,7 @@ config = { '**/admin-analytics/**/*.spec.js', '**/admin-marketing/**/*.spec.js', '**/admin-tasks/**/*.spec.js', + '**/customize-store/**/*.spec.js', ], grepInvert: /@skip-on-default-pressable/, }, diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js index 02d002926e2..f28ae181628 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/color-picker.spec.js @@ -412,105 +412,105 @@ test.describe( 'Assembler -> Color Pickers', { tag: '@gutenberg' }, () => { await expect( colorPicker ).toHaveClass( /is-active/ ); } ); - test( 'Selected color palette should be applied on the frontend', async ( { - assemblerPageObject, - page, - baseURL, - } ) => { - const assembler = await assemblerPageObject.getAssembler(); - const colorPicker = assembler - .locator( - '.woocommerce-customize-store_global-styles-variations_item' - ) - .last(); + test( + 'Selected color palette should be applied on the frontend', + { tag: '@skip-on-default-pressable' }, + async ( { assemblerPageObject, page, baseURL } ) => { + const assembler = await assemblerPageObject.getAssembler(); + const colorPicker = assembler + .locator( + '.woocommerce-customize-store_global-styles-variations_item' + ) + .last(); - await colorPicker.click(); + await colorPicker.click(); - await assembler.locator( '[aria-label="Back"]' ).click(); + await assembler.locator( '[aria-label="Back"]' ).click(); - const saveButton = assembler.getByText( 'Finish customizing' ); + const saveButton = assembler.getByText( 'Finish customizing' ); - const waitResponseGlobalStyles = page.waitForResponse( - ( response ) => - response.url().includes( 'wp-json/wp/v2/global-styles' ) && - response.status() === 200 - ); - - const wordPressVersion = await getInstalledWordPressVersion(); - - await saveButton.click(); - - await Promise.all( [ - waitResponseGlobalStyles, - wordPressVersion < 6.6 - ? page.waitForResponse( - ( response ) => - response.url().includes( - // When CYS will support all block themes, this URL will change. - 'wp-json/wp/v2/templates/twentytwentyfour//home' - ) && response.status() === 200 - ) - : Promise.resolve(), - ] ); - - await page.goto( baseURL ); - - const paragraphs = await page - .locator( - 'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])' - ) - .evaluateAll( ( elements ) => - elements.map( ( element ) => { - const style = window.getComputedStyle( element ); - return { - background: style.backgroundColor, - color: style.color, - }; - } ) + const waitResponseGlobalStyles = page.waitForResponse( + ( response ) => + response.url().includes( 'wp-json/wp/v2/global-styles' ) && + response.status() === 200 ); - const buttons = await page - .locator( '.wp-block-button > .wp-block-button__link' ) - .evaluateAll( ( elements ) => - elements.map( ( element ) => { - const style = window.getComputedStyle( element ); - return { - background: style.backgroundColor, - color: style.color, - }; - } ) - ); + const wordPressVersion = await getInstalledWordPressVersion(); - const headers = await page - .locator( 'h1, h2, h3, h4, h5, h6' ) - .evaluateAll( ( elements ) => - elements.map( ( element ) => { - const style = window.getComputedStyle( element ); - return { - background: style.backgroundColor, - color: style.color, - }; - } ) - ); + await saveButton.click(); - for ( const element of buttons ) { - await expect( element.background ).toEqual( - colorPalette.Slate.button.background - ); + await Promise.all( [ + waitResponseGlobalStyles, + wordPressVersion < 6.6 + ? page.waitForResponse( + ( response ) => + response.url().includes( + // When CYS will support all block themes, this URL will change. + 'wp-json/wp/v2/templates/twentytwentyfour//home' + ) && response.status() === 200 + ) + : Promise.resolve(), + ] ); + + await page.goto( baseURL ); + + const paragraphs = await page + .locator( + 'p.wp-block.wp-block-paragraph:not([aria-label="Empty block; start writing or type forward slash to choose a block"])' + ) + .evaluateAll( ( elements ) => + elements.map( ( element ) => { + const style = window.getComputedStyle( element ); + return { + background: style.backgroundColor, + color: style.color, + }; + } ) + ); + + const buttons = await page + .locator( '.wp-block-button > .wp-block-button__link' ) + .evaluateAll( ( elements ) => + elements.map( ( element ) => { + const style = window.getComputedStyle( element ); + return { + background: style.backgroundColor, + color: style.color, + }; + } ) + ); + + const headers = await page + .locator( 'h1, h2, h3, h4, h5, h6' ) + .evaluateAll( ( elements ) => + elements.map( ( element ) => { + const style = window.getComputedStyle( element ); + return { + background: style.backgroundColor, + color: style.color, + }; + } ) + ); + + for ( const element of buttons ) { + await expect( element.background ).toEqual( + colorPalette.Slate.button.background + ); + } + + for ( const element of paragraphs ) { + expect( + colorPalette.Slate.paragraph.color.includes( element.color ) + ).toBe( true ); + } + + for ( const element of headers ) { + expect( + colorPalette.Slate.header.color.includes( element.color ) + ).toBe( true ); + } } - - for ( const element of paragraphs ) { - expect( - colorPalette.Slate.paragraph.color.includes( element.color ) - ).toBe( true ); - } - - for ( const element of headers ) { - expect( - colorPalette.Slate.header.color.includes( element.color ) - ).toBe( true ); - } - } ); + ); test( 'Create "your own" pickers should be visible', async ( { assemblerPageObject, diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js index 01e56c90c70..4d8f95f4869 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js @@ -343,32 +343,35 @@ test.describe( 'Assembler -> Full composability', { tag: '@gutenberg' }, () => { await expect( defaultPattern ).toBeVisible(); } ); - test( 'Clicking opt-in new patterns should be available', async ( { - pageObject, - baseURL, - } ) => { - await prepareAssembler( pageObject, baseURL ); - const assembler = await pageObject.getAssembler(); + test( + 'Clicking opt-in new patterns should be available', + { tag: '@skip-on-default-pressable' }, + async ( { pageObject, baseURL } ) => { + await prepareAssembler( pageObject, baseURL ); + const assembler = await pageObject.getAssembler(); - await assembler.getByText( 'Usage tracking' ).click(); - await expect( - assembler.getByText( 'Access more patterns' ) - ).toBeVisible(); + await assembler.getByText( 'Usage tracking' ).click(); + await expect( + assembler.getByText( 'Access more patterns' ) + ).toBeVisible(); - await assembler.getByRole( 'button', { name: 'Opt in' } ).click(); + await assembler.getByRole( 'button', { name: 'Opt in' } ).click(); - await assembler - .getByText( 'Access more patterns' ) - .waitFor( { state: 'hidden' } ); + await assembler + .getByText( 'Access more patterns' ) + .waitFor( { state: 'hidden' } ); - const sidebarPattern = assembler.locator( - '.block-editor-block-patterns-list' - ); + const sidebarPattern = assembler.locator( + '.block-editor-block-patterns-list' + ); - await sidebarPattern.waitFor( { state: 'visible' } ); + await sidebarPattern.waitFor( { state: 'visible' } ); - await expect( - assembler.locator( '.block-editor-block-patterns-list__list-item' ) - ).toHaveCount( 10 ); - } ); + await expect( + assembler.locator( + '.block-editor-block-patterns-list__list-item' + ) + ).toHaveCount( 10 ); + } + ); } ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js index 0cf61142b30..8be49d4945a 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/homepage.spec.js @@ -314,22 +314,23 @@ test.describe( 'Homepage tracking banner', () => { ).toBeVisible(); } ); - test( 'Should not show the "Want more patterns?" banner when tracking is allowed', async ( { - baseURL, - pageObject, - } ) => { - await setOption( - request, - baseURL, - 'woocommerce_allow_tracking', - 'yes' - ); + test( + 'Should not show the "Want more patterns?" banner when tracking is allowed', + { tag: '@skip-on-default-pressable' }, + async ( { baseURL, pageObject } ) => { + await setOption( + request, + baseURL, + 'woocommerce_allow_tracking', + 'yes' + ); - await prepareAssembler( pageObject, baseURL ); + await prepareAssembler( pageObject, baseURL ); - const assembler = await pageObject.getAssembler(); - await expect( - assembler.getByText( 'Want more patterns?' ) - ).toBeHidden(); - } ); + const assembler = await pageObject.getAssembler(); + await expect( + assembler.getByText( 'Want more patterns?' ) + ).toBeHidden(); + } + ); } ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js index a2c5c306407..7428e9dcc83 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js @@ -235,9 +235,10 @@ test.describe( 'Assembler -> Logo Picker', { tag: '@gutenberg' }, () => { // alternative way to verify new site icon on the site // verifying site icon shown in the new tab is impossible in headless mode const date = new Date(); + const month = ( date.getMonth() + 1 ).toString().padStart( 2, '0' ); await expect( page.goto( - `/wp-content/uploads/${ date.getFullYear() }/${ date.getMonth() }/image-03-100x100.png` + `/wp-content/uploads/${ date.getFullYear() }/${ month }/image-03-100x100.png` ) ).toBeTruthy(); } ); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js index 449add25331..ffe3f97b831 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/intro.spec.js @@ -115,34 +115,38 @@ test.describe( ).toBeVisible(); } ); - test( 'it shows the "non default block theme" banner when the theme is a block theme different than TT4', async ( { - page, - } ) => { - await activateTheme( 'twentytwentythree' ); + test( + 'it shows the "non default block theme" banner when the theme is a block theme different than TT4', + { tag: '@skip-on-default-pressable' }, + async ( { page } ) => { + await activateTheme( 'twentytwentythree' ); - await page.goto( CUSTOMIZE_STORE_URL ); + await page.goto( CUSTOMIZE_STORE_URL ); - await expect( page.locator( 'h1' ) ).toHaveText( - 'Customize your theme' - ); - await expect( - page.getByRole( 'button', { name: 'Go to the Editor' } ) - ).toBeVisible(); - } ); + await expect( page.locator( 'h1' ) ).toHaveText( + 'Customize your theme' + ); + await expect( + page.getByRole( 'button', { name: 'Go to the Editor' } ) + ).toBeVisible(); + } + ); - test( 'clicking on "Go to the Customizer" with a classic theme should go to the customizer', async ( { - page, - } ) => { - await activateTheme( 'twentytwenty' ); + test( + 'clicking on "Go to the Customizer" with a classic theme should go to the customizer', + { tag: '@skip-on-default-pressable' }, + async ( { page } ) => { + await activateTheme( 'twentytwenty' ); - await page.goto( CUSTOMIZE_STORE_URL ); + await page.goto( CUSTOMIZE_STORE_URL ); - await page - .getByRole( 'button', { name: 'Go to the Customizer' } ) - .click(); + await page + .getByRole( 'button', { name: 'Go to the Customizer' } ) + .click(); - await page.waitForNavigation(); - await expect( page.url() ).toContain( 'customize.php' ); - } ); + await page.waitForNavigation(); + await expect( page.url() ).toContain( 'customize.php' ); + } + ); } );