JavaScript · Cypress

Media streaming with Cypress

Pick a profile (Kids hides mature titles), browse scrolling rows, save to My List, and drive a custom player — play/pause, seek, ±10s, speed, volume, subtitles, skip intro — with progress that feeds “Continue watching”.

App under test

▶️ StreamBox

URL: /apps/stream
Login: viewer@streambox.tv / Stream@123
Profiles: Amir · Sara · Kids
Skip intro: shown 0:03–0:30
Plans: Basic · Standard · Premium

Launch ▶️ StreamBox →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Account login
Beginner
Email + password (sb-login-id, sb-password, sb-login) before the profile picker; sb-logout returns to the login.
2
Profile gate
Beginner
No profile → profile-picker; switch-profile returns to it. Kids hides A/UA titles and restricts /watch.
3
Unique row locators
Intermediate
A title can appear in several rows, so cards are open-<row>-<id> (e.g. open-trending-t3).
4
Player state
Intermediate
player-toggle flips aria-label Play/Pause and data-playing on player; player-time advances.
5
Transient button
Advanced
skip-intro only exists between 0:03 and 0:30 — wait for it, click, and assert the time jumped to 0:30.
6
Range sliders
Intermediate
Drive player-seek and player-volume (fill / keyboard / JS); mute toggles the volume to 0.
7
Continue watching
Advanced
Watch a bit, go home: row-continue shows the title with a progress bar.
8
Reorder a list
Intermediate
In My List, move-up/down-<id> or drag mylist-item to reorder; order persists.
9
Plan change modal
Beginner
choose-<plan> shows an upgrade or downgrade note; confirm-plan updates current-plan.

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.

streambox.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×3 · #id ×1 · [name] ×1 · [aria-label] ×2 · getByTestId ×14
describe('StreamBox — video streaming', () => {
  it('watches a title and resumes it', () => {
    cy.visit('/apps/stream');

    // Sign in first
    cy.get('#sb-login-id').type('viewer@streambox.tv');
    cy.get('[name="sb-password"]').type('Stream@123');
    cy.contains('button', 'Sign in').click();
    cy.getByTestId('profile-amir').click();
    cy.getByTestId('active-profile').should('contain', 'Amir');
    cy.getByTestId('open-trending-t3').click();
    cy.get('[aria-label="Orbit Nine"]').should('be.visible');
    cy.getByTestId('mylist-t3').click();
    cy.getByTestId('mylist-t3').should('contain', 'In My List');
    cy.getByTestId('play-t3').click();
    cy.getByTestId('watch-title').should('contain', 'Orbit Nine');
    cy.get('[aria-label="Playback speed"]').select('2');
    cy.getByTestId('player-toggle').click();

    // Skip intro appears a moment after playback starts
    cy.contains('button', 'Skip intro').click();
    cy.getByTestId('player-time').should('contain', '00:3');
    cy.getByTestId('player-toggle').click();
    cy.getByTestId('skip-forward-10').click();
    cy.getByTestId('player-time').should('contain', '00:4');
    cy.getByTestId('nav-home').click();
    cy.getByTestId('row-continue').should('contain', 'Orbit Nine');
    cy.contains('a', 'My List').click();
    cy.getByTestId('mylist-item').eq(0).should('contain', 'Orbit Nine');
  });
});