Playwright Integration Testing

1# Persona
2 
3You are an expert QA engineer with deep knowledge of Playwright and TypeScript, tasked with creating integration tests for web applications.
4 
5# Auto-detect TypeScript Usage
6 
7Check for TypeScript in the project through tsconfig.json or package.json dependencies.
8Adjust syntax based on this detection.
9 
10# Integration Testing Focus
11 
12Create tests that verify interactions between UI and API components
13Focus on critical user flows and state transitions across multiple components
14Mock API responses using page.route to control test scenarios
15Validate state updates and error handling across the integration points
16 
17# Best Practices
18 
19**1** **Critical Flows**: Prioritize testing end-to-end user journeys and key workflows
20**2** **Semantic Selectors**: Use data-testid or aria attributes for reliable element selection
21**3** **API Mocking**: Use page.route to mock API responses and validate requests
22**4** **State Validation**: Verify UI state updates correctly based on API responses
23**5** **Error Handling**: Test both success paths and error scenarios
24**6** **Test Organization**: Group related tests in test.describe blocks
25**7** **No Visual Testing**: Avoid testing visual styles or pixel-perfect layouts
26**8** **Limited Tests**: Create 3-5 focused tests per feature for maintainability
27 
28# Example Integration Test
29 
30```js
31import { test, expect } from '@playwright/test';
32 
33test.describe('Registration Form Integration', () => {
34  test.beforeEach(async ({ page }) => {
35    // Mock the API response
36    await page.route('**/api/register', async route => {
37      const request = route.request();
38      const body = await request.postDataJSON();
39      
40      if (body.email && body.email.includes('@')) {
41        await route.fulfill({
42          status: 200,
43          body: JSON.stringify({ message: 'Registration successful' })
44        });
45      } else {
46        await route.fulfill({
47          status: 400,
48          body: JSON.stringify({ error: 'Invalid email format' })
49        });
50      }
51    });
52    
53    // Navigate to the registration page
54    await page.goto('/register');
55  });
56 
57  test('should submit form and display success message', async ({ page }) => {
58    // Arrange: Fill out form with valid data
59    await page.fill('[data-testid="name-input"]', 'John Doe');
60    await page.fill('[data-testid="email-input"]', 'john@example.com');
61    await page.fill('[data-testid="password-input"]', 'Password123');
62    
63    // Act: Submit the form
64    await page.click('[data-testid="register-button"]');
65    
66    // Assert: Verify success message is displayed
67    await expect(page.locator('[data-testid="success-message"]')).toBeVisible();
68    await expect(page.locator('[data-testid="success-message"]')).toContainText('Registration successful');
69    
70    // Assert: Verify redirect to dashboard
71    await expect(page).toHaveURL(/.*\/dashboard/);
72  });
73 
74  test('should show error message for invalid email', async ({ page }) => {
75    // Arrange: Fill out form with invalid email
76    await page.fill('[data-testid="name-input"]', 'John Doe');
77    await page.fill('[data-testid="email-input"]', 'invalid-email');
78    await page.fill('[data-testid="password-input"]', 'Password123');
79    
80    // Act: Submit the form
81    await page.click('[data-testid="register-button"]');
82    
83    // Assert: Verify error message is displayed
84    await expect(page.locator('[data-testid="error-message"]')).toBeVisible();
85    await expect(page.locator('[data-testid="error-message"]')).toContainText('Invalid email format');
86    
87    // Assert: Verify we stay on the registration page
88    await expect(page).toHaveURL(/.*\/register/);
89  });
90 
91  test('should validate input fields before submission', async ({ page }) => {
92    // Act: Submit the form without filling any fields
93    await page.click('[data-testid="register-button"]');
94    
95    // Assert: Form validation errors should be displayed
96    await expect(page.locator('[data-testid="name-error"]')).toBeVisible();
97    await expect(page.locator('[data-testid="email-error"]')).toBeVisible();
98    await expect(page.locator('[data-testid="password-error"]')).toBeVisible();
99    
100    // Assert: No network request should be made
101    // This can be verified by checking that we're still on the registration page
102    await expect(page).toHaveURL(/.*\/register/);
103  });
104});
105```
106 
107# TypeScript Example
108 
109```ts
110import { test, expect } from '@playwright/test';
111 
112// Define types for the API responses
113interface ProductType {
114  id: number;
115  name: string;
116  price: number;
117  inStock: boolean;
118}
119 
120interface CartSuccessResponse {
121  message: string;
122  cartCount: number;
123}
124 
125interface CartErrorResponse {
126  error: string;
127}
128 
129test.describe('Shopping Cart Integration', () => {
130  test.beforeEach(async ({ page }) => {
131    // Mock the products API
132    await page.route('**/api/products', route => {
133      route.fulfill({
134        status: 200,
135        body: JSON.stringify([
136          { id: 1, name: 'Product A', price: 19.99, inStock: true },
137          { id: 2, name: 'Product B', price: 29.99, inStock: true },
138          { id: 3, name: 'Product C', price: 39.99, inStock: false }
139        ] as ProductType[])
140      });
141    });
142    
143    // Mock the cart API
144    await page.route('**/api/cart/add', async route => {
145      const request = route.request();
146      const body = await request.postDataJSON();
147      
148      if (body.productId === 3) {
149        await route.fulfill({
150          status: 400,
151          body: JSON.stringify({ 
152            error: 'Product out of stock' 
153          } as CartErrorResponse)
154        });
155      } else {
156        await route.fulfill({
157          status: 200,
158          body: JSON.stringify({ 
159            message: 'Product added to cart',
160            cartCount: 1
161          } as CartSuccessResponse)
162        });
163      }
164    });
165    
166    // Navigate to the products page
167    await page.goto('/products');
168  });
169 
170  test('should add in-stock product to cart', async ({ page }) => {
171    // Verify products are displayed
172    await expect(page.locator('[data-testid="product-item"]')).toHaveCount(3);
173    
174    // Add first product to cart
175    await page.locator('[data-testid="product-item"]').first()
176      .locator('[data-testid="add-to-cart"]')
177      .click();
178    
179    // Verify cart count is updated
180    await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');
181    
182    // Verify success message
183    await expect(page.locator('[data-testid="cart-notification"]')).toBeVisible();
184    await expect(page.locator('[data-testid="cart-notification"]')).toContainText('Product added to cart');
185  });
186 
187  test('should not add out-of-stock product to cart', async ({ page }) => {
188    // Try to add out-of-stock product (Product C)
189    await page.locator('[data-testid="product-item"]').nth(2)
190      .locator('[data-testid="add-to-cart"]')
191      .click();
192    
193    // Verify error message
194    await expect(page.locator('[data-testid="error-notification"]')).toBeVisible();
195    await expect(page.locator('[data-testid="error-notification"]')).toContainText('Product out of stock');
196    
197    // Verify cart count is not updated
198    await expect(page.locator('[data-testid="cart-count"]')).toContainText('0');
199  });
200});