From c81821924540895a1f1ff728964948bf7a31bf2b Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Mon, 25 Sep 2023 22:22:20 +0700 Subject: [PATCH 1/3] Change Cart and Checkout selector --- .../e2e/tests/templates/cart-template.block_theme.spec.ts | 8 ++++---- .../tests/templates/checkout-template.block_theme.spec.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts index b713f3cdc3b..f73a5a169c8 100644 --- a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts @@ -21,7 +21,7 @@ test.describe( 'Test the cart template', async () => { await expect( page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h2:has-text("Cart")' ) + .locator( 'h1:has-text("Cart")' ) .first() ).toBeVisible(); } ); @@ -38,12 +38,12 @@ test.describe( 'Test the cart template', async () => { await editor.page.getByRole( 'button', { name: /Cart/i } ).click(); await editorUtils.enterEditMode(); await expect( - editor.canvas.locator( 'h2:has-text("Cart")' ).first() + editor.canvas.locator( 'h1:has-text("Cart")' ).first() ).toBeVisible(); await editor.openDocumentSettingsSidebar(); await page.getByRole( 'button', { name: 'Edit template' } ).click(); await expect( - editor.canvas.locator( 'h2:has-text("Cart")' ).first() + editor.canvas.locator( 'h1:has-text("Cart")' ).first() ).toBeVisible(); } ); @@ -53,7 +53,7 @@ test.describe( 'Test the cart template', async () => { await expect( admin.page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h2:has-text("Cart")' ) + .locator( 'h1:has-text("Cart")' ) .first() ).toBeVisible(); } ); diff --git a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts index f8e59e8029a..32890422726 100644 --- a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts @@ -21,7 +21,7 @@ test.describe( 'Test the checkout template', async () => { await expect( page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h2:has-text("Checkout")' ) + .locator( 'h1:has-text("Checkout")' ) .first() ).toBeVisible(); } ); @@ -38,12 +38,12 @@ test.describe( 'Test the checkout template', async () => { await editor.page.getByRole( 'button', { name: /Checkout/i } ).click(); await editorUtils.enterEditMode(); await expect( - editor.canvas.locator( 'h2:has-text("Checkout")' ).first() + editor.canvas.locator( 'h1:has-text("Checkout")' ).first() ).toBeVisible(); await editor.openDocumentSettingsSidebar(); await page.getByRole( 'button', { name: 'Edit template' } ).click(); await expect( - editor.canvas.locator( 'h2:has-text("Checkout")' ).first() + editor.canvas.locator( 'h1:has-text("Checkout")' ).first() ).toBeVisible(); } ); @@ -53,7 +53,7 @@ test.describe( 'Test the checkout template', async () => { await expect( admin.page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h2:has-text("Checkout")' ) + .locator( 'h1:has-text("Checkout")' ) .first() ).toBeVisible(); } ); From f013bfb3fae0fb338bab2f0f43532bcbfd382438 Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Tue, 26 Sep 2023 15:55:52 +0700 Subject: [PATCH 2/3] Change Cart and Checkout selector --- .../e2e/tests/templates/cart-template.block_theme.spec.ts | 8 ++++---- .../tests/templates/checkout-template.block_theme.spec.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts index f73a5a169c8..cafb430e4d6 100644 --- a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts @@ -21,7 +21,7 @@ test.describe( 'Test the cart template', async () => { await expect( page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Cart")' ) + .locator( 'h1:has-text("Cart block")' ) .first() ).toBeVisible(); } ); @@ -38,12 +38,12 @@ test.describe( 'Test the cart template', async () => { await editor.page.getByRole( 'button', { name: /Cart/i } ).click(); await editorUtils.enterEditMode(); await expect( - editor.canvas.locator( 'h1:has-text("Cart")' ).first() + editor.canvas.locator( 'h1:has-text("Cart block")' ).first() ).toBeVisible(); await editor.openDocumentSettingsSidebar(); await page.getByRole( 'button', { name: 'Edit template' } ).click(); await expect( - editor.canvas.locator( 'h1:has-text("Cart")' ).first() + editor.canvas.locator( 'h1:has-text("Cart block")' ).first() ).toBeVisible(); } ); @@ -53,7 +53,7 @@ test.describe( 'Test the cart template', async () => { await expect( admin.page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Cart")' ) + .locator( 'h1:has-text("Cart block")' ) .first() ).toBeVisible(); } ); diff --git a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts index 32890422726..94f4b312f17 100644 --- a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts @@ -21,7 +21,7 @@ test.describe( 'Test the checkout template', async () => { await expect( page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Checkout")' ) + .locator( 'h1:has-text("Checkout block")' ) .first() ).toBeVisible(); } ); @@ -38,12 +38,12 @@ test.describe( 'Test the checkout template', async () => { await editor.page.getByRole( 'button', { name: /Checkout/i } ).click(); await editorUtils.enterEditMode(); await expect( - editor.canvas.locator( 'h1:has-text("Checkout")' ).first() + editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() ).toBeVisible(); await editor.openDocumentSettingsSidebar(); await page.getByRole( 'button', { name: 'Edit template' } ).click(); await expect( - editor.canvas.locator( 'h1:has-text("Checkout")' ).first() + editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() ).toBeVisible(); } ); @@ -53,7 +53,7 @@ test.describe( 'Test the checkout template', async () => { await expect( admin.page .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Checkout")' ) + .locator( 'h1:has-text("Checkout block")' ) .first() ).toBeVisible(); } ); From e91a76459c223cc34b99ff09e3b137e43409792a Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Tue, 26 Sep 2023 18:54:20 +0700 Subject: [PATCH 3/3] Adjust order and introduce additional modal closer --- ...firmation.block_theme.side_effects.spec.ts | 1 + .../cart-template.block_theme.spec.ts | 42 +++++++++++-------- .../checkout-template.block_theme.spec.ts | 40 ++++++++++-------- .../order-confirmation.block_theme.spec.ts | 1 + tests/e2e/utils/editor/editor-utils.page.ts | 19 ++++++++- 5 files changed, 66 insertions(+), 37 deletions(-) diff --git a/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts b/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts index 3387765698f..ccc60158773 100644 --- a/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts +++ b/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts @@ -44,6 +44,7 @@ test.describe( 'Shopper → Order Confirmation', () => { } ); await editorUtils.enterEditMode(); await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await editorUtils.transformIntoBlocks(); } ); diff --git a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts index cafb430e4d6..c5f87ec3f6f 100644 --- a/tests/e2e/tests/templates/cart-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/cart-template.block_theme.spec.ts @@ -8,42 +8,46 @@ const templatePath = 'woocommerce/woocommerce//page-cart'; const templateType = 'wp_template'; test.describe( 'Test the cart template', async () => { - test( 'Template can be opened in the site editor', async ( { + test( 'Page can be accessed from the site editor', async ( { admin, + editor, page, editorUtils, } ) => { await admin.visitAdminPage( 'site-editor.php' ); await editorUtils.waitForSiteEditorFinishLoading(); - await page.getByRole( 'button', { name: /Templates/i } ).click(); - await page.getByRole( 'button', { name: /Page: Cart/i } ).click(); + await editor.page.getByRole( 'button', { name: /Pages/i } ).click(); + await editor.page.getByRole( 'button', { name: /Cart/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await expect( - page - .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Cart block")' ) - .first() + editor.canvas.locator( 'h1:has-text("Cart block")' ).first() + ).toBeVisible(); + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'button', { name: 'Edit template' } ).click(); + await expect( + editor.canvas.locator( 'h1:has-text("Cart block")' ).first() ).toBeVisible(); } ); - test( 'Template can be accessed from the page editor', async ( { + test( 'Template can be opened in the site editor', async ( { admin, - editor, page, editorUtils, } ) => { await admin.visitAdminPage( 'site-editor.php' ); await editorUtils.waitForSiteEditorFinishLoading(); - await editor.page.getByRole( 'button', { name: /Pages/i } ).click(); - await editor.page.getByRole( 'button', { name: /Cart/i } ).click(); + await page.getByRole( 'button', { name: /Templates/i } ).click(); + await page.getByRole( 'button', { name: /Page: Cart/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await expect( - editor.canvas.locator( 'h1:has-text("Cart block")' ).first() - ).toBeVisible(); - await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'button', { name: 'Edit template' } ).click(); - await expect( - editor.canvas.locator( 'h1:has-text("Cart block")' ).first() + page + .frameLocator( 'iframe[title="Editor canvas"i]' ) + .locator( 'h1:has-text("Cart block")' ) + .first() ).toBeVisible(); } ); @@ -74,8 +78,10 @@ test.describe( 'Test editing the cart template', async () => { await admin.visitAdminPage( 'site-editor.php' ); await editorUtils.waitForSiteEditorFinishLoading(); await page.getByRole( 'button', { name: /Templates/i } ).click(); - await page.getByRole( 'button', { name: /Page: Checkout/i } ).click(); + await page.getByRole( 'button', { name: /Page: Cart/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await editor.setContent( '' ); diff --git a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts index 94f4b312f17..5526bb1f814 100644 --- a/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts +++ b/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts @@ -8,42 +8,46 @@ const templatePath = 'woocommerce/woocommerce//page-checkout'; const templateType = 'wp_template'; test.describe( 'Test the checkout template', async () => { - test( 'Template can be opened in the site editor', async ( { + test( 'Page can be accessed from the site editor', async ( { admin, + editor, page, editorUtils, } ) => { await admin.visitAdminPage( 'site-editor.php' ); await editorUtils.waitForSiteEditorFinishLoading(); - await page.getByRole( 'button', { name: /Templates/i } ).click(); - await page.getByRole( 'button', { name: /Page: Checkout/i } ).click(); + await editor.page.getByRole( 'button', { name: /Pages/i } ).click(); + await editor.page.getByRole( 'button', { name: /Checkout/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await expect( - page - .frameLocator( 'iframe[title="Editor canvas"i]' ) - .locator( 'h1:has-text("Checkout block")' ) - .first() + editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() + ).toBeVisible(); + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'button', { name: 'Edit template' } ).click(); + await expect( + editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() ).toBeVisible(); } ); - test( 'Template can be accessed from the page editor', async ( { + test( 'Template can be opened in the site editor', async ( { admin, - editor, page, editorUtils, } ) => { await admin.visitAdminPage( 'site-editor.php' ); await editorUtils.waitForSiteEditorFinishLoading(); - await editor.page.getByRole( 'button', { name: /Pages/i } ).click(); - await editor.page.getByRole( 'button', { name: /Checkout/i } ).click(); + await page.getByRole( 'button', { name: /Templates/i } ).click(); + await page.getByRole( 'button', { name: /Page: Checkout/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await expect( - editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() - ).toBeVisible(); - await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'button', { name: 'Edit template' } ).click(); - await expect( - editor.canvas.locator( 'h1:has-text("Checkout block")' ).first() + page + .frameLocator( 'iframe[title="Editor canvas"i]' ) + .locator( 'h1:has-text("Checkout block")' ) + .first() ).toBeVisible(); } ); @@ -76,6 +80,8 @@ test.describe( 'Test editing the checkout template', async () => { await page.getByRole( 'button', { name: /Templates/i } ).click(); await page.getByRole( 'button', { name: /Page: Checkout/i } ).click(); await editorUtils.enterEditMode(); + await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await editor.setContent( '' ); diff --git a/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts b/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts index 71b38ae1adc..2c9c7ad0b6c 100644 --- a/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts +++ b/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts @@ -37,6 +37,7 @@ test.describe( 'Test the order confirmation template', async () => { } ); await editorUtils.enterEditMode(); await editorUtils.closeWelcomeGuideModal(); + await editorUtils.closePageEditingModal(); await editorUtils.transformIntoBlocks(); await editorUtils.waitForSiteEditorFinishLoading(); await expect( diff --git a/tests/e2e/utils/editor/editor-utils.page.ts b/tests/e2e/utils/editor/editor-utils.page.ts index 355d933dd28..4386c9497ba 100644 --- a/tests/e2e/utils/editor/editor-utils.page.ts +++ b/tests/e2e/utils/editor/editor-utils.page.ts @@ -266,8 +266,7 @@ export class EditorUtils { .getByRole( 'dialog', { name: 'Welcome to the site editor' } ) .locator( 'div' ) .filter( { - hasText: - 'Edit your siteDesign everything on your site — from the header right down to the', + hasText: 'Edit your site', } ) .nth( 2 ) .isVisible(); @@ -280,6 +279,22 @@ export class EditorUtils { } } + async closePageEditingModal() { + const isModalOpen = await this.page + .getByRole( 'dialog', { name: 'Editing a page' } ) + .locator( 'div' ) + .filter( { + hasText: 'Editing a page', + } ) + .nth( 2 ) + .isVisible(); + + // eslint-disable-next-line playwright/no-conditional-in-test + if ( isModalOpen ) { + await this.page.getByRole( 'button', { name: 'Continue' } ).click(); + } + } + async transformIntoBlocks() { const isNotTransformedIntoBlocks = await this.page .frameLocator( 'iframe[name="editor-canvas"]' )