Туториал: исследуем баги и пишем профессиональные баг-репорты

Подойдет тем, что хочет научиться исследовать ошибки в ПО и писать профессиональные баг-репорты.

👍 Что сделаем

• Проведем исследование критического бага.
• Поработаем с инструментами разработчика Chrome.
• Больше узнаем про фронтенд, бекенд, куки, API, лог-файлы и SQL.
• Выполним SQL-запросы в базу данных.
• Напишем профессиональный баг-репорт.

🙋‍️ Перед началом

• У Вас установлен браузер Google Chrome
• У Вас открывается тестовое приложение
• У Вас установлено приложение для создания скриншотов и записи экрана или установите Awesome Screenshot
• Почитайте про Markdown
• Почитайте про SQL
• Попробуйте поработать с Markdown таблицами

Создайте текстовый файл env.txt на рабочем столе, заполните и сохраните его со своими данными:

• Устройство: MacBook M1 Pro (14-inch, 2021) / 32 GB RAM
• ОС: macOS Monterey 12.0.1
• Экран: Built-in XDR Display 3024x1964
• Браузер: Google Chrome 100.0.4896.88 (arm64)
• Параметры сети: 90.187.49.33, 100MB, Vodafone Germany

env - сокращение от environment - окружение

😍 Живая обратная связь

Каждый вторник я провожу бесплатные онлайн стендапы в Zoom.

Если у тебя есть вопрос или проблема, подключайся:

• В 20:00 по MSK нажми на ссылку
• Введи пароль zyx
• Подними руку или напиши вопрос в чате.
• В случае необходимости, будь готов пошарить свой экран.

@[Anton Breslavsky|https://t.me/breslavsky_anton|assets/anton.jpg]

Что бы следить за анонсами новых туториалов подписывайся на телеграмм канал

🔢 Шаги

1. Оформляем баг-репорт

• Открой в Chrome https://ibank.epic1h.com/?v=1.1
• Попробуй войти в личный кабинет пользователем marry с паролем qwerty

Что такое qwerty 🤢?

❗ После нажатия на кнопку Войти пользователю выдается сообщение Критическая ошибка сервера.

• В новой вкладке снова открой Markdown редактор https://markdownlivepreview.com/
• Скопируйте в него исходное содержимое шаблона идеального баг-репорта

Поправьте в репорте:

• Дату обнаружения.
• Версию приложения.
• Окружение.

2. Воспроизводим и исследуем баг

• Сделай запись экрана используя Awesome Screenshot и закрепите ссылку в отчет.
• Очисти результаты исследования в репорте и оставьте только заголовки.

Состояние до бага

Выполните предварительные условия:

• Открой https://ibank.epic1h.com/?v=1.1
• Сбрось Cookie и кэш в Браузере: Инструменты разработчика → Приложение → Хранилище → Очистить

Выполни шаги для воспроизведения бага:

• Открой главную страницу / iBank.
• В разделе Исследование заполни подразделы После загрузки страницы.

Консоль

• В Инструментах разработчика перейдите на вкладку Консоль.
• Скопируй содержимое консоли в раздел баг-репорта 6.1. Console пользователя.

Не забывайте оформлять Markdown

```text
Текст тут
```

```text
фронтенд загружен
запрос на бекенд GET /api/users/summary
ответ сервера: {count: 3}
Uncaught TypeError: final is not a function at XMLHttpRequest.request.onreadystatechange
```

Cookies

• Перейди на вкладку Приложение → Cookies и заполните в отчете 6.2. Cookie браузера.

Используйте Markdown таблицы для оформления.

```markdown
| **name** | **value**           |
|----------|---------------------|
| rnd      | 0.22187308399860428 |
```

Запросы к API

• Перейди на вкладку Сеть и выберите фильтр Fetch/XHR.
• Выбери запрос /summary, заполните 6.3. Log запросов к API → После загрузки страницы.
• Используй вкладки Заголовки, Ответ, Cookies и шаблон:

```text
{Request Method} {Request URL}
{Status Code} ↓ 
{Response}
```

```text
GET https://qa.ecpic1h.com/api/users/summary
200 ↓ 
{"count": 5}
```

Состояние базы данных

• Перейди на https://ibank.epic1h.com/db.html и выполните запрос:

SELECT id, username, password, firstName FROM users WHERE username = 'marry'

• Используй Markdown таблицы для оформления.

Пользователь с логином `marry` присутствует в базе данных.

```markdown
| **id** | **username** | **password** | **firstName** |
|--------|--------------|--------------|---------------|
| 3      | marry        | qwerty       | NULL          |
```

• Проверь что сессии для пользователя marry отсутствуют:

SELECT * FROM sessions WHERE user = 2

Исследуем состояние после обнаружения бага

• Выполни оставшиеся шаги для воспроизведения

2. На форме Входа заполнить поля:
   1. Логин: marry
   2. Пароль: qwerty
3. Нажать на кнопку Войти

Консоль

• Скопируй новые записи в раздел После нажатия на кнопку Войти

```text
запрос на бекенд POST /api/login {username: 'marry', password: 'qwerty'}
POST https://ibank.epic1h.com/api/login 500 (Internal Server Error)
```

Cookies

• Заполни состояние Cookies.

Запросы к API

• Опиши все запросы к API после фиксации бага.

### После нажатия на кнопку **Войти**
```
POST /api/login
{"login": "marry", "password": "qwerty"}
500 ↓
Не удалось создать сессию
```

Состояние базы данных

• Проверь сессии для пользователя marry и добавьте в отчет.

  SELECT * FROM sessions WHERE user = 2
  

Создана сессия для пользователя `marry`

`SELECT * FROM sessions WHERE user = 2`

| **id**    | **user** | **active** |
|-----------|----------|------------|
| eeSJFLKxt | 3        | 1          |

Лог сервера

• Открой в новой вкладке о https://ibank.epic1h.com/server.log
• Добавь в отчет информацию которую считаете ключевой.

```text
2022-05-01T12:18:46.792Z connected to database
2022-05-01T12:18:46.791Z server has been started
...
2022-05-01T12:18:49.049Z checking password qwerty === qwerty
2022-05-01T12:18:49.049Z finding username marry
2022-05-01T12:18:49.050Z TypeError: Cannot read property 'toUpperCase' of null
```

🙏 Фидбек пожалуйста

Полезный материал?

* 🤩 Очень полезный материал
* 😃 В целом полезный
* 😐 Возможно что-то пригодится
* 😒 Нет ничего полезного
* 😬 Абсолютно бесполезно


**Спасибо за ответ!**

Все ли было понятно?

* 🤩 Все понятно на 100%
* 😃 В целом все понятно
* 😐 Что-то понятно, что-то нет
* 😒 Понял только малую часть
* 😬 Ничего не понял


**Спасибо за ответ!**

Как тебе такой формат туториала?

* 🤩 Очень удобно
* 😃 Мне понравилось
* 😐 Нормально
* 😒 Не удобно
* 😬 Ужасно


**Спасибо за ответ!**

Артефакты

1. Баг и баг репорт
2. Правила написания предварительных шагов в тест-кейсах