Введение в отладку Cypress

Быстрое написание кода – ценный навык, но настоящий признак опытного разработчика ПО – это способность эффективно дебажить и устранять ошибки и баги. Отладка – критически важный аспект процесса разработки, гарантирующий, что программное обеспечение функционирует так, как задумано, и удовлетворяет потребности пользователей.

Возможности отладки Cypress делают его бесценным инструментом для QA-инженеров и разработчиков. Подробные сообщения об ошибках, интерактивный прогон тестов, интеграция с инструментами разработчика и специализированные команды отладки позволяют быстро и эффективно устранять сбои в тестировании.

Отладка тестов Cypress поможет вам выявить проблемы в тестовом коде и тестируемом приложении. Cypress предлагает несколько методов и инструментов для эффективной отладки. В этой статье мы расскажем о том, как отлаживать тесты с помощью отладчика Cypress и других инструментов разработчика.

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

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Почему отладка важна?

Отладка – важнейший аспект разработки программного обеспечения, и качество инструментов отладки, доступных во фреймворке, может существенно повлиять на процесс разработки. Вот более подробный обзор того, почему отладка так важна и что следует учитывать при выборе фреймворка:

Важность отладки

Обнаружение ошибок

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

Исправление кода

• После обнаружения ошибки инструменты отладки помогают понять причину проблемы, что облегчает нахождение ее решения.

Оптимизация производительности

• Отладка – это не только исправление ошибок, но и повышение производительности кода. Она помогает выявить неэффективность и узкие места в программе.

Обеспечение функциональности

• Отладка гарантирует, что программное обеспечение ведет себя так, как ожидается, соответствует заданным требованиям и обеспечивает надежную работу приложения.

Повышение безопасности

• Выявление и устранение уязвимостей с помощью отладки может предотвратить потенциальные нарушения безопасности.

В следующем разделе вы увидите различные методы отладки в Cypress.

Методы отладки в Cypress

Отладку в Cypress можно выполнять с помощью различных методов, включая .pause(), .debug(), cy.log(), console.log() и встроенный отладчик JavaScript.

Ниже приведены различные методы отладки тест-кейса в Cypress:

• Отладка Cypress с использованием command logs (логов команд)
• Отладка Cypress с использованием метода .pause()
• Отладка Cypress с использованием метода .debug()
• Отладка Cypress с использованием cy.log()
• Отладка Cypress с помощью console.log()
• Отладка Cypress с использованием встроенного отладчика
• Отладка Cypress с использованием скриншотов и видео

Отладка в Cypress включает несколько методов, помогающих выявить и устранить проблемы в ваших тестах. Здесь представлено подробное руководство по каждому методу отладки:

Отладка Cypress с помощью командных логов

Командные логи автоматически отображаются в Cypress Test Runner. В них содержатся подробные логи всех команд Cypress, выполненных во время тестирования, включая их статус, продолжительность и любые связанные с ними ошибки.

Пример:

• Запустите свой тест в Cypress Test Runner.
• Обратите внимание на журнал команд в левой панели, чтобы увидеть пошаговое выполнение каждой команды.
• Щелкните по отдельным командам, чтобы увидеть более подробную информацию, включая скрины DOM до и после выполнения команды.

Преимущества:

• Предоставляет наглядную историю всех выполненных команд.
• Легко определить, где тест провалился.

На скриншоте ниже левая панель отображает пошаговое выполнение каждой команды, а правая – соответствующие результаты. Такая настройка позволяет эффективно выявлять причины сбоев тест-кейсов. Например, в приведенном примере тест не работает, потому что пользовательский интерфейс отображает другой текст.

Отладка Cypress с помощью метода .pause()

Метод .pause() приостанавливает выполнение теста в определенный момент, позволяя просмотреть состояние приложения и устранить возникшие проблемы.

Пример:

cy.get(‘.element’).pause().click();

Преимущества:

• Полезно для остановки выполнения кода на определенном этапе для проверки DOM.
• Вы можете возобновить тест вручную в Cypress Test Runner, нажав кнопку “Resume”.

Пример:

В приведенном ниже примере мы поместили .pause() на кнопку входа в систему после ввода данных в поле с паролем.

/// <reference types="cypress" />
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", function () {
 cy.visit("https://testgrid.io/");
 cy.get('[title="Sign in"]').click();
 cy.get("#email")
 .clear("jarryliurobert@gmail.com")
 .type("jarryliurobert@gmail.com");
 cy.get("#password").clear().type("Test@1234");
 cy.get(".signin-button").click().pause();
 cy.contains("Dashboard");
 cy.get("#tgtestcase").click();
 cy.contains("Lets get you started with codeless");
 cy.get("[data-toggle='dropdown']").click();
 cy.contains("Logout").click();
 cy.contains("Forgot Password?");
 });
});

После ввода данных электронной почты и пароля выполнение теста приостанавливается. Код выполнит только первые четыре команды и сделает паузу перед выполнением пятой команды.

Отладка Cypress с помощью . debug()

Функция .debug() в Cypress полезна для отладки и может быть привязана к любой команде Cypress, чтобы приостановить тест и открыть DevTools. Это позволит вам просмотреть текущее состояние вашего приложения.

*** ПРИМЕЧАНИЕ

Чтобы команда .debug() выполнялась, необходимо держать открытым окно консоли браузера, в котором выполняются тест-кейсы.

В приведенном ниже примере мы поместили .debug() после ввода данных в поле с паролем.

