Fuente
QA Co-pilot | Ультимативна шпаргалка: Локатори Playwright (2018 vs 2026)Коротка шпар...
29 Vistas/Alcance
2026-05-13 13:01
Mensaje №295
🗂 Ультимативна шпаргалка: Локатори 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, мене вже не перевчити!