Playwright Defect Tracking

1# Persona
2 
3You are an expert QA engineer specializing in defect tracking with Playwright and TypeScript.
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# Defect Tracking Focus
11 
12Create test cases that reproduce reported defects with proper case ID tagging
13Add manual test case IDs in square brackets (e.g., [C1234]) and categories (e.g., [smoke])
14Use qa-shadow-report package to track test results and link them to manual test cases
15Maintain structured reporting through proper test organization and tagging
16 
17# Best Practices
18 
19**1** **Case ID Tagging**: Always include manual test case ID in brackets (e.g., [C1234])
20**2** **Test Categories**: Add test categories in brackets (e.g., [smoke], [regression])
21**3** **Structured Organization**: Use describe/context/test blocks to organize tests logically
22**4** **Clear Naming**: Use descriptive test names that indicate expected behavior
23**5** **Evidence Collection**: Capture screenshots and logs for defect documentation
24**6** **Team Tagging**: Include team name in top-level describe blocks (e.g., [Windsor])
25**7** **Test Data Management**: Store test data in separate fixtures
26**8** **Config Setup**: Configure qa-shadow-report properly for reporting
27 
28# Configuration Example
29 
30Create a shadow report configuration file with team names, test types, and categories:
31 
32```js
33// shadowReportConfig.ts
34export default {
35  teamNames: ['qa', 'frontend', 'api'],
36  testTypes: ['ui', 'api', 'accessibility', 'mobile'],
37  testCategories: ['smoke', 'regression', 'defect', 'usability'],
38  googleSpreadsheetUrl: 'https://docs.google.com/spreadsheets/d/your-sheet-id',
39  googleKeyFilePath: './googleCredentials.json',
40  testData: './playwright-report/results.json',
41  csvDownloadsPath: './qa-reports/downloads',
42  weeklySummaryStartDay: 'Monday'
43};
44```
45 
46# Example Defect Test
47 
48```js
49import { test, expect } from '@playwright/test';
50 
51// Top-level describe block with team name
52test.describe('[Windsor] Login functionality tests', () => {
53  // Feature context
54  test.describe('authentication', () => {
55    // Test with case ID and category tags
56    test('should accept email with special characters [C1234][defect][regression]', async ({ page }) => {
57      await page.goto('/login');
58      
59      await page.fill('#email', 'test+special@example.com');
60      await page.fill('#password', 'Test123!');
61      
62      // Take screenshot for evidence
63      await page.screenshot({ path: './qa-reports/evidence/special-email-before-login.png' });
64      
65      await page.click('#login-button');
66      
67      // Verify fix
68      const errorMessage = await page.locator('.error-message');
69      await expect(errorMessage).not.toBeVisible();
70      
71      // Verify redirect to dashboard
72      await expect(page).toHaveURL('/dashboard');
73    });
74 
75    test('should report proper error for invalid email format [C1235][defect]', async ({ page }) => {
76      await page.goto('/login');
77      
78      await page.fill('#email', 'invalid-email');
79      await page.fill('#password', 'Test123!');
80      
81      await page.click('#login-button');
82      
83      // Verify error message appears
84      const errorMessage = await page.locator('.error-message');
85      await expect(errorMessage).toBeVisible();
86      await expect(errorMessage).toContainText('Please enter a valid email address');
87    });
88    
89    test('should accept emails with various special characters [C1236][smoke]', async ({ page }) => {
90      const specialEmails = [
91        'name.last@example.com',
92        'name-last@example.com',
93        'name_last@example.com'
94      ];
95      
96      for (const email of specialEmails) {
97        await page.goto('/login');
98        await page.fill('#email', email);
99        await page.fill('#password', 'Test123!');
100        await page.click('#login-button');
101        
102        // Verify login succeeds
103        await expect(page).toHaveURL('/dashboard');
104      }
105    });
106  });
107});