Правильная версия https://www.epic1h.com/best_selectors
Туториал: находим лучшие селекторы для UI элементов
Подойдет тем, кто хочет писать устойчивые, понятные и короткие селекторы в авто-тестах.
👍 Что сделаем
- Напишем тесты регистрации и входа для веб-приложения на Cypress.
- Научимся находить и тестировать селекторы через инструменты разработчика Chrome.
- Изучим лучшие практики и анти-паттерны при составлении селекторов.
💪 Минутка мотивации
Задача End-To-End тестов — заставить компьютер нажимать на кнопки, вводить данные в поля формы, двигать мышкой — как это делал бы человек.
Селекторы / локаторы — позволяют находить элементы UI с которыми ты будешь заставлять машину взаимодействовать.
Селекторы — основная часть будущего исходного кода твоих тестов.
От того, насколько хорошо ты будешь находить селекторы элементов, твой код будет:
- стабилен,
- понятен,
- и хорошо поддерживаться.
🤮 Твой код до:
cy.get('body main div[class="panel"] form .input-primary').type('?');
cy.get('body .form #xxyyzz').type('?');
cy.get('[class="btn btn-primary"]').click();
🤩 Твой код после:
cy.get('form.login input[name=email]').type('?');
cy.get('form.login input[name=password]').type('?');
cy.get('form.login button[type=submit]').click();
🙋 Перед началом
- Ты знаешь, что такое CSS селектор
- Ты инициализировал чистый Node.js проект
%/projects/cypress/best_selectors - Ты установил Cypress
npm i cypress@9 --save-dev
Если забыл, глянь в наш первый туториал
🫵 Наставления
Помни: никто тебя ничему не научит, если ты сам этого не захочешь!
- Не пропускай шаги.
- Конспектируй.
- Экспериментируй.
- Записывай вопросы с примерами кода для стендапов с мастером.
Просто бывает только в рекламе! Ну ты понял в какой.
🔢 Шаги
+1. Подготовка Веб-сервера
Тебе нужно разместить тестовое веб-приложение на локальном веб-сервере.
- Установи через терминал пакет
npm i tiny-server --save-dev - В
package.jsonдобавь командуstartв разделscriptsдля запуска сервера:
"scripts": {
+ "start": "tiny-server",
}
- Запусти в терминале
npm start - Открой в Chrome http://localhost:3000
Не получается 📹
- ❓ Что делает команда
npm install? - ❓ Зачем нужен пакет Tiny Web Server?
- ❓ Зачем нужен раздел
scripts? - ❓ Что видишь в Chrome?
- ❓ Какой веб-сервер обработал твой HTTP запрос?
npm start— это зашитая команда в NPM
Можно запускать команду не только npm run start, а короче npm start
+2. Загрузка тестового приложения
Веб-сервер готов, нужно скачать тестовое приложение с GitHub.
- Открой Терминал → Новый терминал
- Установи пакет
npm i node-wget --save-dev - Создай папку
appsв корне проекта. - В терминале выполни команду:
npx wget -d apps/ https://open-tutorials.github.io/cypress/apps/tesla.html
- Проверь, что появился файл
~/apps/tesla.html - Обнови страницу в Chrome.
- В списке файлов выбери
apps/tesla.html
~— так обозначается путь до корневой папки проекта.
Не получается 📹
- ❓ Что такое wget?
- ❓ Что внутри файла
~/apps/tesla.html?
Как скачать Google 🤟
- Выполни в терминале
npx wget -d google.html https://google.com/
- ❓ В корне проекта должен появится файл
google.html, что там?
+3. Запускаем тест приложения
Нужно открыть тестовое приложение в Cypress.
- Создай файл
~/cypress/integration/best-selectors.spec.js
it('should do register user', () => {
cy.visit('http://localhost:3000/apps/tesla.html');
});
- Не забудь отформатировать код и сохранить файл!
- Запусти Cypress командой
npx cypress open - В Cypress выбери тест
best-selectors.spec.js
Не получается 📹
- ❓ Тестовое приложение открылось в Cypress?
+4. Ищем селекторы
Нужно ввести в поле фамилия тестовые данные.
- Активируй selector playground.
- Наведи на поле фамилия и скопируй код селектора.
- Обнови код теста:
it('should do register user', () => {
cy.visit('http://localhost:3000/apps/tesla.html');
cy.get('#b1h7e4i8d3').type('Иванов');
});
Не получается 📹
- ❓ Что пытается сделать Cypress?
- ❓ Почему тест не проходит?
Селектор поля меняется 🥴 динамически при каждом запуске приложения.
❗ Следует использовать устойчивые к изменениям селекторы!
🙅 Анти-паттерн
Использовать хрупкие селекторы, которые могут быть изменены.
Пример — хеш элемента который может поменяться после новой сборки приложения:
<button id="zIyPEZ0bf">Продолжить</button>
👍 Лучшая практика
Добавить специальные
data-атрибуты к элементам в HTML разметку.
<button data-cy="register">Продолжить</button>
В твоем тесте ты напишешь:
cy.get('button[data-cy=register]').click();
❗ Тестируй только то, что можешь контролировать! ~"В конспект"
🙅 Анти-паттерн
Пытаться тестировать сайт или приложение, которое ты не контролируешь.
👍 Лучшая практика
Работать совместно с разработчиками сайта или приложения.
Если ты не контролируешь приложение, то можешь столкнуться с проблемами:
- Появится капча как защита от ботов.
- Структура элементов может меняться в зависимости от неизвестных факторов.
- Твой IP просто заблокируют как бота.
- Приложение может определить, что его открыли через тестовую оболочку и не запуститься.
+5. Поиск лучшего селектора
- Через selector playground найди селекторы для:
- Элемента с текстом Все права защищены.
- Кнопки Сбросить на форме регистрации.
❓ Это хорошие селекторы?
body > :nth-child(1) > :nth-child(4)#k9b1c2e4b1 > [data-cy="reset"]
- [ ] Отличные
- [x] Плохие
Это плохие селекторы, встроенный selector playground в Cypress не справляется — в топку 🤮
Инструменты разработчика
Всегда ищи селекторы через Инструменты разработчика в Chrome
В окне тестового приложения:
- Нажми правой кнопкой мышки на любом элементе, например кнопке войти.
- Выбери из контекстного меню Просмотр кода элемента.
- ❓ Что ты видишь справа и слева?
С помощью тэгов HTML и стилей CSS рендерится пользовательский интерфейс.
Лучший селектор:
- Не изменяемый — устойчивый к обновлениям приложения.
- Понятный — можно прочитать на естественном языке:
// first name input field on registration form
cy.get('form.registration input[name=first_name]')
- Короткий — задействует как можно меньше элементов и их атрибутов в иерархии.
+6. Тест формы регистрации
Нужно написать позитивный тест-кейс зарегистрироваться с шагами:
- Заполнить поле Имя
- Заполнить поле Фамилию
- Заполнить поле Email
- Заполнить поле Пароль
- Нажать кнопку Продолжить
- ❓ Какой селектор использовать для поля Имя?
Нужно найти уникальный семантический (со смыслом) атрибут или класс.
- Для тегов
<input>внутри одной формы атрибутыname=xyzявляются уникальными. - Для тегов
<button>атрибутtype=resetиtype=submitопределяет семантику действия.
В нашем случае для поля Имя это input[name=first_name]
- Для проверки селектора переключись на Консоль.
- В строку запроса введи
$('input[name=first_name]')и нажмитеENTER ↵
Не получается 📹
- ❓ Найден 1 элемент? Селектор уникален.
- Обнови в код теста:
cy.get('input[name=last_name]').type('Иванов');
cy.get('input[name=first_name]').type('Иван');
- ❓ Теперь в Cypress тест проходит?
- Аналогично найди селекторы и заполни поле Email
- ❓ Сколько найдено элементов для поля Email?
$('input[name=email]') — cелектор для поля Email не уникален!
На странице 2 формы Регистрация и Вход и на каждой из них есть поле Email.
- ❓ Что делать когда семантический селектор не уникален? Нужно добавить Контекст.
Контекст для элемента
Контекст для элемента: форма, группа, раздел — некоторая уникальная область интерфейса.
Как найти контекст
- Ищи в иерархии элемента семантические тэги
<form>,<fieldset>,<header>,<footer>,<nav>т.д. - Не смог? Ищи НЕ семантические теги:
<div>,<span>,<p>с семантическими атрибутами или классами.
Примеры хороших 👍 контекстов:
aside[data-type=left]— ищем боковую панель слева.form.registration— маловероятно, что на одной странице 2 формы регистрации.#registration— уникальный ID элемента..registration— семантически классregistrationуникален.[data-type=registration]— специальныйdata-*атрибут добавленный разработчиками..app-header .app-userbar— префикс.app-*в имени класса делает элементы уникальными.
Примеры плохих 🙅 контекстов:
aside— в приложении может быть 2 панели: справа и слева.form— на одной странице может быть несколько форм..header— семантически класс не уникален.fieldset[name=credentials]— на форме могут быть 2 формы с одинаковой группой полей.
🔥 Необходимо добавлять контекст к селекторам элементов!
Примеры хороших 👍 селекторов с контекстами:
form.registration input[name=first_name]— конкретное поле на конкретной форме.form[name=registration] button[type=submit]— кнопка с конкретным поведением на форме.form[name=registration] button.register— уникальная кнопка на форме.aside[data-type=left] .menu a[href="/register"]— в левой панели в меню ссылка на конкретный адрес.
Примеры плохих 🙅 селекторов с контекстами:
form.registration input[type=text]— полей с типом текст может быть много.form[name=registration] button— что делает кнопка?
- Найди контекст для всех полей формы и обнови код теста.
- Сверь свой исходный код с эталоном
+7. Тест формы входа
- Напиши тест should do login user.
- Сверь свой исходный код с эталоном
+8. Селектор по contains
Элементы в Cypress можно находить еше по текстовому содержимому тегов.
- Замени селектор
cy.get('form.login button[type=submit]')наcy.contains('Войти')
- ❓ Тест успешно пройден?
- Переключи язык приложения добавлением параметра
lang=enв URL:
cy.visit('http://localhost:3000/apps/tesla.html?lang=en');
- ❓ Тест больше не проходит, почему?
Мини-тест. Это хороший селектор?
cy.get('input[placeholder=Имя]').type('?');
- [ ] Да, конечно
- [x] Нет, нет, нет
Неееет! Это тоже самое, что и с `contents`
**При смене языка, тест перестанет работать!**
<iframe src="https://giphy.com/embed/wYyTHMm50f4Dm"
width="480" height="277" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
❗ Используй селекторы устойчивые к изменениям конфигурации приложения.
+9. TODO для разработчиков
❗ Что делать, если нельзя найти хороший селектор:
- Использовать лучший из худших.
- Поставить задачу разработчикам на добавление атрибута
data-cy
Текущая разметка:
<body>
<div>
<footer>
<p>Все права защищены</p>
</footer>
</div>
<body>
В твоем тесте:
it('should do check copyrights', () => {
// TODO: should be p[data-cy=copyrights]
// we can use contains
cy.contains('Все права защищены').should('be.visible');
// or exact hierarchy
cy.get('body > div > footer p').should('have.text', 'Все права защищены.');
});
- Зайди как разработчик в
~/apps/tesla.htmlи добавьdata-cyаттрибут:
<body>
<div>
<footer>
<p data-cy="copyrights">Все права защищены</p>
</footer>
</div>
<body>
- Обнови селектор в тесте:
cy.get('footer p[data-cy=copyrights]').should('have.text', 'Все права защищены.');
Названия аттрибутов для целей тестирования могут быть разными:
data-for-test,data-ui-id,data-test-idи т.д.
Та да 🥳 Ты дошел до конца.
👨🎓 Чему ты научился
😭 Домашка
Найди лучшие селекторы для формы регистрации и заполни ниже:
- поле имя пользователя —
- поле email —
- поле пароль —
- кнопка регистрации —
🙏 Фидбек пожалуйста
Полезный материал?
* 🤩 Очень полезный материал
* 😃 В целом полезный
* 😐 Возможно что-то пригодится
* 😒 Нет ничего полезного
* 😬 Абсолютно бесполезно
**Спасибо за ответ!**
Все ли было понятно?
* 🤩 Все понятно на 100%
* 😃 В целом все понятно
* 😐 Что-то понятно, что-то нет
* 😒 Понял только малую часть
* 😬 Ничего не понял
**Спасибо за ответ!**
Как тебе такой формат туториала?
* 🤩 Очень удобно
* 😃 Мне понравилось
* 😐 Нормально
* 😒 Не удобно
* 😬 Ужасно
**Спасибо за ответ!**
📹 Видео-ответы
- Зачем тестировщику доступ к исходному коду проекта?
- Какие еще навыки должны быть у тестировщика?
- Почему при обучении важно вести собственные конспекты?
- Почему можно тестировать только то, чем можно управлять?
- Как скачать Google?
- Какими должны быть селекторы в авто-тестах?
- Что делает функция $ в инструментах разработчика?
- Какой основной алгоритм для поиска селекторов?
- Что такое ага-эффект?
- Какие атрибуты добавлять к элементам для улучшения селекторов?
- Что такое CSS селектор по атрибуту?
- Как комбинировать CSS селекторы?
- Какие самые распространенные CSS селекторы?
- Как красиво оформлять сообщения в Telegram?
- Как правильно оформлять вопросы в Telegram?
- Что такое Markdown и зачем он в ИТ?