diff --git a/changelog/dev-10339-wcb-checkout b/changelog/dev-10339-wcb-checkout new file mode 100644 index 00000000000..7bc58aaeb5a --- /dev/null +++ b/changelog/dev-10339-wcb-checkout @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Fix potential flakiness while creating a page with the checkout block. diff --git a/tests/e2e-pw/specs/wcpay/shopper/shopper-myaccount-renew-subscription.spec.ts b/tests/e2e-pw/specs/wcpay/shopper/shopper-myaccount-renew-subscription.spec.ts index 53ba7b0945a..1dc13c65291 100644 --- a/tests/e2e-pw/specs/wcpay/shopper/shopper-myaccount-renew-subscription.spec.ts +++ b/tests/e2e-pw/specs/wcpay/shopper/shopper-myaccount-renew-subscription.spec.ts @@ -31,18 +31,10 @@ describeif( shouldRunSubscriptionsTests )( } ); test( 'should be able to purchase a subscription', async () => { - await shopper.addToCartFromShopPage( - page, - config.products.subscription_signup_fee - ); - - await shopper.setupCheckout( page, customerBillingConfig ); - await shopper.selectPaymentMethod( page ); - await shopper.fillCardDetails( page, config.cards.basic ); - await shopper.placeOrder( page ); - await expect( - page.getByRole( 'heading', { name: 'Order received' } ) - ).toBeVisible(); + await shopper.placeOrderWithOptions( page, { + product: config.products.subscription_signup_fee, + billingAddress: customerBillingConfig, + } ); subscriptionId = await page .getByLabel( 'View subscription number' ) @@ -70,6 +62,7 @@ describeif( shouldRunSubscriptionsTests )( ).toBeVisible(); await shopper.focusPlaceOrderButton( page ); await shopper.placeOrder( page ); + await page.waitForURL( /\/order-received\// ); await expect( page.getByRole( 'heading', { name: 'Order received' } ) ).toBeVisible(); diff --git a/tests/e2e-pw/specs/wcpay/shopper/shopper-pay-for-order.spec.ts b/tests/e2e-pw/specs/wcpay/shopper/shopper-pay-for-order.spec.ts index 028f95df1cd..8b24681ff1f 100644 --- a/tests/e2e-pw/specs/wcpay/shopper/shopper-pay-for-order.spec.ts +++ b/tests/e2e-pw/specs/wcpay/shopper/shopper-pay-for-order.spec.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import { test, expect } from '@playwright/test'; +import { test, expect, Page } from '@playwright/test'; /** * Internal dependencies @@ -18,14 +18,21 @@ const cardTestingPreventionStates = [ ]; test.describe( 'Shopper > Pay for Order', () => { + let merchantPage: Page; + let shopperPage: Page; + + test.beforeAll( async ( { browser } ) => { + merchantPage = ( await getMerchant( browser ) ).merchantPage; + shopperPage = ( await getShopper( browser ) ).shopperPage; + } ); + + test.afterAll( async () => { + await devtools.disableCardTestingProtection( merchantPage ); + } ); + cardTestingPreventionStates.forEach( ( { cardTestingPreventionEnabled } ) => { - test( `should be able to pay for a failed order with card testing protection ${ cardTestingPreventionEnabled }`, async ( { - browser, - } ) => { - const { merchantPage } = await getMerchant( browser ); - const { shopperPage } = await getShopper( browser ); - + test( `should be able to pay for a failed order with card testing protection ${ cardTestingPreventionEnabled }`, async () => { // Enable or disable card testing protection. if ( ! cardTestingPreventionEnabled ) { await devtools.disableCardTestingProtection( merchantPage ); @@ -67,7 +74,7 @@ test.describe( 'Shopper > Pay for Order', () => { config.cards.basic ); - // Check for the fraud prevenction token presence. + // Check for the fraud prevention token presence. const token = await shopperPage.evaluate( () => { return ( window as any ).wcpayFraudPreventionToken; } ); @@ -84,11 +91,6 @@ test.describe( 'Shopper > Pay for Order', () => { await expect( shopperPage.getByText( 'Order received' ).first() ).toBeVisible(); - - // Disable card testing protection if necessary. - if ( cardTestingPreventionEnabled ) { - await devtools.disableCardTestingProtection( merchantPage ); - } } ); } ); diff --git a/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-failures.spec.ts b/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-failures.spec.ts index 19a5e5ff663..6117986ff53 100644 --- a/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-failures.spec.ts +++ b/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-failures.spec.ts @@ -108,14 +108,7 @@ describeif( shouldRunWCBlocksTests )( await shopper.placeOrderWCB( shopperPage, false ); if ( auth ) { - const placeOrderButton = shopperPage.locator( - '.wc-block-components-checkout-place-order-button' - ); - await expect( placeOrderButton ).toBeDisabled(); - await expect( placeOrderButton ).toHaveClass( - /wc-block-components-button--loading/ - ); - await shopper.confirmCardAuthentication( shopperPage ); + await shopper.confirmCardAuthenticationWCB( shopperPage ); } if ( errorsInsideStripeFrame.includes( card ) ) { diff --git a/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-purchase.spec.ts b/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-purchase.spec.ts index 89fc0797ec7..04bba069900 100644 --- a/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-purchase.spec.ts +++ b/tests/e2e-pw/specs/wcpay/shopper/shopper-wc-blocks-checkout-purchase.spec.ts @@ -17,9 +17,10 @@ import { addWCBCheckoutPage } from '../../../utils/merchant'; import { goToCheckoutWCB } from '../../../utils/shopper-navigation'; import { addToCartFromShopPage, - confirmCardAuthentication, + confirmCardAuthenticationWCB, fillBillingAddressWCB, fillCardDetailsWCB, + placeOrderWCB, } from '../../../utils/shopper'; import { config } from '../../../config/default'; @@ -49,14 +50,7 @@ describeif( shouldRunWCBlocksTests )( config.addresses.customer.billing ); await fillCardDetailsWCB( shopperPage, config.cards.basic ); - await shopperPage - .getByRole( 'button', { name: 'Place Order' } ) - .click(); - await expect( - shopperPage.getByRole( 'heading', { - name: 'Order received', - } ) - ).toBeVisible(); + await placeOrderWCB( shopperPage ); } ); test( 'using a 3DS card', async () => { @@ -70,10 +64,8 @@ describeif( shouldRunWCBlocksTests )( config.addresses.customer.billing ); await fillCardDetailsWCB( shopperPage, config.cards[ '3ds' ] ); - await shopperPage - .getByRole( 'button', { name: 'Place Order' } ) - .click(); - await confirmCardAuthentication( shopperPage ); + await placeOrderWCB( shopperPage, false ); + await confirmCardAuthenticationWCB( shopperPage ); await expect( shopperPage.getByRole( 'heading', { name: 'Order received', diff --git a/tests/e2e-pw/utils/devtools.ts b/tests/e2e-pw/utils/devtools.ts index fb82246db93..273feac3e51 100644 --- a/tests/e2e-pw/utils/devtools.ts +++ b/tests/e2e-pw/utils/devtools.ts @@ -14,7 +14,7 @@ const saveDevToolsSettings = async ( page: Page ) => { }; const getIsCardTestingProtectionEnabled = ( page: Page ) => - page.getByLabel( 'Card testing mitigations enabled' ).isChecked(); + page.getByLabel( /Card testing mitigations enabled/ ).isChecked(); const setCardTestingProtection = ( page: Page, enabled: boolean ) => page diff --git a/tests/e2e-pw/utils/merchant.ts b/tests/e2e-pw/utils/merchant.ts index c7898863fd4..1d267d4f7d7 100644 --- a/tests/e2e-pw/utils/merchant.ts +++ b/tests/e2e-pw/utils/merchant.ts @@ -427,7 +427,7 @@ export const addWCBCheckoutPage = async ( page: Page ) => { await page .locator( '#wpbody-content' ) - .getByRole( 'link', { name: 'Add New Page' } ) + .getByRole( 'link', { name: /^Add( New)? Page$/ } ) .click(); await page.waitForLoadState( 'load' ); @@ -442,8 +442,6 @@ export const addWCBCheckoutPage = async ( page: Page ) => { await editor.getByLabel( 'Add title' ).fill( 'Checkout WCB' ); await editor.getByLabel( 'Add block' ).click(); - await ensureBlockSettingsPanelIsOpen( page ); - await page.getByPlaceholder( 'Search' ).fill( 'Checkout' ); await page.getByRole( 'option', { name: 'Checkout', exact: true } ).click(); @@ -452,6 +450,8 @@ export const addWCBCheckoutPage = async ( page: Page ) => { await page.keyboard.press( 'Escape' ); // to dismiss a dialog if present // Enable the "Company" field if it's not already enabled. + await ensureBlockSettingsPanelIsOpen( page ); + await page.getByLabel( 'Document Overview' ).click(); await page.waitForTimeout( 1000 ); await expect( page.locator( '.editor-list-view-sidebar' ) ).toBeVisible(); diff --git a/tests/e2e-pw/utils/shopper.ts b/tests/e2e-pw/utils/shopper.ts index 0099c3a057e..24f724241b9 100644 --- a/tests/e2e-pw/utils/shopper.ts +++ b/tests/e2e-pw/utils/shopper.ts @@ -615,3 +615,25 @@ export const removeCoupon = async ( page: Page ) => { ).toBeVisible(); } }; + +/** + * When using a 3DS card, call this function after clicking the 'Place order' button + * to confirm the card authentication. + * + * @param {Page} page The Shopper page object. + * @param {boolean} authorize Whether to authorize the transaction or not. + * @return {Promise} Void. + */ +export const confirmCardAuthenticationWCB = async ( + page: Page, + authorize = true +): Promise< void > => { + const placeOrderButton = page.locator( + '.wc-block-components-checkout-place-order-button' + ); + await expect( placeOrderButton ).toBeDisabled(); + await expect( placeOrderButton ).toHaveClass( + /wc-block-components-button--loading/ + ); + await confirmCardAuthentication( page, authorize ); +};