`.first()` vs `.nth(0)` — When to Use Which — BrauzerLab

The plan selection page has three identically-named Select buttons. Your job is to click the first plan’s button.

Semantic selection (.first()) vs index-based selection (.nth(0)) — both produce the same result but express different intent. .first() communicates intent more clearly.

page is ready. The list has three <li> items, each with a distinct id and data-testid. Any valid approach — .first(), .nth(0), or a direct id — passes the mission.

.nth(0) works, but .first() is more readable — keep that distinction in mind.

import { test, expect } from '@playwright/test'; test('`.first()` vs `.nth(0)` — When to Use Which', async ({ page }) => { await page.goto('https://lab.local/mission/nth-vs-first'); // ↓ Your code goes below ↓ });