JavaScript · Cypress

Insurance with Cypress

Vehicle details with dependent dropdowns, plan comparison with an IDV slider and add-on switches, a proposal with nominee, and payment inside an iframe gateway.

App under test

🛡️ SecureLife

URL: /apps/insurance
Reg. format: MH12AB1234
Gateway card: any 16 digits
Owner age: 18+ (DD/MM/YYYY)

Launch 🛡️ SecureLife →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Dependent dropdowns
Beginner
vehicle-model is disabled until vehicle-make is chosen, and resets when the make changes.
2
Conditional field
Beginner
claim-no reveals ncb; claim-yes hides it and removes the bonus from the premium.
3
Pattern validation
Intermediate
reg-number and owner-dob reject bad formats with error-* messages; under-18 owners fail.
4
Plan comparison
Intermediate
Assert premium-* for all three plans; third-party disables idv-slider and add-on switches.
5
Range slider
Advanced
Move idv-slider (keyboard arrows or fill) and verify idv-value and od-premium change.
6
Iframe payment
Advanced
Switch into payment-gateway, test gw-error validation, pay, and switch back to the parent.
7
Cancel in the iframe
Advanced
gw-cancel closes the gateway and shows payment-cancelled in the parent page.
8
Download policy
Intermediate
download-policy saves a .txt; assert the file name contains the policy 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.

securelife.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×3 · #id ×6 · [name] ×5 · [placeholder] ×1 · getByTestId ×10
describe('SecureLife — car insurance', () => {
  it('buys a car insurance policy', () => {
    cy.visit('/apps/insurance');
    cy.get('#reg-number').type('MH12AB1234');
    cy.get('[name="vehicle-make"]').select('maruti');
    cy.getByTestId('vehicle-model').select('swift');
    cy.getByTestId('fuel-petrol').click();
    cy.get('#vehicle-year').select('2021');
    cy.contains('button', 'No').click();
    cy.get('[name="ncb"]').select('20');
    cy.contains('button', 'View plans').click();
    cy.location('pathname').should('include', '/apps/insurance/quote');
    cy.getByTestId('plan-comprehensive').click();
    cy.getByTestId('addon-roadside').click();
    cy.getByTestId('total-premium').should('contain', '14,442.00');
    cy.contains('button', 'Buy this plan').click();

    // Proposal and nominee
    cy.get('#owner-name').type('Amir Khan');
    cy.get('[placeholder="DD/MM/YYYY"]').type('15/08/1990');
    cy.get('[name="owner-email"]').type('amir@example.com');
    cy.get('#owner-phone').type('9876543210');
    cy.get('[name="owner-address"]').type('12 Palm Street, Pune 411001');
    cy.get('#nominee-name').type('Sara Khan');
    cy.get('[name="nominee-relation"]').select('spouse');
    cy.get('#nominee-age').type('32');
    cy.getByTestId('declaration').check();
    cy.getByTestId('pay-premium').click();

    // Pay inside the iframe gateway
    cy.getByTestId('payment-gateway').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
      .find('[data-testid="gw-card"]').type('4111111111111111');
    cy.getByTestId('payment-gateway').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
      .find('[data-testid="gw-expiry"]').type('1230');
    cy.getByTestId('payment-gateway').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
      .find('[data-testid="gw-cvv"]').type('123');
    cy.getByTestId('payment-gateway').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
      .find('[data-testid="gw-pay"]').click();
    cy.getByTestId('policy-issued').should('be.visible');
    cy.getByTestId('policy-number').should('contain', 'SL/2026/');
    cy.getByTestId('policy-card-last4').should('contain', '1111');
  });
});