d33d03da50
Complete Claude Code plugin with: - 9 skills (/pw:init, generate, review, fix, migrate, coverage, testrail, browserstack, report) - 3 specialized agents (test-architect, test-debugger, migration-planner) - 55 test case templates across 11 categories (auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, notifications, API, accessibility) - TestRail MCP server (TypeScript) — 8 tools for bidirectional sync - BrowserStack MCP server (TypeScript) — 7 tools for cross-browser testing - Smart hooks (auto-validate tests, auto-detect Playwright projects) - 6 curated reference docs (golden rules, locators, assertions, fixtures, pitfalls, flaky tests) - Leverages Claude Code built-ins (/batch, /debug, Explore subagent) - Zero-config for core features; TestRail/BrowserStack via env vars - Both TypeScript and JavaScript support throughout Co-authored-by: Leo <leo@openclaw.ai>
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 |
|