Chrome DevTools

Chrome DevTools — это встроенный инструмент браузера для анализа и отладки веб-приложений. При тестировании с Cypress DevTools играет ключевую роль, так как позволяет отслеживать поведение элементов, проверять сетевые запросы, анализировать производительность и выявлять проблемы с тестами.

Открытие и базовые панели

В Chrome DevTools доступны несколько основных панелей:

  • Elements — отображает структуру DOM, позволяет инспектировать и изменять элементы страницы в реальном времени.
  • Console — выводит логи, ошибки и предупреждения JavaScript. При использовании Cypress можно просматривать результаты cy.log() и сообщения об ошибках.
  • Network — показывает сетевые запросы, их статус, заголовки и время ответа. Полезно для тестирования API и проверки корректности запросов.
  • Sources — содержит исходные файлы скриптов и стили, позволяет устанавливать точки останова и отлаживать код.
  • Performance — используется для анализа производительности и выявления узких мест в рендеринге страницы.
  • Application — отображает локальное хранилище, куки, IndexedDB, полезно для проверки состояния приложения между тестами.

В контексте Cypress чаще всего используется комбинация Elements, Console и Network, так как они дают полное представление о DOM, логах и сетевых взаимодействиях.

Инспекция элементов и локаторы

Cypress активно использует селекторы для работы с элементами. DevTools помогает корректно их определять:

  1. Выбор элементов через инспектор: В панели Elements можно навести на элемент и увидеть его CSS-селекторы.
  2. Проверка уникальности селектора: В консоли DevTools можно выполнить document.querySelectorAll('selector') и убедиться, что селектор возвращает нужный элемент.
  3. Использование атрибутов для тестов: Рекомендуется использовать кастомные атрибуты (data-cy, data-test) для стабильности тестов.

Пример использования в Cypress:

cy.get('[data-cy=login-button]').click();

Использование DevTools позволяет подтвердить, что селектор уникален и корректно соответствует элементу.

Отслеживание сетевых запросов

В панели Network можно увидеть все XHR и fetch-запросы, что особенно важно при интеграционном тестировании:

  • Проверка ответа API перед продолжением теста:
cy.intercept('GET', '/api/users').as('getUsers');
cy.visit('/users');
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
  • Анализ задержек и возможных таймаутов: DevTools позволяет увидеть точное время выполнения запросов и при необходимости оптимизировать тесты или приложение.

Логирование и отладка тестов

Console позволяет выводить сообщения и проверять значения переменных во время выполнения тестов:

  • Использование cy.log() для отладки шагов теста.
  • Проверка ошибок JavaScript, которые могут прерывать тесты.
  • Временная установка точек останова через debugger:
cy.get('[data-cy=login-button]').then(($btn) => {
  debugger;
  expect($btn).to.exist;
});

При достижении debugger выполнение теста приостанавливается, и можно пошагово анализировать состояние DOM и переменных в панели Sources.

Использование DevTools для производительности

Хотя Cypress больше ориентирован на функциональное тестирование, иногда требуется анализировать производительность страницы:

  • Панель Performance позволяет записать сессию и определить узкие места в рендеринге.
  • Можно проверить время загрузки компонентов, что полезно при тестах на отзывчивость интерфейса.

Модификация состояния страницы

DevTools дает возможность изменять DOM и состояние элементов без изменения исходного кода, что полезно при подготовке тестовых сценариев:

  • Изменение значений форм или атрибутов элементов для проверки разных состояний.
  • Симуляция событий, таких как click или input, через консоль:
document.querySelector('[data-cy=username]').value = 'testuser';
document.querySelector('[data-cy=submit]').click();

Это позволяет протестировать реакцию приложения на нестандартные входные данные и проверить обработку ошибок.

Интеграция с Cypress Test Runner

Cypress автоматически открывает DevTools при запуске тестов через браузер Chrome, что позволяет:

  • Наблюдать пошаговое выполнение команд в реальном времени.
  • Отслеживать изменения DOM после каждой команды Cypress.
  • Использовать cy.pause() для временной остановки теста и анализа состояния страницы в DevTools.

Использование DevTools вместе с Cypress повышает точность тестирования, облегчает отладку и позволяет создавать более стабильные и надежные автоматизированные тесты.

Оглавление