When I opened the task, I realised it was based on Playwright. Since most of my experience is in Cypress, the first thing I did was look at the equivalent commands between Cypress and Playwright.

Cypress vs Playwright Quick Reference & Example

// Cypress
cy.visit('/login');
cy.get('#username').type('myuser');
cy.get('#password').type('mypassword');
cy.get('button[type="submit"]').click();
cy.should('contain', 'Welcome');

// Playwright
await page.goto('/login');
await page.locator('#username').fill('myuser');
await page.locator('#password').fill('mypassword');
await page.locator('button[type="submit"]').click();
await expect(page.locator('body')).toContainText('Welcome'); 
// or await expect(page).toHaveURL('/dashboard'); 
This was to give me an idea how the nomenclature is different in both tools

1. Fixing the Existing Playwright Test (tests.spec.ts)

What Was There Before?

• Typo in selector: hasText("Produts") instead of "Products".
• Fixed timeout (waitForTimeout(1000)) instead of Playwright’s built-in waiting.
• Unreliable selector for navigation using filter({ hasText: ... }) in a nested way.
• Screenshot was overwritten (screenshot.png was always replaced).
• No explicit check for the correct URL after clicking “Donations”.

Improvements Made

✅ Fixed the selector: Used hasText("Products") instead.

✅ Replaced waitForTimeout(1000) with expect(page).toHaveURL(/donations/).

✅ Used :has-text() instead of nested locators for better readability.

✅ Improved screenshot handling: Used toISOString().replace(/[:.]/g, "-") to ensure unique filenames.

✅ Explicitly validated page content to ensure successful navigation.

What Could Be Further Improved?

• Introduce better error handling in case the navigation fails.
• Add logging to record test execution status.