How to Test Shopify Checkout End to End: Complete 2026 Guide

Starting from a product page, add the item to cart, proceed through information, shipping, and payment steps, and land on the order confirmation page. This exercises the full multi-step flow that real customers experience.

Preconditions

• Development store running with bogus gateway or Shopify Payments test mode enabled
• At least one published product with inventory available
• At least one shipping rate configured for the test address region
• Storefront password bypassed via global setup

Playwright Implementation

Shopify Payments Test Mode Variant

If your development store uses Shopify Payments in test mode instead of the bogus gateway, the payment fields are rendered inside iframes similar to Stripe. You need to use frameLocator to reach the card inputs.

// Shopify Payments test mode: card fields are in iframes
const cardFrame = page.frameLocator(
  'iframe[id*="card-fields-number"]'
);
await cardFrame.getByPlaceholder(/card number/i)
  .fill('4242 4242 4242 4242');

const expiryFrame = page.frameLocator(
  'iframe[id*="card-fields-expiry"]'
);
await expiryFrame.getByPlaceholder(/expiration/i).fill('12/34');

const cvvFrame = page.frameLocator(
  'iframe[id*="card-fields-verification"]'
);
await cvvFrame.getByPlaceholder(/security code/i).fill('123');

const nameField = page.getByLabel(/name on card/i);
if (await nameField.isVisible().catch(() => false)) {
  await nameField.fill('Jane Tester');
}

