JavaScript · Cypress

Education with Cypress

Sign up with live password rules or log in, enroll in a course, watch lessons to unlock “Mark complete”, finish the course to unlock a timed quiz, and earn a certificate.

App under test

🎓 LearnHub

URL: /apps/lms
Learner: learner@learnhub.dev
Password: Learn@123
Pass mark: 60%

Launch 🎓 LearnHub →📘 Project KT 📋 View all 16 test cases

Scenarios to automate

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

1
Sign-up validation
Beginner
password-strength updates as you type; a weak password, mismatched confirm or reused email each fail.
2
Catalog filters
Beginner
Combine course-search, category-* chips and level-filter; assert course-count.
3
Wait for enabled
Intermediate
mark-complete is disabled until play-video finishes (~1.5s) — wait for it to be enabled.
4
Progress tracking
Intermediate
Each completed lesson updates course-progress and the lesson check marks; state survives reloads.
5
Locked content
Intermediate
quiz-locked shows until 100%; visiting /quiz directly also shows the locked state.
6
Mixed question types
Intermediate
Answer radio (q1-*), checkboxes (q2-*), a select (q3) and free text (q4).
7
Unanswered confirm
Advanced
Submitting with blanks opens unanswered-modal; submit-anyway grades as wrong.
8
Timer auto-submit
Advanced
Mock the clock past 5:00 and assert the quiz auto-submits to quiz-result.

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.

learnhub.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×5 · #id ×1 · [name] ×1 · [placeholder] ×1 · [aria-label] ×4 · getByTestId ×11
describe('LearnHub — e-learning', () => {
  it('completes a course and earns a certificate', () => {
    cy.visit('/apps/lms');
    cy.get('#login-email').type('learner@learnhub.dev');
    cy.get('[name="login-password"]').type('Learn@123');
    cy.getByTestId('login-submit').click();
    cy.location('pathname').should('include', '/apps/lms/courses');
    cy.get('[aria-label="Search courses"]').type('Selenium');
    cy.getByTestId('course-count').should('contain', '1 course');
    cy.contains('button', 'Enroll for free').click();
    cy.location('pathname').should('include', '/apps/lms/course/c1');

    // Each lesson: play the video, then mark it complete (auto-advances)
    cy.get('[aria-label="Play video"]').click();
    cy.contains('button', 'Mark complete').click();
    cy.get('[aria-label="Play video"]').click();
    cy.contains('button', 'Mark complete').click();
    cy.get('[aria-label="Play video"]').click();
    cy.contains('button', 'Mark complete').click();
    cy.getByTestId('course-progress').should('contain', '100%');
    cy.getByTestId('start-quiz').click();
    cy.getByTestId('q1-b').click();
    cy.getByTestId('q2-a').check();
    cy.getByTestId('q2-c').check();
    cy.getByTestId('q3').select('frame');
    cy.get('[placeholder="Type your answer"]').type('data-testid');
    cy.contains('button', 'Submit answers').click();
    cy.getByTestId('quiz-score').should('contain', '100%');
    cy.getByTestId('certificate').should('be.visible');
    cy.getByTestId('certificate-id').should('contain', 'LH-');
  });
});