How to Test UPI Payment Status Pages with Screenshot Comparisons

Test UPI success, pending and failure states as separate, deterministic UI scenarios. First assert the status and its explanation in the page, then compare a screenshot in a consistent browser environment. A visual match can catch layout and presentation regressions; it cannot prove that a payment cleared or that a bank account was credited.

Why UPI status states need separate tests

A payment status page communicates a system outcome, not just a color or icon. A green check, an orange spinner or a red warning is not enough if the words, next step or underlying UI state are wrong. NPCI’s UPI Help examples show approved, pending and failed transactions as distinct states, including a pending sequence with “Payment Initiated,” “Payment Processing” and “Confirmation Awaited.” These are interface examples, not a required layout or wording for every merchant or payment service provider. NPCI UPI Help Guidelines.

#	Preview	Product	Price
1		SumUp Terminal SumUp Touch POS Terminal – Accepts Contactless, Chip & PIN, Apple & Google Pay +...	$249.00	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

Include product-specific timeout, reversal or other outcomes where your application presents them. NPCI describes technical declines as declines for reasons such as system unavailability or network issues, and deemed-approved cases as those without online beneficiary-bank credit confirmation. These distinctions are a reminder to test the message your system intends to show rather than infer the state from styling. NPCI UPI ecosystem statistics glossary.

Build a safe, deterministic state matrix

Feed the page controlled fixture data instead of initiating a real payment. Use synthetic identifiers and contact details in every environment, including local development and CI; screenshots can be retained, uploaded to build logs or shared during review.

#1 Best Overall

SumUp Terminal SumUp Touch POS Terminal – Accepts Contactless, Chip & PIN, Apple & Google Pay + Instant Printing, Long Battery, No Monthly Fees

• Effortless payments and printing: Accept card payments and print payment receipts on the spot with the built-in 40 mm thermal printer.
• Faster sales processing: Use pre-set menus and catalogs to make transactions faster and smoother for you and your customers.
• Reliable and portable: Featuring a 6.5" HD touchscreen made from Corning Gorilla Glass and a powerful battery that lasts all day.
• Seamless connectivity: Stay connected with free mobile data and WiFi, ensuring uninterrupted transactions.
• Real-time payment tracking: Monitor payments and issue refunds right from your device, so you're always in control.

$249.00

Buy on Amazon

Also include boundary fixtures that matter to your supported scope: long payee names, long synthetic references, supported localized currency or amount formats, and text that wraps on narrow screens. Freeze generated IDs and timestamps with fixture data. If their changing values are not under test, mask only those values—not the field labels or surrounding status information.

Assert meaning before comparing pixels

Use semantic assertions for the visible status, explanation and key transaction fields before taking a screenshot. The screenshot then checks presentation: hierarchy, spacing, wrapping, colors, missing elements and unexpected visual changes. Keep assertions aligned with the actual accessible UI—for example, a status heading or an appropriately labelled region—rather than relying on brittle selectors tied to incidental styling.

For pending, assert both the pending status and its explanatory guidance. For failure, assert the failure message and next step. For success, assert an unambiguous confirmation. If the page displays amount, payee, timestamp or a transaction/reference identifier, verify the synthetic fixture values and their labels too. A pixel comparison cannot tell you whether a reference belongs to the correct transaction or whether backend state is accurate.

Example: Playwright screenshot checks

Playwright Test supports page and locator screenshot assertions through toHaveScreenshot(). On an initial run it creates reference images; later runs compare against them. The assertion waits for two consecutive screenshots to match before comparing, which helps with settling but does not replace explicit control of asynchronous page data. See the Playwright visual comparisons documentation.

Example fixture-driven test (adjust the URL, selectors and fixture wiring to match your application):

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

const cases = [
  {
    name: 'approved',
    path: '/test/payment-status?fixture=approved',
    status: 'Payment successful',
    explanation: 'Your payment is confirmed.',
  },
  {
    name: 'pending',
    path: '/test/payment-status?fixture=pending',
    status: 'Payment pending',
    explanation: 'We are waiting for confirmation. Check again later.',
  },
  {
    name: 'failed',
    path: '/test/payment-status?fixture=failed',
    status: 'Payment failed',
    explanation: 'The payment was not completed. Try again or contact support.',
  },
];

test.describe('UPI payment status presentation', () => {
  for (const scenario of cases) {
    test(scenario.name, async ({ page }) => {
      await page.goto(scenario.path);

      const card = page.getByTestId('payment-status');
      await expect(card.getByRole('heading')).toHaveText(scenario.status);
      await expect(card.getByTestId('status-explanation'))
        .toHaveText(scenario.explanation);
      await expect(card.getByTestId('amount')).toHaveText('₹1,250.00');
      await expect(card.getByTestId('payee')).toHaveText('Example Store');
      await expect(card.getByTestId('reference'))
        .toHaveText('TEST-REF-000123');

      await expect(card).toHaveScreenshot(`upi-${scenario.name}.png`);
    });
  }
});

The sample strings and selectors are illustrative test values, not prescribed UPI wording. Keep fixture routes unavailable to production users, or inject state through a test-only API or mock. If your design uses different field names or omits a field, adapt the assertions to what it actually displays.

Control the rendering environment and capture scope

Reference and current captures are most useful when they come from the same browser project and rendering setup. Playwright notes: “Browser rendering can vary between the host OS, version, settings, hardware, power source (battery vs. power adapter), headless mode, and other factors.” Playwright, Visual comparisons.

