Кому подойдет
- Тестировщикам и QA, которые заводят баги с тестового или рабочего сайта и хотят реже слышать «не воспроизводится».
- Дизайнерам и менеджерам продукта, которые нашли проблему в верстке или тексте и должны показать точное место.
- Разработчикам, которые принимают баги от клиентов и хотят видеть селектор и CSS-правила, а не фото экрана на телефон.
Шаблон баг-репорта
Скопируйте структуру в трекер, документ или во вступление отчета SiteAnnotation. Поле вступления в SiteAnnotation сохраняет жирный текст и списки, поэтому заголовки остаются заголовками в PDF и Word.
Заголовок: <где> + <что не так>, например «Оформление заказа: кнопка оплаты списывает меньше итога»
Шаги воспроизведения
1. <первое действие, с адресом страницы>
2. <следующее действие>
3. <действие, после которого виден баг>
Ожидаемый результат: <что должно произойти>
Фактический результат: <что происходит на самом деле>
Важность: блокер / высокая / средняя / низкая, и почему
Окружение: браузер и версия, размер окна, аккаунт или тестовые данные
Доказательства
#1 Скриншот проблемы с разметкой: 1 = <первое место>, 2 = <второе место>
#2 Сломанный элемент: селектор, HTML, CSS-правила
#3 Все, что связано: текст из консоли, вторая страница, данные страницы
Зачем каждое поле
| Поле | Зачем оно разработчику |
|---|---|
| Заголовок | Найти баг в списке из пятидесяти: сначала страница, потом проблема |
| Шаги воспроизведения | Получить то же состояние у себя; одно действие на шаг |
| Ожидаемый и фактический | Отличить баг от разного понимания ТЗ |
| Важность | Решить, что чинить первым в этом релизе |
| Окружение | Объяснить «у меня работает»: размер окна и версия Chrome меняют верстку |
| Размеченный скриншот | Показать место с одного взгляда; номера на картинке совпадают с комментарием |
| HTML и CSS элемента | Указать правило, которое менять, и файл, откуда оно |
Окружение SiteAnnotation заполняет само: каждый пункт хранит адрес и заголовок страницы, время снимка, размер окна и версию Chrome и выводит их под скриншотом во всех форматах выгрузки.
Как собрать такой отчет в SiteAnnotation
- Снимите проблему. Откройте боковую панель и выберите Область, чтобы обвести место мышью, или Блок, чтобы щелкнуть по сломанному элементу и сохранить его вместе с HTML и CSS-правилами. Добавьте комментарий и нажмите Добавить в отчет.
- Разметьте. Откройте отчет и нажмите Разметить под скриншотом. Поставьте рамки, стрелку и номера, размойте личные данные. Разметка скриншотов хранит каждую пометку отдельным слоем.
- Напишите текст. Дайте отчету название, вставьте шаблон во вступление и заполните шаги, ожидаемый и фактический результат. Самый важный пункт поставьте первым стрелками.
- Выгрузите. PDF для людей, Word, если клиент правит отчеты, HTML или Markdown для трекера и репозитория. Номера пунктов (#1, #2) одинаковы во всех форматах. Как устроена выгрузка.
Ограничения
- SiteAnnotation никуда не отправляет отчеты: интеграций с Jira и GitHub нет. Приложите PDF к задаче или вставьте Markdown в ее текст.
- Ошибки консоли и сетевые запросы не сохраняются. Скопируйте их из DevTools в комментарий, если они важны.
- Отчет хранит то, что вы сняли. Если баг виден только в движении, запишите видео отдельно и дайте ссылку во вступлении.