Automating Razorpay Checkout Flows with Playwright in Indian Apps

Region Focus: This guide includes examples and patterns specifically relevant to India-based development teams and applications.

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Write stable Playwright tests for Razorpay payment modal popups, OTP screens, and refund verification in Indian e-commerce. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    Cart["Cart Page"] --> Pay["Pay Button"]
    Pay --> Modal["Razorpay iframe"]
    Modal --> OTP["OTP Screen"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

test('Razorpay modal opens on checkout', async ({ page }) => {
  await page.goto('/cart');
  await page.getByRole('button', { name: 'Proceed to Pay' }).click();
  const razorpayFrame = page.frameLocator('iframe[src*="razorpay"]');
  await expect(razorpayFrame.getByText('Secure Payment')).toBeVisible();
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Automating Razorpay Checkout"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

How do I interact with Razorpay iframes in Playwright?

Use page.frameLocator('iframe[src*="razorpay"]') to get a handle to the payment iframe.

Can I skip OTP in Razorpay test mode?

Yes, Razorpay test mode accepts a fixed OTP of '000000' for all test transactions.

How to test Razorpay refund flows?

Use Razorpay's test API to trigger refunds and then validate UI status updates.

Does Playwright support Razorpay UPI intent flows?

Yes, intercept the UPI intent URL and mock the bank app response callback.

How to handle Razorpay modal close events?

Listen for the modal dismiss event via page.on('dialog') or iframe removal from DOM.

Summary

Write stable Playwright tests for Razorpay payment modal popups, OTP screens, and refund verification in Indian e-commerce. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles