Cursor rule

1---
2description: Cypress network interception and API testing patterns (cy.intercept, service mocking, request/response validation)
3globs: **/*.cy.js,**/*.cy.ts,**/cypress/**/*.js,**/cypress/**/*.ts
4alwaysApply: false
5---
6# Cypress API Testing Excellence
7 
8## Network Interception Mastery
9- **Request/Response Mocking**: Control external API responses for reliable testing
10- **Network Monitoring**: Track and validate API calls during user interactions
11- **Error Simulation**: Test error handling and edge cases
12- **Performance Testing**: Monitor response times and optimize user experience
13 
14## Advanced API Interception
15```javascript
16// ✅ Comprehensive API interception setup
17describe('API Integration Tests', () => {
18  beforeEach(() => {
19    // Set up common API routes
20    cy.intercept('GET', '/api/users*', { fixture: 'users.json' }).as('getUsers')
21    cy.intercept('POST', '/api/users', { fixture: 'user-created.json' }).as('createUser')
22    cy.intercept('PUT', '/api/users/*', { fixture: 'user-updated.json' }).as('updateUser')
23    cy.intercept('DELETE', '/api/users/*', { statusCode: 204 }).as('deleteUser')
24  })
25 
26  it('should handle complete user CRUD operations', () => {
27    // Visit page and wait for initial data load
28    cy.visit('/users')
29    cy.wait('@getUsers').then((interception) => {
30      expect(interception.response.statusCode).to.equal(200)
31      expect(interception.response.body).to.have.property('users')
32    })
33 
34    // Create new user
35    cy.get('[data-cy=add-user-button]').click()
36    cy.get('[data-cy=user-form]').within(() => {
37      cy.get('[data-cy=first-name]').type('John')
38      cy.get('[data-cy=last-name]').type('Doe')
39      cy.get('[data-cy=email]').type('john.doe@example.com')
40      cy.get('[data-cy=submit-button]').click()
41    })
42 
43    cy.wait('@createUser').then((interception) => {
44      expect(interception.request.body).to.deep.include({
45        firstName: 'John',
46        lastName: 'Doe',
47        email: 'john.doe@example.com'
48      })
49      expect(interception.response.statusCode).to.equal(201)
50    })
51 
52    // Verify user appears in list
53    cy.get('[data-cy=user-list]')
54      .should('contain.text', 'John Doe')
55      .and('contain.text', 'john.doe@example.com')
56  })
57})
58```
59 
60## Dynamic Response Generation
61```javascript
62// ✅ Smart response generation based on request
63cy.intercept('GET', '/api/users/*', (req) => {
64  const userId = req.url.split('/').pop()
65  
66  // Generate different responses based on user ID
67  if (userId === '1') {
68    req.reply({ fixture: 'admin-user.json' })
69  } else if (userId === '404') {
70    req.reply({ statusCode: 404, body: { error: 'User not found' } })
71  } else {
72    req.reply({ fixture: 'regular-user.json' })
73  }
74}).as('getUser')
75 
76// ✅ Conditional responses based on request data
77cy.intercept('POST', '/api/login', (req) => {
78  const { email, password } = req.body
79  
80  if (email === 'admin@example.com' && password === 'admin123') {
81    req.reply({ fixture: 'admin-login-success.json' })
82  } else if (email === 'user@example.com' && password === 'user123') {
83    req.reply({ fixture: 'user-login-success.json' })
84  } else {
85    req.reply({ 
86      statusCode: 401, 
87      body: { error: 'Invalid credentials' } 
88    })
89  }
90}).as('login')
91 
92// ✅ Delayed responses for testing loading states
93cy.intercept('GET', '/api/heavy-data', (req) => {
94  req.reply({ 
95    fixture: 'large-dataset.json',
96    delay: 2000 // 2 second delay
97  })
98}).as('heavyData')
99 
100cy.visit('/dashboard')
101cy.get('[data-cy=loading-spinner]').should('be.visible')
102cy.wait('@heavyData')
103cy.get('[data-cy=loading-spinner]').should('not.exist')
104cy.get('[data-cy=data-table]').should('be.visible')
105```
106 
107## Error Handling and Edge Cases
108```javascript
109// ✅ Network error simulation
110describe('Network Error Handling', () => {
111  it('should handle server errors gracefully', () => {
112    // Simulate 500 server error
113    cy.intercept('POST', '/api/submit', {
114      statusCode: 500,
115      body: { error: 'Internal server error' }
116    }).as('serverError')
117 
118    cy.visit('/form-page')
119    cy.get('[data-cy=submit-form]').submit()
120    
121    cy.wait('@serverError')
122    cy.get('[data-cy=error-notification]')
123      .should('be.visible')
124      .and('contain.text', 'Something went wrong')
125  })
126 
127  it('should handle network connectivity issues', () => {
128    // Force network error
129    cy.intercept('GET', '/api/data', { forceNetworkError: true }).as('networkError')
130 
131    cy.visit('/dashboard')
132    cy.wait('@networkError')
133    
134    cy.get('[data-cy=offline-indicator]').should('be.visible')
135    cy.get('[data-cy=retry-button]').should('be.visible')
136  })
137 
138  it('should handle timeout scenarios', () => {
139    // Simulate very slow response
140    cy.intercept('GET', '/api/slow-endpoint', (req) => {
141      req.reply({ 
142        fixture: 'data.json',
143        delay: 30000 // 30 second delay
144      })
145    }).as('slowResponse')
146 
147    cy.visit('/page-with-timeout')
148    
149    // Should show timeout message
150    cy.get('[data-cy=timeout-message]', { timeout: 35000 })
151      .should('be.visible')
152  })
153})
154```
155 
156## API State Management Testing
157```javascript
158// ✅ Complex state management testing
159describe('API State Synchronization', () => {
160  beforeEach(() => {
161    // Set up realistic API responses
162    cy.fixture('shopping-cart.json').as('cartData')
163    cy.fixture('products.json').as('productsData')
164  })
165 
166  it('should maintain cart state across page navigation', () => {
167    // Initial cart state
168    cy.intercept('GET', '/api/cart', { body: { items: [], total: 0 } }).as('emptyCart')
169    
170    cy.visit('/shop')
171    cy.wait('@emptyCart')
172 
173    // Add item to cart
174    cy.intercept('POST', '/api/cart/items', (req) => {
175      const newItem = req.body
176      req.reply({ 
177        statusCode: 201,
178        body: {
179          items: [newItem],
180          total: newItem.price * newItem.quantity
181        }
182      })
183    }).as('addToCart')
184 
185    cy.get('[data-cy=product-1] [data-cy=add-to-cart]').click()
186    cy.wait('@addToCart')
187 
188    // Verify cart updates
189    cy.get('[data-cy=cart-count]').should('contain.text', '1')
190    cy.get('[data-cy=cart-total]').should('contain.text', '$29.99')
191 
192    // Navigate to different page
193    cy.intercept('GET', '/api/cart', '@cartData').as('getCart')
194    cy.visit('/profile')
195    cy.wait('@getCart')
196 
197    // Verify cart state persists
198    cy.get('[data-cy=cart-count]').should('contain.text', '1')
199  })
200})
201```
202 
203## Real-time Features Testing
204```javascript
205// ✅ WebSocket and real-time feature testing
206describe('Real-time Features', () => {
207  it('should handle live notifications', () => {
208    // Mock WebSocket connection
209    cy.visit('/dashboard', {
210      onBeforeLoad: (win) => {
211        // Mock WebSocket
212        const mockSocket = {
213          send: cy.stub(),
214          close: cy.stub(),
215          addEventListener: cy.stub()
216        }
217        
218        win.WebSocket = function() {
219          return mockSocket
220        }
221 
222        // Simulate incoming notification
223        setTimeout(() => {
224          const notificationEvent = new MessageEvent('message', {
225            data: JSON.stringify({
226              type: 'notification',
227              message: 'New message received',
228              timestamp: Date.now()
229            })
230          })
231          
232          // Trigger event handler if it exists
233          if (mockSocket.addEventListener.lastCall) {
234            const eventHandler = mockSocket.addEventListener.lastCall.args[1]
235            eventHandler(notificationEvent)
236          }
237        }, 1000)
238      }
239    })
240 
241    // Verify notification appears
242    cy.get('[data-cy=notification-toast]', { timeout: 5000 })
243      .should('be.visible')
244      .and('contain.text', 'New message received')
245  })
246 
247  it('should handle live data updates', () => {
248    let updateCount = 0
249    
250    cy.intercept('GET', '/api/live-data', (req) => {
251      updateCount++
252      req.reply({
253        body: {
254          value: `Live data update ${updateCount}`,
255          timestamp: Date.now()
256        }
257      })
258    }).as('liveData')
259 
260    cy.visit('/live-dashboard')
261    cy.wait('@liveData')
262 
263    // Initial data
264    cy.get('[data-cy=live-value]')
265      .should('contain.text', 'Live data update 1')
266 
267    // Simulate periodic updates
268    cy.clock()
269    cy.tick(5000) // Fast-forward 5 seconds
270    
271    cy.wait('@liveData')
272    cy.get('[data-cy=live-value]')
273      .should('contain.text', 'Live data update 2')
274  })
275})
276```
277 
278## Custom API Commands
279```javascript
280// ✅ Reusable API testing commands (in commands.js)
281Cypress.Commands.add('mockApiAuth', (userType = 'user') => {
282  const authData = {
283    user: { fixture: 'auth-user.json' },
284    admin: { fixture: 'auth-admin.json' },
285    guest: { statusCode: 401, body: { error: 'Unauthorized' } }
286  }
287 
288  cy.intercept('POST', '/api/auth/login', authData[userType]).as('login')
289  cy.intercept('GET', '/api/auth/me', authData[userType]).as('getCurrentUser')
290  cy.intercept('POST', '/api/auth/refresh', authData[userType]).as('refreshToken')
291})
292 
293Cypress.Commands.add('mockCrudApi', (resource, data = {}) => {
294  const baseUrl = `/api/${resource}`
295  
296  cy.intercept('GET', `${baseUrl}*`, data.list || { fixture: `${resource}-list.json` }).as(`get${resource}`)
297  cy.intercept('POST', baseUrl, data.create || { fixture: `${resource}-created.json` }).as(`create${resource}`)
298  cy.intercept('PUT', `${baseUrl}/*`, data.update || { fixture: `${resource}-updated.json` }).as(`update${resource}`)
299  cy.intercept('DELETE', `${baseUrl}/*`, data.delete || { statusCode: 204 }).as(`delete${resource}`)
300})
301 
302Cypress.Commands.add('waitForApiCall', (alias, expectedData = {}) => {
303  cy.wait(alias).then((interception) => {
304    expect(interception.response.statusCode).to.be.oneOf([200, 201, 204])
305    
306    if (expectedData.requestBody) {
307      expect(interception.request.body).to.deep.include(expectedData.requestBody)
308    }
309    
310    if (expectedData.responseBody) {
311      expect(interception.response.body).to.deep.include(expectedData.responseBody)
312    }
313  })
314})
315 
316// Usage in tests
317describe('Using Custom API Commands', () => {
318  beforeEach(() => {
319    cy.mockApiAuth('admin')
320    cy.mockCrudApi('users')
321  })
322 
323  it('should perform user management operations', () => {
324    cy.visit('/admin/users')
325    cy.waitForApiCall('@getusers')
326 
327    // Create user
328    cy.get('[data-cy=create-user]').click()
329    cy.get('[data-cy=user-form]').within(() => {
330      cy.get('[data-cy=name]').type('New User')
331      cy.get('[data-cy=email]').type('new@example.com')
332      cy.get('[data-cy=submit]').click()
333    })
334 
335    cy.waitForApiCall('@createusers', {
336      requestBody: { name: 'New User', email: 'new@example.com' }
337    })
338  })
339})
340 
341```