JavaScript · Cypress

Automotive with Cypress

Configure a car — trim, colour swatches that recolour an SVG preview, wheels, interior and option packs — with live ex-showroom and on-road pricing, a trim comparison, then book a test drive.

App under test

🚘 AutoDrive

URL: /apps/auto
On-road: ex-showroom + 12%
Dealers: closed Sundays
Prices: fictional

Launch 🚘 AutoDrive →📘 Project KT 📋 View all 14 test cases

Scenarios to automate

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

1
Swatch state
Beginner
color-* buttons are role=radio with aria-checked; car-preview's data-color matches the chosen hex.
2
SVG attributes
Intermediate
Changing wheels-* updates data-wheels on car-preview (and the wheel radius).
3
Price maths
Intermediate
price-options sums colour, wheels, interior and packs; price-on-road = ex-showroom × 1.12.
4
Compare modal
Beginner
compare-trims opens trim-compare-table with one column per trim.
5
Save & carry over
Intermediate
save-config shows a CFG- code; the test-drive page shows the same code and price.
6
Test-drive validation
Intermediate
Missing dealer, day, time, bad phone or unticked has-licence each show error-*.
7
Disabled Sundays
Beginner
Pick the first enabled drive-day chip with :not([disabled]).

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.

autodrive.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×4 · #id ×4 · [name] ×3 · [aria-label] ×1 · getByTestId ×11
describe('AutoDrive — automotive', () => {
  it('configures a car and books a test drive', () => {
    cy.visit('/apps/auto');
    cy.getByTestId('configure-aero').click();
    cy.getByTestId('trim-vx').click();
    cy.getByTestId('color-red').click();
    cy.getByTestId('selected-color-name').should('contain', 'Racing Red');
    cy.getByTestId('wheels-18').click();
    cy.getByTestId('interior-leather').click();
    cy.get('#package-tech').check();
    cy.getByTestId('price-ex-showroom').should('contain', '₹9,27,000');
    cy.getByTestId('price-on-road').should('contain', '₹10,38,240');
    cy.contains('button', 'Compare trims').click();
    cy.getByTestId('trim-compare-table').should('be.visible');
    cy.get('[aria-label="Close"]').click();
    cy.contains('button', 'Save configuration').click();
    cy.getByTestId('config-saved').should('contain', 'CFG-');
    cy.contains('button', 'Book a test drive').click();
    cy.location('pathname').should('include', '/apps/auto/test-drive');
    cy.get('[name="dealer"]').select('pune-baner');
    cy.get('[data-testid="drive-day"]:not([disabled])').first().click();
    cy.get('#drive-time').select('11:30');
    cy.get('[name="driver-name"]').type('Amir Khan');
    cy.get('#driver-phone').type('9876543210');
    cy.get('[name="driver-email"]').type('amir@example.com');
    cy.get('#has-licence').check();
    cy.contains('button', 'Confirm test drive').click();
    cy.getByTestId('test-drive-confirmed').should('contain', 'TD-');
  });
});