diff --git a/changelog/dev-10086-playwright-migration-shopper-subscriptions-purchase-free-trial b/changelog/dev-10086-playwright-migration-shopper-subscriptions-purchase-free-trial new file mode 100644 index 00000000000..a35d4b3d21e --- /dev/null +++ b/changelog/dev-10086-playwright-migration-shopper-subscriptions-purchase-free-trial @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Migrate shopper subscription free-trial purchase E2E test to Playwright diff --git a/tests/e2e-pw/specs/shopper/shopper-subscriptions-purchase-free-trial.spec.ts b/tests/e2e-pw/specs/shopper/shopper-subscriptions-purchase-free-trial.spec.ts new file mode 100644 index 00000000000..6339ad3a505 --- /dev/null +++ b/tests/e2e-pw/specs/shopper/shopper-subscriptions-purchase-free-trial.spec.ts @@ -0,0 +1,154 @@ +/** + * External dependencies + */ +import test, { expect } from '@playwright/test'; + +/** + * Internal dependencies + */ +import { shouldRunSubscriptionsTests } from '../../utils/constants'; +import { describeif, getMerchant, getShopper } from '../../utils/helpers'; +import { config } from '../../config/default'; +import { + confirmCardAuthentication, + emptyCart, + fillCardDetails, + setupCheckout, +} from '../../utils/shopper'; +import { + goToCart, + goToProductPageBySlug, +} from '../../utils/shopper-navigation'; +import { goToOrder, goToSubscriptions } from '../../utils/merchant-navigation'; + +const nowLocal = new Date(); +const nowUTC = new Date( + nowLocal.getUTCFullYear(), + nowLocal.getUTCMonth(), + nowLocal.getUTCDate() +); +const formatter = new Intl.DateTimeFormat( 'en-US', { + dateStyle: 'long', +} ); +const renewalDate = nowUTC.setDate( nowUTC.getDate() + 14 ); +const renewalDateFormatted = formatter.format( renewalDate ); +const productName = 'Subscription free trial product'; +const productSlug = 'subscription-free-trial-product'; +const customerBilling = config.addresses.customer.billing; +let orderId: string, subscriptionId: string; + +describeif( shouldRunSubscriptionsTests )( + 'Shopper: Subscriptions - Purchase Free Trial', + () => { + test( 'Merchant should be able to purchase a free trial', async ( { + browser, + } ) => { + const { shopperPage } = await getShopper( browser ); + // Just to be sure, empty the cart + await emptyCart( shopperPage ); + + // Open the subscription product, and verify that the + // 14-day free trial is shown in the product description + await goToProductPageBySlug( shopperPage, productSlug ); + await expect( + shopperPage + .locator( '.product' ) + .getByText( '/ month with a 14-day free trial' ) + ).toBeVisible(); + + // Add it to the cart and verify that the cart page shows the free trial details + await shopperPage + .getByRole( 'button', { name: 'Sign up now' } ) + .click(); + await goToCart( shopperPage ); + await expect( + shopperPage + .getByText( '/ month with a 14-day free trial' ) + .first() + ).toBeVisible(); + + // Also verify that the first renewal is 14 days from now + await expect( + shopperPage.getByText( + `First renewal: ${ renewalDateFormatted }` + ) + ).toBeVisible(); + + // Verify that the order total is $0.00 + await expect( + shopperPage.getByRole( 'cell', { name: /^Total: \$0\.00/ } ) + ).toBeVisible(); + + // Proceed to the checkout page and verify that the 14-day free trial is shown in the product line item, + // and that the first renewal date is 14 days from now. + await setupCheckout( shopperPage, customerBilling ); + await expect( + shopperPage + .locator( '#order_review' ) + .getByText( '/ month with a 14-day free trial' ) + ).toBeVisible(); + await expect( + shopperPage.getByText( + `First renewal: ${ renewalDateFormatted }` + ) + ).toBeVisible(); + + // Pay using a 3DS card + const card = config.cards[ '3dsOTP' ]; + await fillCardDetails( shopperPage, card ); + await shopperPage + .getByRole( 'button', { name: 'Sign up now' } ) + .click(); + await shopperPage.frames()[ 0 ].waitForLoadState( 'load' ); + await confirmCardAuthentication( shopperPage, true ); + await shopperPage.frames()[ 0 ].waitForLoadState( 'networkidle' ); + await shopperPage.waitForLoadState( 'networkidle' ); + await expect( + shopperPage.getByRole( 'heading', { + name: 'Order received', + } ) + ).toBeVisible(); + + // Get the order ID so we can open it in the merchant view + orderId = ( + await shopperPage.getByText( 'Order number:' ).innerText() + ) + .replace( /[^0-9]/g, '' ) + .trim(); + subscriptionId = ( + await shopperPage + .getByLabel( 'View subscription number' ) + .textContent() + ) + .trim() + .replace( '#', '' ); + } ); + + test( 'Merchant should be able to create an order with "Setup Intent"', async ( { + browser, + } ) => { + const { merchantPage } = await getMerchant( browser ); + await goToOrder( merchantPage, orderId ); + await expect( + merchantPage.getByText( 'Payment via Credit card /' ) + ).toHaveText( /\(seti_.*\)/ ); + + await goToSubscriptions( merchantPage ); + const subscriptionRow = merchantPage.getByRole( 'row', { + name: '#' + subscriptionId, + } ); + await expect( subscriptionRow.locator( 'mark' ) ).toHaveText( + 'Active' + ); + await expect( + subscriptionRow.getByRole( 'cell', { name: productName } ) + ).toBeVisible(); + await expect( + subscriptionRow.getByRole( 'cell', { name: /\$9.99 \/ month/ } ) + ).toBeVisible(); + await expect( + subscriptionRow.getByText( renewalDateFormatted ) + ).toHaveCount( 2 ); + } ); + } +); diff --git a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-free-trial.spec.js b/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-free-trial.spec.js deleted file mode 100644 index f360a24400c..00000000000 --- a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-free-trial.spec.js +++ /dev/null @@ -1,172 +0,0 @@ -/** - * External dependencies - */ -import config from 'config'; -const { merchant, shopper, withRestApi } = require( '@woocommerce/e2e-utils' ); -import { - RUN_SUBSCRIPTIONS_TESTS, - describeif, - merchantWCP, -} from '../../../utils'; -import { - fillCardDetails, - setupCheckout, - confirmCardAuthentication, -} from '../../../utils/payments'; - -const nowLocal = new Date(); -const nowUTC = new Date( - nowLocal.getUTCFullYear(), - nowLocal.getUTCMonth(), - nowLocal.getUTCDate() -); -const formatter = new Intl.DateTimeFormat( 'en-US', { - dateStyle: 'long', -} ); -const renewalDate = nowUTC.setDate( nowUTC.getDate() + 14 ); -const renewalDateFormatted = formatter.format( renewalDate ); -const productName = 'Subscription free trial product'; -const productSlug = 'subscription-free-trial-product'; -const customerBilling = config.get( - 'addresses.subscriptions-customer.billing' -); -let orderId; - -const testSelectors = { - productSubscriptionDetails: '.subscription-details', - cartSubscriptionFirstPaymentDate: '.first-payment-date', - cartOrderTotal: '.order-total', - checkoutSubscriptionDetails: '.subscription-details', - checkoutSubscriptionFirstPaymentDate: '.first-payment-date', - checkoutPlaceOrderButton: '#place_order', - checkoutOrderId: '.woocommerce-order-overview__order.order > strong', - wcOrderPaymentId: '.woocommerce-order-data__meta', - subscriptionStatus: '.subscription-status', - subscriptionProductName: '.order-item', - subscriptionRecurringTotal: '.recurring_total', - subscriptionTrialEnd: '.trial_end_date', -}; - -describeif( RUN_SUBSCRIPTIONS_TESTS )( - 'Subscriptions > Purchase subscription with free trial', - () => { - beforeAll( async () => { - // Delete the user, if present - await withRestApi.deleteCustomerByEmail( customerBilling.email ); - } ); - afterAll( async () => { - await merchant.logout(); - } ); - - it( 'should be able to purchase a subscription with free trial', async () => { - // Open the subscription product, and verify that the - // 14-day free trial is shown in the product description - await page.goto( config.get( 'url' ) + `product/${ productSlug }`, { - waitUntil: 'networkidle0', - } ); - await expect( page ).toMatchElement( - testSelectors.productSubscriptionDetails, - { - text: '/ month with a 14-day free trial', - } - ); - - // Add it to the cart and verify that the cart page shows the free trial details - await shopper.addToCart(); - await shopper.goToCart(); - await expect( page ).toMatchElement( - testSelectors.productSubscriptionDetails, - { - text: '/ month with a 14-day free trial', - } - ); - - // Also verify that the first renewal is 14 days from now - await expect( page ).toMatchElement( - testSelectors.cartSubscriptionFirstPaymentDate, - { - text: `First renewal: ${ renewalDateFormatted }`, - } - ); - - // Verify that the order total is $0.00 - await expect( page ).toMatchElement( testSelectors.cartOrderTotal, { - text: '$0.00', - } ); - - // Proceed to the checkout page and verify that the 14-day free trial is shown in the product line item, - // and that the first renewal date is 14 days from now. - await setupCheckout( customerBilling ); - await expect( page ).toMatchElement( - testSelectors.checkoutSubscriptionDetails, - { - text: '/ month with a 14-day free trial', - } - ); - await expect( page ).toMatchElement( - testSelectors.cartSubscriptionFirstPaymentDate, - { - text: `First renewal: ${ renewalDateFormatted }`, - } - ); - - // Pay using a 3DS card - const card = config.get( 'cards.3dsOTP' ); - await fillCardDetails( page, card ); - await expect( page ).toClick( - testSelectors.checkoutPlaceOrderButton - ); - await confirmCardAuthentication( page, true ); - await page.waitForNavigation( { - waitUntil: 'networkidle0', - } ); - await expect( page ).toMatchTextContent( 'Order received' ); - - // Get the order ID so we can open it in the merchant view - const orderIdField = await page.$( testSelectors.checkoutOrderId ); - orderId = await orderIdField.evaluate( ( el ) => el.innerText ); - - await shopper.logout(); - } ); - - it( 'should create an order with "Setup Intent"', async () => { - await merchant.login(); - - await merchant.goToOrder( orderId ); - await expect( page ).toMatchElement( - testSelectors.wcOrderPaymentId, - { - text: /\(seti_.*\)/, - } - ); - - await merchantWCP.openSubscriptions(); - - // Verify we have an active subscription for the product - await expect( page ).toMatchElement( - testSelectors.subscriptionStatus, - { - text: 'Active', - } - ); - await expect( page ).toMatchElement( - testSelectors.subscriptionProductName, - { - text: productName, - } - ); - await expect( page ).toMatchElement( - testSelectors.subscriptionRecurringTotal, - { - text: '$9.99 / month', - } - ); - await expect( page ).toMatchElement( - testSelectors.subscriptionTrialEnd, - { - text: renewalDateFormatted, - } - ); - } ); - } -);