/// <reference types="cypress" />
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", function () {
 cy.visit("https://testgrid.io/");
 cy.get('[title="Sign in"]').click();
 cy.get("#email")
 .clear("jarryliurobert@gmail.com")
 .type("jarryliurobert@gmail.com");
 cy.get("#password").clear().type("Test@1234")
 cy.get(".signin-button").debug().click();
 cy.contains("Dashboard");
 cy.get("#tgtestcase").click();
 cy.contains("Lets get you started with codeless");
 cy.get("[data-toggle='dropdown']").click();
 cy.contains("Logout").click();
 cy.contains("Forgot Password?");
 });
});

Переменная subject в Cypress представляет собой возвращаемое значение команды Cypress, с которой можно взаимодействовать в консоли браузера во время отладки. Если мы выполним команду subject.text(), это даст нам текстовое содержимое кнопки входа в систему.

Отладка Cypress с помощью cy.log()

Функция cy.log() в Cypress позволяет выводить сообщения на консоль Cypress test runner.  Это особенно полезно для отладки, а также для предоставления дополнительной информации о выполнении теста.

cy.get('.element').then(($el) => {
 cy.log('Element text is:', $el.text());
});

В приведенном ниже примере видно, что мы выводим текст ссылки для входа в систему, которая доступна на главной странице после открытия https://testgrid.io/.

/// <reference types="cypress" />
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", function () {
 cy.visit("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 cy.log("The Value is",$signin.text())
 })
 cy.get('[title="Sign in"]').click();
 cy.get("#email").clear("jarryliurobert@gmail.com").type("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().type("Test@1234")
 cy.get(".signin-button").debug().click();
 cy.contains("Dashboard");
 cy.get("#tgtestcase").click();
 cy.contains("Lets get you started with codeless automation");
 cy.get("[data-toggle='dropdown']").click();
 cy.contains("Logout").click();
 cy.contains("Forgot Password?");
 });
});

Ниже приведен результат вышеприведенного кода, где вы можете увидеть командные логи, которые действительно полезны при отладке.

Отладка Cypress с помощью console.log()

В Cypress console.log() можно использовать для вывода сообщений в консоль браузера в целях отладки.

Вот пример использования функции console.log():

cy.get(‘.element’).then(($el) => {
console.log(‘Element:’, $el);
});

Преимущества:

• Прямой вывод сообщений в консоль браузера.
• Помогает отлаживать более сложный JavaScript-код.

В приведенном ниже коде видно, что мы выводим текст ссылки входа в систему в консоли.

/// <reference types="cypress" />
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", function () {
 cy.visit("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 console.log("Text of Sign-in button →> ",$signin.text())
 })
 cy.get('[title="Sign in"]').click();
 cy.get("#email").clear("jarryliurobert@gmail.com").type("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().type("Test@1234")
 cy.get(".signin-button").click();
 cy.contains("Dashboard");
 cy.get("#tgtestcase").click();
 cy.contains("Lets get you started with codeless");
 cy.get("[data-toggle='dropdown']").click();
 cy.contains("Logout").click();
 cy.contains("Forgot Password?");
 });
});

Отладка Cypress с помощью debugger

Выражение debugger в JavaScript можно использовать в тестах Cypress для установки точки останова в коде. Когда выполнение кода дойдет до debugger, программа приостановится и откроются инструменты разработчика.

*** ПРИМЕЧАНИЕ

Для выполнения команды debugger мы должны держать открытым окно исходного кода в браузере, в котором выполняются тест-кейсы.

Пример:

cy.get('.element').then(($el) => {
 debugger;
 // inspect $el in the console
});

Преимущества:

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

В приведенном ниже коде мы поместили выражение debugger после открытия ссылки https://testgrid.io/.

/// <reference types="cypress" />
describe("Verify Login/Logout And Tab functionality", () => {
 it("Login and Click on 'Codeless' link Under Automation Section", function () {
 cy.visit("https://testgrid.io/");
 cy.get('[title="Sign in"]').then($signin => {
 debugger;
 console.log("Text of Sign-in button →> ",$signin.text())
 })
 cy.get('[title="Sign in"]').click();
 cy.get("#email").clear("jarryliurobert@gmail.com").type("jarryliurobert@gmail.com");
 
 cy.get("#password").clear().type("Test@1234")
 cy.get(".signin-button").click();
 cy.contains("Dashboard");
 cy.get("#tgtestcase").click();
 cy.contains("Lets get you started with codeless");
 cy.get("[data-toggle='dropdown']").click();
 cy.contains("Logout").click();
 cy.contains("Forgot Password?");
 });
});

На скриншоте ниже выполнение теста приостанавливается, как только встречается ключевое слово debugger. Мы можем либо перейти к следующей строке, нажав на кнопку step over, либо возобновить выполнение скрипта, нажав на первый значок в выделенной области.

Отладка Cypress с помощью скриншотов и видео

В Cypress можно делать снимки экрана и записывать видео во время тестирования. Когда тест не проходит, эти снимки и видео могут помочь вам быстрее определить проблемы.

Для этого необходимо обновить файл cypress.config,js, чтобы включить функцию скриншотов и видео.

По умолчанию запись видео отключена, но ее можно включить, установив параметр video в значение true в файле конфигурации.

const { defineConfig } = require("cypress");
module.exports = defineConfig({
 "screenshotsFolder": "cypress/screenshots",
 "screenshotOnRunFailure": true,
 "video": true,
 "trashAssetsBeforeRun": true,
 "videosFolder": "cypress/videos",
 "videoCompression": 32,
 e2e: {
 
 experimentalStudio:true,
 setupNodeEvents(on, config) {
 // implement node event listeners here
 },
 },
});

На приведенном ниже скриншоте видно, что созданы две папки с названиями ‘screenshots’ и ‘videos’, в которых мы можем увидеть прикрепленные скриншоты и видео, которые помогают в отладке тест-кейсов.

Заключение

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

Перевод статьи «Cypress Debugging Hacks: Tips and Tricks for Speedy Resolution [Best 7 Approaches 2024]».