skills/playwright-pro/templates/checkout/order-confirm.md

Order Confirmation Template

Tests the success page and order details after checkout.

Prerequisites

• Completed order with ID {{orderId}}
• Authenticated session via {{authStorageStatePath}}
• App running at {{baseUrl}}

---

TypeScript

import { test, expect } from '@playwright/test';

test.describe('Order Confirmation', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  // Happy path: confirmation page content
  test('shows order confirmation with correct details', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByRole('heading', { name: /order confirmed|thank you/i })).toBeVisible();
    await expect(page.getByText('{{orderId}}')).toBeVisible();
    await expect(page.getByText('{{productName}}')).toBeVisible();
    await expect(page.getByText('{{orderTotal}}')).toBeVisible();
  });

  // Happy path: confirmation email notice
  test('shows confirmation email notice', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByText(/confirmation.*sent to|email.*{{username}}/i)).toBeVisible();
  });

  // Happy path: billing and shipping details shown
  test('displays shipping address on confirmation page', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByText('{{shippingAddress}}')).toBeVisible();
    await expect(page.getByText('{{billingAddress}}')).toBeVisible();
  });

  // Happy path: CTA navigates to order history
  test('"view your orders" link navigates to order history', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await page.getByRole('link', { name: /view.*orders|my orders/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/orders');
  });

  // Happy path: continue shopping CTA
  test('"continue shopping" returns to products', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await page.getByRole('link', { name: /continue shopping/i }).click();
    await expect(page).toHaveURL('{{baseUrl}}/products');
  });

  // Error case: accessing another user's order shows 403
  test('cannot access another user\'s confirmation page', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{otherUsersOrderId}}');
    await expect(page).toHaveURL(/\/403|\/dashboard/);
  });

  // Edge case: cart is empty after successful checkout
  test('cart is empty after order confirmed', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByRole('status', { name: /cart/i })).toContainText('0');
  });
});

---

JavaScript

const { test, expect } = require('@playwright/test');

test.describe('Order Confirmation', () => {
  test.use({ storageState: '{{authStorageStatePath}}' });

  test('shows order id and total on confirmation', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByRole('heading', { name: /order confirmed|thank you/i })).toBeVisible();
    await expect(page.getByText('{{orderId}}')).toBeVisible();
    await expect(page.getByText('{{orderTotal}}')).toBeVisible();
  });

  test('cart is empty after checkout', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{orderId}}');
    await expect(page.getByRole('status', { name: /cart/i })).toContainText('0');
  });

  test('cannot access another user\'s order', async ({ page }) => {
    await page.goto('{{baseUrl}}/order-confirmation/{{otherUsersOrderId}}');
    await expect(page).toHaveURL(/\/403|\/dashboard/);
  });
});

Variants

Variant	Description
Confirmation content	Order ID, product, total visible
Email notice	Confirmation email address shown
Shipping/billing	Addresses displayed
View orders CTA	Navigates to /orders
Continue shopping	Returns to /products
Unauthorized	Other user's order → 403
Cart cleared	Cart count = 0 after checkout