TypeScript · @playwright/test

Social media with Playwright

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 Playwright suite

A working starting point that finds elements every way Playwright 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

chirp.spec.ts

import { test, expect } from '@playwright/test';

// playwright.config.ts → use: { baseURL: 'https://www.practiceqaautomation.com' }
// Locators in this suite: getByRole ×1 · XPath ×1 · getByTestId ×4
test('posts with a mention, likes, comments and follows', async ({ page }) => {
  await page.goto('/apps/social');
  await page.getByTestId('post-input').fill('Great pairing session today with @mi');
  await page.getByTestId('mention-option-mia').click();
  await page.getByRole('button', { name: 'Post' }).click();
  await expect(page.getByTestId('post-text').nth(0)).toContainText('with @mia');

  // Interact with the newest post (first card)
  await page.getByTestId('like-button').nth(0).click();
  await expect(page.getByTestId('like-count').nth(0)).toContainText('1');
  await page.getByTestId('comments-toggle').nth(0).click();
  await page.getByTestId('comment-input').nth(0).fill('Thanks for the help!');
  await page.getByTestId('add-comment').nth(0).click();
  await expect(page.getByTestId('comment-count').nth(0)).toContainText('1');
  await page.getByTestId('mention-link').nth(0).click();
  await expect(page.getByTestId('profile-name')).toContainText('Mia Chen');
  await page.locator('xpath=//button[normalize-space()="Follow"]').click();
  await expect(page.getByTestId('follower-count')).toContainText('2311');
});