2new_new
Сheat Sheet
https://github.com/qa-senpai/test-automation-example/blob/main/cheat-sheets/css-selectors.md

➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿➿

Специфічність селекторів та порядок застосування в тестах

✅ Використовуйте найстабільніші теги і атрибути:

1. data-testid - найкраще рішення для тестів в поєднанні з іншими атрибутами у випадку не унікальності.
2. aria-label, name - використання стабільних атрибутів допомагає писати сильні селектори з можливістю перевикористання
3. id (якщо стабільні) - може бути хорошим вибором у випадку якщо вони статичні
4. class (якщо стабільні) - старайтесь використовувати обережно, класи мають тенденцію до змін. Використовуйте contains

✅ Уникайте складних селекторів, бо вони роблять тести крихкими:
❌ div > ul > li > a.btn-primary
може працювати зараз, але він занадто крихкий та може легко зламатись при зміні верстки.

Багато розробників додають data-атрибути (data-testid, data-qa, data-role) спеціально для автоматизації тестів. Використовуйте їх, щоб зробити свої селектори стабільнішими та надійнішими.
✅ await page.locator('[data-testid="login-button"]').click();

❌ button:nth-child(3) - використання номера елемента є поганою практикою, адже вірогідність що номер елементу зміниться дуже висока.

✅Інструменти, такі як DevTools у браузері або Codegen в Playwright, допоможуть швидко перевірити правильність селектора перед тим, як використовувати його в тесті.

## Вбудовані методи Playwright для знаходження веб елементів за пріорітетом використання.

1. page.getByRole() – знаходить елементи за явними та неявними атрибутами доступності.
2. page.getByText() – знаходить елемент за текстовим вмістом.
3. page.getByLabel() – знаходить елемент форми за текстом пов’язаного label.
4. page.getByPlaceholder() – знаходить input за текстом у placeholder.
5. page.getByAltText() – знаходить елемент (зазвичай зображення) за альтернативним текстом (alt).
6. page.getByTitle() – знаходить елемент за значенням атрибута title.
7. page.getByTestId() – знаходить елемент за data-testid (можна налаштувати й інші атрибути).

✅використовуйте ланцюгування locator для того щоб робити їх більш читабельними, такий підхід надає можливість комбінувати
вбудовані методи, css selectors і xpath


const listItem = page
.locator(`//*[@class ='list-header']/following-sibling::li`)
.getByText("Espresso Macchiato")
.locator("//ancestor::\*[@class = 'list-item']");