JavaScript · Cypress

Advertising with Cypress

A 5-step campaign wizard — objective, audience with location autocomplete, budget & bidding, creative with character counters and a live preview — then launch and pause/resume.

App under test

📣 AdPulse

URL: /apps/ads
Login: not required
Min budget: $5/day · $100 lifetime
Review time: ~3 seconds

Launch 📣 AdPulse →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Step validation
Beginner
wizard-next on an empty step shows step-errors and error-* for that step only.
2
Autocomplete chips
Intermediate
Type in location-input, pick location-option-*, then remove a chip with remove-location-*.
3
Dependent fields
Intermediate
bid-strategy “Cost cap” reveals cost-cap-amount; unticking run-continuously reveals run-duration.
4
Character counters
Intermediate
headline-count tracks 0/40 and input stops at 40 characters (maxlength).
5
Live preview
Intermediate
preview-headline and preview-cta mirror the creative fields as you type.
6
Edit from review
Advanced
edit-step-2 jumps back to Audience; values are preserved when returning to Review.
7
Async status
Advanced
A launched campaign shows “In review”, then flips to “Active” ~3s later.
8
Toggle switches
Beginner
Flip toggle-<id> (role=switch) and assert aria-checked and the status badge.

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.

adpulse.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×1 · #id ×6 · [name] ×4 · [placeholder] ×1 · getByTestId ×14
describe('AdPulse — campaign manager', () => {
  it('creates and launches a campaign', () => {
    cy.visit('/apps/ads');
    cy.getByTestId('create-campaign').click();
    cy.location('pathname').should('include', '/apps/ads/new');
    cy.getByTestId('objective-traffic').click();
    cy.get('#campaign-name').type('Diwali Sale');
    cy.getByTestId('wizard-next').click();

    // Audience
    cy.get('[name="age-min"]').select('25');
    cy.get('#age-max').select('45');
    cy.get('[name="location-input"]').type('Mum');
    cy.contains('button', 'Mumbai, India').click();
    cy.get('#interest-shopping').check();
    cy.getByTestId('audience-reach').should('contain', 'people');
    cy.getByTestId('wizard-next').click();

    // Budget
    cy.getByTestId('budget-type-daily').click();
    cy.get('[name="budget-amount"]').type('50');
    cy.getByTestId('wizard-next').click();

    // Creative with live preview
    cy.get('#ad-headline').type('Big Diwali Sale up to 50% off');
    cy.get('#ad-description').type('Lights, gifts and more at festive prices.');
    cy.get('[placeholder="https://"]').type('https://example.com/diwali');
    cy.get('[name="ad-cta"]').select('shop-now');
    cy.getByTestId('preview-headline').should('contain', 'Big Diwali Sale');
    cy.getByTestId('preview-cta').should('contain', 'Shop now');
    cy.getByTestId('wizard-next').click();
    cy.getByTestId('review-name').should('contain', 'Diwali Sale');
    cy.get('#accept-ad-policy').check();
    cy.getByTestId('launch-campaign').click();
    cy.getByTestId('campaign-launched').should('be.visible');
    cy.getByTestId('campaigns-table').should('contain', 'Diwali Sale');
  });
});