🗂 Ультимативна шпаргалка: Локатори Playwright (2018 vs 2026)

Коротка шпаргалка про те, як відучити себе писати "крихкі" тести. Зберігайте в обране і кидайте на код-рев'ю. ☕️❌ Застарілий підхід (CSS / XPath) ✅ Сучасний підхід (User-Facing API)1️⃣ Кнопки та посилання
❌ page.locator('.btn-primary.submit')✅ page.getByRole('button', { name: 'Зберегти' }) Чому: Перевіряє не лише текст, а й доступність (Accessibility). Якщо розробник випадково зробить кнопку div-ом, тест впаде.2️⃣ Пошук статичного тексту
❌ page.locator('//div/span[contains(text(), "Успіх")]')✅ page.getByText('Успіх', { exact: true }) Чому: Працює незалежно від того, як фронтендер перетасує div та span у компоненті.3️⃣ Специфічні блоки (картки, аватари)❌ page.locator('.user-card .avatar-img')✅ page.getByTestId('user-avatar')
Чому: CSS-класи належать дизайнерам (вони їх змінюють). Атрибути data-testid належать QA — їх ніхто не чіпає.4️⃣ Точковий пошук у списках/таблицях (Chaining)❌ page.locator('.table-row:has-text("Ivan") >> .delete-btn')✅ page.getByRole('row', { name: 'Ivan' }).getByRole('button', { name: 'Видалити' })
Чому: Читається як звичайна англійська мова, нуль магії.Золоте правило: Шукайте елементи так, як їх шукає реальний юзер (за текстом та роллю), а не так, як їх бачить браузер (за селекторами). А на чому сидите ви?

👇🔥 — Тільки getByRole та getByText, класика.

👀 — Мій бестфренд — це data-testid.

🤬 — Я фанат XPath, мене вже не перевчити!