JavaScript · Cypress

Telecom with Cypress

Enter a number for async operator detection, browse plan tabs, compare up to 3 plans, apply a cashback promo, pay and watch the recharge status settle.

App under test

📶 SkyTel

URL: /apps/telecom
Numbers: 7/8/9xxxxxxxxx
Other operator: 6xxxxxxxxx
Promo: SKY20 (20% cashback)

Launch 📶 SkyTel →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Operator detection
Beginner
After 10 digits a spinner runs ~0.8s, then detected-operator shows the circle. 6xxxxxxxxx is rejected.
2
Plan tabs & filter
Beginner
Switch plan-tab-*, apply validity-filter and assert the plan-card count.
3
Compare limit
Intermediate
Tick 4 compare-* boxes: the 4th shows compare-error; compare-button opens compare-table.
4
Promo code
Intermediate
SKY20 shows cashback in promo-message and summary-cashback; other codes are rejected.
5
Payment method validation
Intermediate
Pay with no method, a bad UPI ID or an empty wallet to see each error-*.
6
Async status
Advanced
recharge-status starts as “Pending with operator” and becomes “Successful” ~2.5s later — wait for text, not time.
7
Toggles & progress bars
Advanced
On My account, read aria-valuenow of usage-* bars and flip addon-* switches (role=switch).
8
Complaint form
Intermediate
A description under 20 chars fails; a valid one shows complaint-ticket with an SR number.

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.

skytel.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×3 · #id ×2 · [name] ×1 · getByTestId ×9
describe('SkyTel — mobile recharge', () => {
  it('recharges a prepaid number', () => {
    cy.visit('/apps/telecom');
    cy.get('#mobile-number').type('9876543210');
    cy.getByTestId('detected-operator').should('contain', 'SkyTel Prepaid');
    cy.contains('button', 'Unlimited').click();
    cy.getByTestId('select-plan-u2').click();
    cy.getByTestId('selected-plan').should('contain', '₹399.00');
    cy.contains('button', 'Proceed to pay').click();
    cy.location('pathname').should('include', '/apps/telecom/checkout');
    cy.get('[name="promo-code"]').type('SKY20');
    cy.contains('button', 'Apply').click();
    cy.getByTestId('promo-message').should('contain', 'cashback');
    cy.getByTestId('pay-upi').click();
    cy.get('#upi-id').type('amir@okbank');
    cy.getByTestId('pay-now').click();
    cy.getByTestId('recharge-success').should('be.visible');

    // The operator confirms asynchronously
    cy.getByTestId('recharge-status').should('contain', 'Successful');
    cy.getByTestId('recharge-cashback').should('contain', '₹50.00');
  });
});