Как подойти к выполнению задачи по тестированию веб-приложения?

Ответ

Подход структурированный, от анализа до регресса.

Поэтапный план:

  1. Анализ требований: Изучение ТЗ, пользовательских историй, дизайн-макетов. Уточнение неясностей с аналитиком/разработчиком.
  2. Тест-дизайн:
    • Составление чек-листов и тест-кейсов, приоритизация по рискам.
    • Определение граничных значений и классов эквивалентности для полей ввода.
  3. Тестирование:
    • UI/UX: Валидность верстки, адаптивность, кроссбраузерность (Chrome, Firefox, Safari).
    • Функциональность: Работоспособность всех сценариев, валидация данных, обработка ошибок.
    • API (если есть): Проверка эндпоинтов через Postman или автотесты.
    • Клиентская логика: Анализ сетевых запросов и консоли в DevTools.

Пример тест-кейса для формы:

// Пример на Cypress
it('Валидация email в форме регистрации', () => {
  cy.visit('/signup');
  // Негативный сценарий
  cy.get('[data-qa="email-input"]').type('invalid-email');
  cy.get('[data-qa="submit-btn"]').click();
  cy.get('[data-qa="error-message"]')
    .should('be.visible')
    .and('contain', 'Введите корректный email');
  // Позитивный сценарий
  cy.get('[data-qa="email-input"]').clear().type('valid@example.com');
  cy.get('[data-qa="error-message"]').should('not.exist');
});
  1. Документирование: Четкие баг-репорты с шагами, скриншотами, логами.
  2. Регрессионное тестирование: Проверка смежных функциональностей после фиксов.

Инструменты: Браузерные DevTools, Charles/Fiddler, Selenium/Playwright/Cypress, Jira/TestRail.

Ответ 18+ 🔞

А, ну это ж классика, блядь! Подход к тестированию, как у старого пердуна в библиотеке — всё по полочкам, с нудными бумажками. Но, сука, работает же, чёрт возьми!

Слушай, смотри, как мы обычно эту матаню разводим. По шагам, а то мозги набекрень.

План, от которого можно и обосраться со скуки, но он — наш спаситель:

  1. Разбор полётов (анализ): Берём эту кипу ТЗ, пользовательских сказок и дизайнов, которые нарисовал какой-то хипстер. И начинаем выпытывать у аналитика: «А че это тут за хуйня нарисована? А как эта кнопка должна работать?». Пока не станет всё кристально ясно или пока аналитик не сбежит.
  2. Составляем план нападения (тест-дизайн):
    • Пишем чек-листы и тест-кейсы. Сначала ловим самые жирные баги — там, где всё может накрыться медным тазом.
    • Для всяких полей ввода вспоминаем школу: ищем граничные значения. Если поле «Возраст», то что будет, если вписать -1, 0, 17, 18, 99 и 999? Вот это и есть наши классы эквивалентности, ёпта!
  3. Самое весёлое — ломать (тестирование):
    • Внешний вид (UI/UX): А вёрстка не поплыла? А в этом вашем Сафари всё не в говне? А на телефоне кнопка не размером с муравьиное яйцо? Проверяем, сука!
    • Работоспособность (Функциональность): А кнопка-то жмётся? А форма отправляется? А если вписать в поле «Имя» символы ' OR 1=1;--, что будет? Ошибку покажет или базу данных нам выплюнет? Вот это и есть обработка ошибок, блядь!
    • Невидимая часть (API): А что там на задворках творится? Дёргаем эндпоинты через Postman, смотрим, не возвращает ли сервер нам вместо JSON'а какую-нибудь хуйню вроде 500 Internal Server Error.
    • Под капотом (Клиентская логика): Открываем DevTools и смотрим, какие запросы летят, не светится ли в консоли красненькое Uncaught TypeError: undefined is not a function. Волнение, блядь, зашкаливает!

Вот, смотри, как это в коде выглядит, простой пример:

// Пример на Cypress
it('Валидация email в форме регистрации', () => {
  cy.visit('/signup');
  // Негативный сценарий
  cy.get('[data-qa="email-input"]').type('invalid-email');
  cy.get('[data-qa="submit-btn"]').click();
  cy.get('[data-qa="error-message"]')
    .should('be.visible')
    .and('contain', 'Введите корректный email');
  // Позитивный сценарий
  cy.get('[data-qa="email-input"]').clear().type('valid@example.com');
  cy.get('[data-qa="error-message"]').should('not.exist');
});
  1. Письмоводительство (Документирование): Нашёл баг — не орал «Всё сломалось, пиздец!». Сел и написал в баг-трекер чёткий отчёт: какие шаги, что ожидал, что получил, прикрепил скриншот, где у тебя на лице написано «Я охуел». Без этого разработчик тебя просто пошлёт нахуй.
  2. Уборка после праздника (Регресс): Починили один баг — проверь, не сломали ли они случайно всё вокруг. Потому что бывает так: починили авторизацию, а корзина покупок — в рот меня чих-пых — перестала работать.

Чем воюем: DevTools в браузере — наш лучший друг. Charles/Fiddler, чтобы смотреть, что летит по сети. Selenium, Playwright или Cypress для автоматизации этой рутины. И, конечно, Jira или TestRail, чтобы не забыть, что и где мы уже сломали.

Вот и вся магия, не так страшен чёрт, как его малюют. Главное — системный подход и немного, блядь, паранойи!