• Pin the browser project/version and use the same CI image or operating system for baseline creation and comparison where practical.
• Set viewport, device scale factor, locale, timezone and color scheme explicitly. Keep fonts and browser settings consistent.
• Wait for the fixture response and critical UI to finish loading. Ensure fonts are ready; disable or freeze animations when they create irrelevant motion.
• Use a component/card snapshot to focus on the status surface and a full-page snapshot to catch page-level layout issues. Keep distinct baselines for intentionally different browsers, operating systems or viewport sizes.
• Mask or hide only unstable material that is not under test. Masking the status, key guidance, amount or other meaningful content can conceal the regression you meant to catch.

Choose comparison thresholds based on observed rendering noise in your setup. A wide tolerance can hide meaningful changes; a zero-difference requirement can flag harmless noise. Start conservatively, inspect the diffs and document why any pixel, ratio or color threshold is appropriate. There is no universally correct threshold for every app.

Review diffs instead of blindly updating baselines

A changed reference image represents a changed expectation, not proof that the new page is correct. When a comparison fails, inspect the rendered page and diff alongside the state fixture and semantic assertions. Update the baseline only after confirming that the UI change is intentional and the right status remains visible and understandable. Keep review evidence free of real UPI IDs, phone numbers, account information and transaction references.

What screenshot tests can—and cannot—establish

A screenshot can show that a particular browser rendered a particular UI state. It can detect visual changes to status hierarchy, text wrapping, clipping, color treatment and the presence or absence of elements. Pair it with semantic assertions to check the visible text and critical fields.

Neither a passing screenshot nor a matching label verifies the payment’s actual backend or bank outcome. Validate status transitions and transaction state through your application’s authoritative backend or payment integration tests. Google Pay’s India web integration documentation, for example, describes an API applicable to Android devices with Chrome and discusses payment-status checks and unique transaction IDs; that integration-specific context does not make a visual test evidence of completed payment. Google Pay for India web integration.

NPCI’s FAQ says users can find past and pending transactions in transaction history and describes delayed beneficiary-bank processing for pending transactions. Its FAQ entry gives a 48-hour arrival expectation, but that is customer guidance that can change and may not apply to every bank, app or case. Check the live NPCI UPI FAQ and the relevant bank or app guidance before putting a timeline into customer-facing copy. A screenshot test cannot resolve a real debit, credit or payment dispute.

Troubleshoot common visual-test failures

• Screenshot differs on every run: Check for timestamps, generated references, animation, late-loading fonts or content, and inconsistent browser/OS environments. Freeze fixture values and wait for the relevant UI to settle before changing thresholds.
• The screenshot passes but the wrong status appears: Add or correct semantic assertions before the screenshot. Confirm the test loaded the intended fixture rather than a default, cached or stale state.
• Mobile baseline clips text: Set an explicit supported mobile viewport and device scale factor, and add a separate baseline. Check long synthetic names and identifiers for wrapping, overflow and visibility of the primary status.
• Large diffs after an intended redesign: Verify the fixture and semantic checks first, inspect the changed regions, then update only the relevant baseline once the new design is approved.
• Small noisy diffs obscure useful changes: Stabilize fonts, rendering environment and dynamic UI before considering a documented threshold. Do not mask the status label or user guidance to make the test pass.
• Pending copy asserts but progress looks wrong: Assert the pending state’s progress affordance or stages as well as its text if those are part of the design. A generic status assertion alone will not catch a missing or reordered sequence.

Or skip the browser setup

If you need a rendered capture outside your Playwright suite, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return an image or PDF, and its options include full-page capture, CSS-selector element capture, device and viewport settings, custom CSS and JavaScript, waits, request blocking and more. For a controlled test fixture page, the basic call is:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-test-site.example/payment-status?fixture=pending -o shot.webp

See the ScreenshotNeo API documentation for setup and parameters. Use a test-only page with synthetic data; an API screenshot still verifies rendered output, not payment settlement. ScreenshotNeo removes cookie banners, popups and chat widgets before the shot; bot checks, blank pages and failed loads are never billed; an MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up free and take 1,000 screenshots a month with no card.

Release checklist

• Each supported status has a deterministic synthetic fixture, including any product-specific timeout or reversal state.
• Visible status, explanation and displayed critical fields are asserted semantically before screenshot comparison.
• Viewport and rendering environment match the intended coverage; dynamic values and animations are controlled without masking meaningful UI.
• Component and/or full-page snapshots cover the surfaces that matter, with separate baselines for deliberately different environments.
• Diffs are reviewed against the fixture and design; baselines are updated only for verified, intended changes.
• Backend or integration checks independently validate payment state; screenshots are not treated as proof of a bank outcome.
• Test artifacts contain no real identifiers, contact details, account data or payment screenshots.

Frequently Asked Questions

Does a matching screenshot prove that a UPI payment succeeded?

No. It shows rendered UI; validate the transaction state independently through the authoritative backend or payment integration.

Should I mask the transaction reference in a screenshot test?

Use synthetic references. If the reference’s changing value is not under test, mask the value while keeping its label and surrounding status visible.

Quick Recap

Bestseller No. 1

SumUp Terminal SumUp Touch POS Terminal – Accepts Contactless, Chip & PIN, Apple & Google Pay + Instant Printing, Long Battery, No Monthly Fees

$249.00

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.