JavaScript · Cypress

Utilities with Cypress

OTP login with a resend countdown, a usage chart with hover tooltips, meter readings with slab-tariff bill maths, full or partial payments, an autopay mandate and outage reports.

App under test

⚡ PowerGrid

URL: /apps/utilities
Consumer no.: 1234567890
OTP: 111222
Tariff: ₹3 / ₹5 / ₹7.5 + ₹50

Launch ⚡ PowerGrid →📘 Project KT 📋 View all 17 test cases

Scenarios to automate

Work top to bottom — each one adds a new technique.

1
OTP & resend timer
Intermediate
resend-otp stays disabled while resend-countdown ticks from 30 — mock the clock or wait for enabled.
2
Hover tooltips
Intermediate
Hover usage-bar-* to show usage-tooltip with units and amount (also works on keyboard focus).
3
Reading validation
Beginner
A reading below last-reading or non-numeric shows error-new-reading.
4
High-usage confirm
Intermediate
More than 1,000 units reveals confirm-high, which must be ticked to continue.
5
Slab maths
Advanced
350 units → 100×3 + 200×5 + 50×7.5 + 50 = ₹1,725.00 in estimated-bill; slab-row lists each band.
6
Partial payments
Intermediate
pay-partial below 50% of the due shows pay-error; a valid amount leaves remaining-due.
7
Autopay switch
Intermediate
Turning autopay-toggle on opens mandate-modal; cancelling leaves it off.
8
Conditional warning
Beginner
Choosing “Sparking wire” shows safety-warning before submitting an outage.

Sample Cypress suite

A working starting point that finds elements every way Cypress can — by role, label, text, id, name, CSS, XPath and data-testid — so you practice them all. Pick your language, switch to data-testid only to compare, or try your own in the Locator Playground.

Language

Cypress runs inside the browser, so it only supports JavaScript and TypeScript — there is no Python, Java or C# version of Cypress. For those languages, see Selenium or Playwright.

powergrid.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×6 · #id ×3 · [name] ×3 · [aria-label] ×1 · getByTestId ×10
describe('PowerGrid — utilities', () => {
  it('submits a reading, sets autopay and pays', () => {
    cy.visit('/apps/utilities');
    cy.get('#consumer-number').type('1234567890');
    cy.contains('button', 'Send OTP').click();
    cy.getByTestId('otp-sent').should('be.visible');
    cy.getByTestId('resend-otp').should('contain', 'Resend OTP in');
    cy.get('[name="utility-otp"]').type('111222');
    cy.contains('button', 'Verify & sign in').click();
    cy.location('pathname').should('include', '/apps/utilities/dashboard');
    cy.get('#new-reading').type('4870');
    cy.contains('button', 'Calculate bill').click();
    cy.getByTestId('units-consumed').should('contain', '350 kWh');
    cy.getByTestId('estimated-bill').should('contain', '₹1,725.00');
    cy.getByTestId('amount-due').should('contain', '₹1,725.00');
    cy.get('[aria-label="Autopay"]').click();
    cy.get('[name="mandate-bank"]').select('TrustBank');
    cy.get('#mandate-max').type('3000');
    cy.contains('button', 'Authorise').click();
    cy.getByTestId('autopay-status').should('contain', 'Active via TrustBank');
    cy.contains('a', 'Pay now').click();
    cy.getByTestId('pay-full').click();
    cy.get('[name="utility-method"]').select('upi');
    cy.getByTestId('pay-utility').click();
    cy.getByTestId('paid-amount').should('contain', '₹1,725.00');
    cy.contains('a', 'Back to dashboard').click();
    cy.getByTestId('bill-status').should('contain', 'Paid');
  });
});