Кастомные команды Cypress: практикум

• Что такое кастомные команды
  • Быстрый пример
• В чем польза
• Создание кастомных команд: 3 способа
• Когда кастомные команды не нужны
  • Если нативные команды лучше
  • Неповторяемые действия
  • Узко ориентированные команды
  • Изменчивые действия

Что это

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

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

Быстрый пример

Чтобы добавить кастомную команду в Cypress, используем такой синтаксис:

Пример:

Что дают кастомные команды:

Как уже сказано, увеличивают мощность и гибкость Cypress. Кастомные команды упрощают тестирование, делая код реюзабельным (многократно используемым), легко обслуживаемым и более понятным для чтения. Это и позволяет опытному тестировщику работать быстрее и эффективнее.

Ниже перечислены некоторые из ключевых преимуществ кастомных команд:

Реюзабельность (возможность многократного использования):

Кастомные команды позволяют использовать созданные фрагменты кода в других тестах.

Пример: вы создали кастомную команду для тестирования логина. Вы затем сможете использовать ее в других тестах, не переписывая каждый раз по новой эти шаги.

Удобство обслуживания:

Кастомные команды облегчают обслуживание и обновление кода тестов.

Пример: Если процесс входа в систему меняется (например, в него добавляется новое поле), достаточно будет обновить кастомную команду входа в систему, а не менять ее вручную в каждом тесте.

Удобство чтения:

Кастомные команды делают тестовые сценарии/кейсы более понятными.

Пример: Вместо того чтобы писать длинный список шагов для сложных тестовых действий, можно использовать одну строку типа cy.login(), которая абстрагирует детали.

Повышение эффективности:

Кастомные команды экономят время и повышают производительность.

Пример: Создание кастомных команд для повторяющихся действий (например, отправки форм) ускоряет разработку и выполнение тестов.

Как создавать кастомные команды:

Для добавления кастомной команды в Cypress используется метод Cypress.Commands.add().

Давайте разберемся в этом на базовом примере кастомной команды логина:

Test Scenario:
1) Navigate to the website - https://naveenautomationlabs.com/opencart/
2) Enter your email and password
3) Click on the submit button
4) Search for the product "Macbook"
5) Verify if the product is visible 

Реализация:

describe("Website Login and Product Search", () => {
    it("should navigate to the website, log in, and search for 'Macbook'", () => {
        cy.visit('https://naveenautomationlabs.com/opencart/index.php?route=account/login');
        cy.get('[id="input-email"]').type("cypress.demo@dispostable.com");
        cy.get('[id="input-password"]').type("Cypress123!!");
        cy.get('[type="submit"]').eq(0).click();
        cy.get('[name="search"]').eq(0).type("Macbook");
        cy.get('button.btn.btn-default.btn-lg').click();
        cy.contains("Macbook").should('be.visible');
    });
});

Выполнение:

Теперь посмотрим, как создать кастомную команду для логина. Для этого будем применять три подхода (метода):

Подход 1:

В этом подходе создадим кастомную команду для входа на сайт OpenCart и предоставим все данные для входа (имейл и пароль) внутри общей функции.

Шаги:

Перейдите в support>commands.js и вставьте приведенный ниже код.

Cypress.Commands.add('login', () => {
    cy.visit('https://naveenautomationlabs.com/opencart/index.php?route=account/login');
    cy.get('[id="input-email"]').type("cypress.demo@dispostable.com");
    cy.get('[id="input-password"]').type("Cypress123!!");
    cy.get('[type="submit"]').eq(0).click();
})

Реализация:

Определив эту кастомную команду, вы можете использовать ее в своих тестах следующим образом:

describe("Website Login and Product Search", () => {
    it("should navigate to the website, log in, and search for 'Macbook'", () => {
        cy.login()
        cy.get('[name="search"]').eq(0).type("Macbook");
        cy.get('button.btn.btn-default.btn-lg').click();
        cy.contains("Macbook").should('be.visible');
    });
});

Результат выполнения:

Подход 2:

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

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

Шаги:

Перейдите в support>commands.js и вставьте приведенный ниже код.

Cypress.Commands.add('login', (email,password) => {
    cy.visit('https://naveenautomationlabs.com/opencart/index.php?route=account/login');
    cy.get('[id="input-email"]').type(email);
    cy.get('[id="input-password"]').type(password);
    cy.get('[type="submit"]').eq(0).click();
})

Реализация:

Создав эту кастомную команду, можете использовать ее в своих тестах следующим образом:

describe("Website Login and Product Search", () => {
    it("should navigate to the website, log in, and search for 'Macbook'", () => {
        cy.login("cypress.demo@dispostable.com", "Cypress123!!")
        cy.get('[name="search"]').eq(0).type("Macbook");
        cy.get('button.btn.btn-default.btn-lg').click();
        cy.contains("Macbook").should('be.visible');
    });
});

Выполнение:

Подход 3:

В последнем подходе создаем кастомную команду для входа на сайт OpenCart, но получаем имейл и пароль из файла фикстуры.

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

Теперь зайдите в support>commands.js и вставьте приведенный ниже код:

import loginDetails from '../fixtures/login.json'

Cypress.Commands.add('login', () => {
    cy.visit('https://naveenautomationlabs.com/opencart/index.php?route=account/login');
    cy.get('[id="input-email"]').type(loginDetails.email);
    cy.get('[id="input-password"]').type(loginDetails.password);
    cy.get('[type="submit"]').eq(0).click();
})

Реализация:

Определив эту кастомную команду, можете использовать ее в своих тестах следующим образом:

describe("Website Login and Product Search", () => {
    it("should navigate to the website, log in, and search for 'Macbook'", () => {
        cy.login()
        cy.get('[name="search"]').eq(0).type("Macbook");
        cy.get('button.btn.btn-default.btn-lg').click();
        cy.contains("Macbook").should('be.visible');
    });
});

Выполнение:

Когда кастомные команды не нужны

Они являются удобнейшей вещью в Cypress, но есть ситуации, когда их лучше не использовать.

Ниже приведены примеры таких ситуаций:

1. Когда можно нормально использовать нативные команды Cypress

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

Пример:

Cypress.Commands.add(click,()=>{
cy.get().click()
})

Как видим, нативной команды достаточно.

2. Неповторяемые действия:

Если в тестовом сценарии нужно выполнить очень простое действие только один раз, создание кастомной команды для него может оказаться излишним. Кастомные команды нужны для действий, которые повторяются в нескольких тестах.

Пример:

Если у вас тестовый сценарий для сайта магазина, и вам нужно протестировать одноразовое действие выбора продукта для его поиска в каталоге.

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

Ниже пример того, как это можно сделать непосредственно в тестовом скрипте:

describe("Open Cart Product search", () => {

  it("Search a product, () => {
    cy.visit("https://naveenautomationlabs.com/opencart/");
    cy.get('[name="search"]').eq(0).type("Macbook");
    cy.get('button.btn.btn-default.btn-lg').click();
    cy.contains("Macbook").should('be.visible');
  });
});

В данном примере мы заходим на сайт магазина, ищем товар «Macbook» и проверяем, что он видимый. Поскольку это действие является простым и не требует повторного использования в других тестах, нет необходимости создавать для него кастомную команду.

Еще раз: кастомные команды нужны, если тестовые действия повторяемые или используются в нескольких тестах.

3. Слишком специализированные команды:

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

4. Изменчивые действия:

Если существует тестовое действие или assertion, которое будет часто меняться в процессе разработки или тестирования, создание кастомной команды для него может привести к слишком частым обновлениям.

Заключение

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

Божественно о тестировании в Телеграме