mohamed Said Ibrahim

Posted on Oct 2 • Originally published at Medium

From Cypress to Playwright: Solving 5 Common Test Automation Challenges

#javascript #testing #automation #cypress

From Cypress to Playwright: Solving 5 Common Test Automation Challenges

Cypress is an excellent front-end testing tool, but it has certain architectural constraints that can make some real-world scenarios…

From Cypress to Playwright: Solving 5 Common Test Automation Challenges

Cypress is an excellent front-end testing tool, but it has certain architectural constraints that can make some real-world scenarios challenging.

If you’ve ever struggled with multiple user sessions, parallel execution, long test timeouts, file uploads, or network mocking in Cypress, you might be surprised to find how naturally Playwright handles these use cases.

In this guide, we’ll walk through how to address each of these problems using Playwright, with clear explanations, code examples, and best practices.

Playwright

1. Multiple User Sessions

The Cypress Challenge:

Cypress runs all tests in a single browser context by default, making it tricky to switch between different logged-in users within the same test.

The Playwright Solution:

Playwright supports multiple browser contexts out of the box, allowing completely isolated sessions that can run in the same browser instance.

Example:

import { test, expect } from '@playwright/test';  

test('Multiple user sessions in one test', async ({ browser }) => {  
  const adminContext = await browser.newContext();  
  const adminPage = await adminContext.newPage();  
  await adminPage.goto('/login');  
  await adminPage.fill('#username', 'admin');  
  await adminPage.fill('#password', 'adminPass');  
  await adminPage.click('button\[type="submit"\]');  
  await expect(adminPage).toHaveURL('/admin-dashboard');  
  const userContext = await browser.newContext();  
  const userPage = await userContext.newPage();  
  await userPage.goto('/login');  
  await userPage.fill('#username', 'user');  
  await userPage.fill('#password', 'userPass');  
  await userPage.click('button\[type="submit"\]');  
  await expect(userPage).toHaveURL('/user-dashboard');  
});

Why It’s Better:

No hacks or plugins — each context is isolated, with its own cookies, local storage, and session data.

2. Parallel Testing

The Cypress Challenge:

Parallel testing in Cypress requires the Dashboard service or manual spec splitting in CI.

The Playwright Solution:

Playwright Test natively supports parallel execution via worker processes — no external service needed.

Enabling Parallel Execution:

// playwright.config.ts

import { defineConfig } from '@playwright/test';  

export default defineConfig({  
  workers: 4, // Number of parallel workers  
});

CLI Example:

npx playwright test --workers=4

Why It’s Better:

You control parallelism locally or in CI without extra paid services, and Playwright automatically distributes tests across workers.

3. Handling Long-Running Tests (Timeouts)

The Cypress Challenge:

Cypress requires changing defaultCommandTimeout or per-command timeouts, and relies heavily on retries.

The Playwright Solution:

Playwright lets you adjust global, per-test, or per-action timeouts directly.

Global Timeout:

// playwright.config.ts

export default defineConfig({  
  timeout: 120000, // 2 minutes for each test  
});

**Per-Test Timeout:**

test('slow test', async ({ page }) => {  
  test.setTimeout(90000); // 90 seconds  
  await page.goto('/slow-page');  
});

Per-Action Timeout:

await page.click('#slow-button', { timeout: 30000 });

Why It’s Better:

You have fine-grained control over timeouts without changing framework-wide behavior.

4. Uploading Files

The Cypress Challenge:

File uploads require installing cypress-file-upload or similar plugins.

The Playwright Solution:

File upload support is built-in with setInputFiles().

Example:

test('File upload', async ({ page }) => {  
  await page.goto('/upload');  
  await page.setInputFiles('input\[type="file"\]', 'tests/fixtures/sample.pdf');  
  await page.click('#upload-button');  
  await expect(page.locator('#upload-success')).toBeVisible();  
});

Why It’s Better:

No plugins, no extra configuration — works for both single and multiple files, and supports drag-and-drop via locator targeting.

5. Network Requests: `cy.request()` vs `cy.intercept()`

The Cypress Challenge:

cy.request() is used for direct API calls.
cy.intercept() is for mocking/spying on network calls. Both require different syntaxes and contexts.

The Playwright Solution:

Playwright combines network interception and direct HTTP requests in a unified, flexible API.

Direct API Request (like **cy.request()**):

const apiContext = await request.newContext();  
const response = await apiContext.post('/api/login', {  
  data: { username: 'admin', password: 'adminPass' }  
});  
expect(response.status()).toBe(200);

**Intercept and Mock (like** `**cy.intercept()**`**):**

await page.route('\*\*/api/items', route => {  
  route.fulfill({  
    status: 200,  
    contentType: 'application/json',  
    body: JSON.stringify(\[{ id: 1, name: 'Mocked Item' }\]),  
  });  
});  

await page.goto('/items');  
await expect(page.locator('.item')).toHaveText('Mocked Item');

Why It’s Better:

Playwright lets you intercept, modify, or mock before the request is made, with full control over timing and response.

Final Thoughts

For developers migrating from Cypress to Playwright, these five areas — sessions, parallelism, timeouts, file uploads, and network control — show just how much flexibility Playwright offers out of the box.

Quick Comparison Table:

Quick Comparison Table

By mastering these Playwright features, you’ll handle complex automation scenarios more efficiently and with cleaner, more maintainable code.

You have read about: Playwright vs Cypress, Playwright multiple user sessions, Playwright parallel testing, Playwright timeouts, Playwright file upload, Playwright API testing, Playwright network mocking, Cypress limitations Playwright solutions.