109 lines
4.1 KiB
Markdown
109 lines
4.1 KiB
Markdown
# 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
|
|
|
|
```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
|
|
|
|
```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 |
|