test('discount code applies and reduces total correctly', async ({ page }) => {
  const storeUrl = process.env.SHOPIFY_STORE_URL!;

  // Navigate to product and add to cart
  await page.goto(`${storeUrl}/products/test-product`);
  await page.getByRole('button', { name: /add to cart/i }).click();
  await page.goto(`${storeUrl}/cart`);
  await page.getByRole('button', { name: /check out/i }).click();
  await page.waitForURL(/\/checkouts\//);

  // Capture the original subtotal before applying the discount
  const subtotalBefore = await page
    .locator('[data-checkout-subtotal-price-target]')
    .textContent()
    .catch(() => null);

  // Apply discount code
  await page.getByLabel(/discount/i).fill('SAVE20');
  await page.getByRole('button', { name: /apply/i }).click();

  // Wait for discount to appear in the order summary
  await expect(page.getByText(/SAVE20/i)).toBeVisible({ timeout: 10_000 });
  await expect(page.getByText(/-\$/)).toBeVisible();

  // Verify the total has decreased
  const totalAfterDiscount = await page
    .locator('[data-checkout-total-price-target]')
    .textContent();
  expect(totalAfterDiscount).toBeTruthy();

  // Fill information and proceed through remaining steps
  await page.getByLabel(/email/i).fill(`discount+${Date.now()}@assrt.ai`);
  await page.getByLabel(/first name/i).fill('Discount');
  await page.getByLabel(/last name/i).fill('Tester');
  await page.getByLabel(/address/i).first().fill('456 Coupon Lane');
  await page.getByLabel(/city/i).fill('San Francisco');
  await page.getByLabel(/state/i).selectOption('California');
  await page.getByLabel(/zip/i).fill('94102');

  await page.getByRole('button', { name: /continue to shipping/i }).click();
  await expect(page.getByText(/shipping method/i)).toBeVisible({
    timeout: 15_000,
  });

  // Verify discount is still visible after step transition
  await expect(page.getByText(/SAVE20/i)).toBeVisible();

  await page.getByRole('button', { name: /continue to payment/i }).click();

  // Verify discount persists on the payment step
  await expect(page.getByText(/SAVE20/i)).toBeVisible();

  // Complete payment and verify order
  await page.getByLabel(/card number/i).fill('1');
  await page.getByLabel(/name on card/i).fill('Bogus Gateway');
  await page.getByLabel(/expiration/i).fill('12/34');
  await page.getByLabel(/security code/i).fill('123');

  await page.getByRole('button', { name: /pay now|complete order/i }).click();
  await expect(page.getByText(/order confirmed|thank you/i)).toBeVisible({
    timeout: 30_000,
  });

  // Verify the discount appears on the confirmation page
  await expect(page.getByText(/SAVE20/i)).toBeVisible();
});

Also Test Invalid and Expired Codes

Create tests for discount codes that have expired, codes that have hit their usage limit, and codes that do not apply to the products in the cart. Shopify renders inline error messages for each case, and your test should assert the specific error text and confirm that the total remains unchanged.

test('account checkout with saved address', async ({ page }) => {
  const storeUrl = process.env.SHOPIFY_STORE_URL!;

  // Log in as the test customer
  await page.goto(`${storeUrl}/account/login`);
  await page.getByLabel(/email/i).fill('returning-customer@assrt.ai');
  await page.getByLabel(/password/i).fill(process.env.TEST_CUSTOMER_PASSWORD!);
  await page.getByRole('button', { name: /sign in|log in/i }).click();
  await page.waitForURL(/\/account/);

  // Add product and proceed to checkout
  await page.goto(`${storeUrl}/products/test-product`);
  await page.getByRole('button', { name: /add to cart/i }).click();
  await page.goto(`${storeUrl}/cart`);
  await page.getByRole('button', { name: /check out/i }).click();
  await page.waitForURL(/\/checkouts\//);

  // Verify saved address is pre-populated
  await expect(page.getByText(/123 Test Street/i)).toBeVisible({
    timeout: 10_000,
  });

  // If multiple addresses exist, select the primary one
  const addressSelector = page.getByLabel(/saved addresses/i);
  if (await addressSelector.isVisible().catch(() => false)) {
    await addressSelector.selectOption({ index: 0 });
  }

  // Continue through shipping and payment
  await page.getByRole('button', { name: /continue to shipping/i }).click();
  await expect(page.getByText(/shipping method/i)).toBeVisible({
    timeout: 15_000,
  });

  await page.getByRole('button', { name: /continue to payment/i }).click();

  // Use bogus gateway to pay
  await page.getByLabel(/card number/i).fill('1');
  await page.getByLabel(/name on card/i).fill('Bogus Gateway');
  await page.getByLabel(/expiration/i).fill('12/34');
  await page.getByLabel(/security code/i).fill('123');

  await page.getByRole('button', { name: /pay now|complete order/i }).click();
  await expect(page.getByText(/order confirmed|thank you/i)).toBeVisible({
    timeout: 30_000,
  });

  // Verify the shipping address on the confirmation matches the saved address
  await expect(page.getByText(/123 Test Street/i)).toBeVisible();
});

The key assertion here is that the saved address appears on the confirmation page, not just on the information step. This catches the bug where the address selector displays one address but submits a different address ID to the checkout API.

test('express checkout buttons render and card fallback works', async ({ page }) => {
  const storeUrl = process.env.SHOPIFY_STORE_URL!;

  await page.goto(`${storeUrl}/products/test-product`);
  await page.getByRole('button', { name: /add to cart/i }).click();
  await page.goto(`${storeUrl}/cart`);
  await page.getByRole('button', { name: /check out/i }).click();
  await page.waitForURL(/\/checkouts\//);

  // Assert that express checkout section exists
  const expressSection = page.locator(
    '[data-shopify-buy-now], [data-express-checkout]'
  );

  // Shop Pay button should be visible when enabled
  const shopPayButton = page.locator(
    'iframe[src*="shop-pay"], [data-testid="ShopPay"]'
  );
  const shopPayVisible = await shopPayButton
    .first()
    .isVisible({ timeout: 5_000 })
    .catch(() => false);

  if (shopPayVisible) {
    // Verify Shop Pay iframe loads without errors
    await expect(shopPayButton.first()).toBeAttached();
  }

  // Regardless of express buttons, the standard form must work
  await page.getByLabel(/email/i).fill(`express+${Date.now()}@assrt.ai`);
  await page.getByLabel(/first name/i).fill('Express');
  await page.getByLabel(/last name/i).fill('Tester');
  await page.getByLabel(/address/i).first().fill('789 Wallet Ave');
  await page.getByLabel(/city/i).fill('San Francisco');
  await page.getByLabel(/state/i).selectOption('California');
  await page.getByLabel(/zip/i).fill('94102');

  await page.getByRole('button', { name: /continue to shipping/i }).click();
  await expect(page.getByText(/shipping method/i)).toBeVisible({
    timeout: 15_000,
  });

  await page.getByRole('button', { name: /continue to payment/i }).click();

  await page.getByLabel(/card number/i).fill('1');
  await page.getByLabel(/name on card/i).fill('Bogus Gateway');
  await page.getByLabel(/expiration/i).fill('12/34');
  await page.getByLabel(/security code/i).fill('123');

  await page.getByRole('button', { name: /pay now|complete order/i }).click();
  await expect(page.getByText(/order confirmed|thank you/i)).toBeVisible({
    timeout: 30_000,
  });
});

Shop Pay Redirect Validation

If you need to validate that clicking Shop Pay initiates the correct redirect, you can intercept the navigation and assert the URL without completing the wallet flow. Use page.waitForURL(/shop\\.app/) or check the request target with page.on('request') to verify the redirect points to the correct Shop Pay domain. This confirms your integration configuration is correct even though Playwright cannot complete the wallet authentication.

test('international checkout displays duties and correct currency', async ({ page }) => {
  const storeUrl = process.env.SHOPIFY_STORE_URL!;

  await page.goto(`${storeUrl}/products/test-product`);
  await page.getByRole('button', { name: /add to cart/i }).click();
  await page.goto(`${storeUrl}/cart`);
  await page.getByRole('button', { name: /check out/i }).click();
  await page.waitForURL(/\/checkouts\//);

  // Fill information with a UK address
  await page.getByLabel(/email/i).fill(`intl+${Date.now()}@assrt.ai`);
  await page.getByLabel(/country/i).selectOption('United Kingdom');
  await page.getByLabel(/first name/i).fill('International');
  await page.getByLabel(/last name/i).fill('Buyer');
  await page.getByLabel(/address/i).first().fill('10 Downing Street');
  await page.getByLabel(/city/i).fill('London');
  await page.getByLabel(/postal code|zip/i).fill('SW1A 2AA');

  // Phone field is often required for international orders
  const phoneField = page.getByLabel(/phone/i);
  if (await phoneField.isVisible().catch(() => false)) {
    await phoneField.fill('+44 20 7946 0958');
  }

  await page.getByRole('button', { name: /continue to shipping/i }).click();
  await expect(page.getByText(/shipping method/i)).toBeVisible({
    timeout: 15_000,
  });

  // Assert that international shipping options are shown
  await expect(
    page.getByText(/international|worldwide|standard shipping/i)
  ).toBeVisible();

  await page.getByRole('button', { name: /continue to payment/i }).click();

  // If Shopify Markets is configured, duties should appear
  const dutiesLine = page.getByText(/duties|import tax/i);
  const dutiesVisible = await dutiesLine
    .isVisible({ timeout: 5_000 })
    .catch(() => false);

  if (dutiesVisible) {
    // Assert duties are a positive value, not zero
    const dutiesText = await dutiesLine.textContent();
    expect(dutiesText).toMatch(/[£€]\d+\.\d{2}/);
  }

  // Assert currency matches the market (GBP for UK)
  const totalText = await page
    .locator('[data-checkout-total-price-target]')
    .textContent()
    .catch(() => '');
  // Total should show GBP or the store's configured currency
  expect(totalText).toBeTruthy();

  // Complete payment
  await page.getByLabel(/card number/i).fill('1');
  await page.getByLabel(/name on card/i).fill('Bogus Gateway');
  await page.getByLabel(/expiration/i).fill('12/34');
  await page.getByLabel(/security code/i).fill('123');

  await page.getByRole('button', { name: /pay now|complete order/i }).click();
  await expect(page.getByText(/order confirmed|thank you/i)).toBeVisible({
    timeout: 30_000,
  });
});

Run this test with multiple country addresses to cover your primary markets. Each market may have different tax rules, duty calculation providers, and currency rounding behavior. Parameterize the test with an array of address fixtures so you can add new markets without duplicating the test body.

test('abandoned checkout is recorded and recovery URL works', async ({
  page,
  request,
}) => {
  const storeUrl = process.env.SHOPIFY_STORE_URL!;
  const email = `abandon+${Date.now()}@assrt.ai`;

  // Start checkout but do not complete it
  await page.goto(`${storeUrl}/products/test-product`);
  await page.getByRole('button', { name: /add to cart/i }).click();
  await page.goto(`${storeUrl}/cart`);
  await page.getByRole('button', { name: /check out/i }).click();
  await page.waitForURL(/\/checkouts\//);

  // Capture the checkout URL for later
  const checkoutUrl = page.url();

  // Enter email (this is what triggers abandoned checkout tracking)
  await page.getByLabel(/email/i).fill(email);
  await page.getByLabel(/first name/i).fill('Abandoned');
  await page.getByLabel(/last name/i).fill('Cart');
  await page.getByLabel(/address/i).first().fill('999 Forgot Lane');
  await page.getByLabel(/city/i).fill('San Francisco');
  await page.getByLabel(/state/i).selectOption('California');
  await page.getByLabel(/zip/i).fill('94102');

  // Navigate away without completing the order
  await page.goto(`${storeUrl}/`);

  // Verify abandoned checkout via Shopify Admin API
  const adminUrl = `${storeUrl}/admin/api/2024-01/checkouts.json?status=open`;
  const res = await request.get(adminUrl, {
    headers: {
      'X-Shopify-Access-Token': process.env.SHOPIFY_ADMIN_API_TOKEN!,
    },
  });
  const body = await res.json();
  const abandoned = body.checkouts?.find(
    (c: any) => c.email === email
  );
  expect(abandoned).toBeTruthy();
  expect(abandoned.abandoned_checkout_url).toBeTruthy();

  // Verify the recovery URL loads the checkout with pre-filled data
  await page.goto(abandoned.abandoned_checkout_url);
  await expect(page.getByLabel(/email/i)).toHaveValue(email);
});

In CI, you may not want to wait for the 10-hour abandonment window. Instead, query the Admin API immediately after the browser leaves the checkout. The checkout record exists as soon as the email is submitted, even though Shopify will not flag it as "abandoned" until the timeout elapses. For testing purposes, confirming the record exists and the recovery URL is valid is sufficient.