JavaScript · Cypress

Social media with Cypress

Compose posts with a live character counter, @mention autocomplete and an image, like and comment instantly, scroll an infinite feed, follow people and read notifications.

App under test

🐦 Chirp

URL: /apps/social
Signed in as: @amir
Post limit: 280 characters
Feed page: 5 posts per load

Launch 🐦 Chirp →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

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

1
Character counter
Beginner
post-count counts down from 280, turns amber under 20 and red below 0; publish-post disables over the limit.
2
@mention autocomplete
Intermediate
Type “@m” to open mention-suggestions and pick mention-option-mia; the text becomes “@mia ”.
3
Scoped locators
Intermediate
Every post uses the same like-button / comment-input IDs — scope to a post-card (first, nth, or by data-post-id).
4
Instant likes
Beginner
like-button toggles aria-pressed and like-count immediately — assert both before and after.
5
Infinite scroll
Advanced
Scroll to feed-sentinel to load 5 more (loaded-posts grows); stop when feed-end appears.
6
Notifications
Beginner
notification-count shows unread; mark-all-read clears the badge.
7
Follow a user
Intermediate
follow-<handle> toggles “Following ✓” and follower-count changes by one.
8
Image attach
Intermediate
Upload via the hidden post-image-input (setInputFiles/selectFile/sendKeys); image-preview shows the name.

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.

chirp.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×2 · getByTestId ×4
describe('Chirp — social media', () => {
  it('posts with a mention, likes, comments and follows', () => {
    cy.visit('/apps/social');
    cy.getByTestId('post-input').type('Great pairing session today with @mi');
    cy.getByTestId('mention-option-mia').click();
    cy.contains('button', 'Post').click();
    cy.getByTestId('post-text').eq(0).should('contain', 'with @mia');

    // Interact with the newest post (first card)
    cy.getByTestId('like-button').eq(0).click();
    cy.getByTestId('like-count').eq(0).should('contain', '1');
    cy.getByTestId('comments-toggle').eq(0).click();
    cy.getByTestId('comment-input').eq(0).type('Thanks for the help!');
    cy.getByTestId('add-comment').eq(0).click();
    cy.getByTestId('comment-count').eq(0).should('contain', '1');
    cy.getByTestId('mention-link').eq(0).click();
    cy.getByTestId('profile-name').should('contain', 'Mia Chen');
    cy.contains('button', 'Follow').click();
    cy.getByTestId('follower-count').should('contain', '2311');
  });
});