Глубокое погружение в действенные команды Cypress

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

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

Активные команды

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

click() — Щелкнуть по элементу.

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

✅ Correct usage

  cy.get('.primary-button').click();
  
❌ Incorrect usage

  cy.click('.primary-button');

Аргументы, которые мы могли бы передать, будут position, x or y coordinate или options.

// Position

cy.get('.primary-button').click('topRight');

// X / Y Coordinates

cy.get('.primary-button').click(10, 12);

// Options(See docs below)

cy.get('.primary-button').click({ 
  altKey: true
});


нажмите | Документация Cypress
Нажмите на элемент DOM. Правильное использование Неправильное использование Позиция, в которой должен быть произведен щелчок. Центральное положение…docs.cypress.io



dblclick() — Двойной щелчок по элементу

Подобно одиночному щелчку, мы также можем выполнить двойной щелчок по элементу.

✅ Correct usage

  cy.get('.primary-button').dblclick();

❌ Incorrect usage

  cy.dblclick('.primary-button');

Аргументы, которые мы могли бы передать, будут position, x or y coordinate или options.

// Position

cy.get('.primary-button').dblclick('topLeft');

// X / Y Coordinates

cy.get('.primary-button').dblclick(5, 72);

// Options(See docs below)

cy.get('.primary-button').dblclick({ 
  shiftKey: true
});


dblclick | Документация Cypress
Дважды щелкните элемент DOM. Правильное использование Неправильное использование Позиция, в которой должен быть выполнен двойной щелчок. …docs.cypress.io



rightclick() — Щелчок правой кнопкой мыши по элементу

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

✅ Correct usage

  cy.get('#primary-menu').rightclick()

❌ Incorrect usage

  cy.rightclick('#primary-menu');

Аргументы, которые мы могли бы передать, будут position, x or y coordinate или options.

// Position

cy.get('#primary-menu').rightclick('topLeft')

// X / Y Coordinates

cy.get('.primary-button').rightclick(5, 72);

// Options(See docs below)

cy.get('.primary-button').rightclick({ 
  shiftKey: true
});


Событие контекстного меню — веб-API | MDN
Событие contextmenu возникает, когда пользователь пытается открыть контекстное меню. Это событие обычно инициируется…developer.mozilla.org





contextmenu — веб-API | MDN
Устарело: эта функция больше не рекомендуется. Хотя некоторые браузеры все еще могут его поддерживать, возможно, он уже…developer.mozilla.org\





щелчок правой кнопкой мыши | Документация Cypress
Щелкните правой кнопкой мыши элемент DOM. .rightclick() не будет открывать контекстные меню, встроенные в браузер. Следует использовать rightclick()…docs.cypress.io



type() — Введите в элемент

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

✅ Correct usage

  cy.get('.first-name-input').type('Text here');

❌ Incorrect usage

  cy.type('Text here');

Доступные аргументы для type(): text и options..

// Text

cy.get('.first-name-input').type('Text here');

// Options(See docs below)

cy.get('.first-name-input').type({
  delay: 10
});

Если вы хотите имитировать пользователя, нажимающего клавишу во время набора текста, вы можете передать клавишу, которую хотите имитировать. Например, если бы я хотел имитировать пользователя, нажимающего клавишу Ctrl перед вводом или даже во время ввода, мы могли бы сделать это (в прикрепленных документах есть больше примеров)

cy.get('.test-input').type('{ctrl}test');

// or

cy.get('.test-input').type('test {shift}things');


тип | Документация Cypress
Введите элемент DOM. Правильное использование Неправильное использование Текст, который необходимо ввести в элемент DOM. Текст передан…docs.cypress.io



clear() — Очистить значение из input или text area

Это очистит поля ввода значений

✅ Correct usage

  cy.get('[type="text"]').clear();

❌ Incorrect usage

  cy.clear();

Доступный аргумент для этого: options.

// Options(See docs below)

cy.get('[type="text"]').clear({
  log: true
});


очистить | Документация Cypress
Очистить значение ввода или текстовой области. Правильное использование Неправильное использование Передайте объект параметров, чтобы изменить значение по умолчанию…docs.cypress.io



check() — Отметьте флажок или радиоэлемент

Это будет имитировать щелчок внутри флажка, чтобы проверить параметр.

✅ Correct usage

  cy.get('[type="checkbox"]').check();

❌ Incorrect usage

  cy.check('[type="checkbox"]');

Аргументы, которые мы могли бы передать, будут Value, Values и options..

// Value

cy.get('[type="checkbox"]').check('First Option');

// Values (An Array of options you would want checked)

cy.get('[type="checkbox"]').check([
  'First Option',
  'Second Option',
  'Third Option'
]);

// Options(See docs below)

cy.get('[type="checkbox"]').check({
  log: true
});


проверить | Документация Cypress
Установите флажки или переключатели. Этот элемент должен быть флажком типа with или переключателем. Правильное использование Неправильное использование…docs.cypress.io



uncheck() — снять флажок

Это будет имитировать щелчок внутри флажка, чтобы снять флажок с опции.

✅ Correct usage

  cy.get('[type="checkbox"]').uncheck();

❌ Incorrect usage

  cy.uncheck('[type="checkbox"]');

Аргументы, которые мы могли бы передать, будут Value, Values и options..

// Value (This is a String of the value you want selected)

cy.get('[type="checkbox"]').uncheck('First Option');

// Values (An Array of options you would want unchecked)

cy.get('[type="checkbox"]').uncheck([
  'First Option',
  'Second Option',
  'Third Option'
]);

// Options(See docs below)

cy.get('[type="checkbox"]').uncheck({
  log: true
});


снимите флажок | Документация Cypress
Снимите флажки. Правильное использование Неправильное использование Значение флажка, которое следует снять. Значения флажков…docs.cypress.io



select() — Выберите option в пределах select

✅ Correct usage

  cy.get('.users-select').select('first-user-option');

❌ Incorrect usage

  cy.select('Chewbacca');

Аргументы, которые мы могли бы передать, будут Value, Values и options..

// Value (This is a String of the value you want selected)

cy.get('.users-select').select('Jeremy');

// Values (An Array of options you would want selected)

cy.get('.users-select').select([
  'Jeremy',
  'Shannon'
]);

// Options(See docs below)

cy.get('.users-select').select({
  log: true
});


выбрать | Документация Cypress
Правильное использование Неправильное использование Значение, индекс или текстовое содержимое для выбора. Массив значений, индексов или…docs.cypress.io



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

Обо мне

Привет! Я Джереми. Я пишу статьи обо всем, что связано с фронтенд-разработкой, чтобы помочь новичкам лучше понять внутреннюю работу веб-разработки. Если у вас есть какие-либо вопросы по статье, оставьте комментарий, и я свяжусь с вами в LinkedIn @JeremyGrice или на моем личном сайте VetThatCodes



vet that codes — Medium
Прочитайте текст ветеринара, который кодирует на Medium. Я работаю полный рабочий день веб-разработчиком в Red Van Workshop. Я люблю кофе…medium.com



Если вы нашли эту статью полезной или интересной, не стесняйтесь нажимать кнопку 👏 или, если у вас есть вопросы, оставьте комментарий ниже.

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



Изучите основы JavaScript
Часть 1. Объявление и использование переменных, операторов и различных способов объявления строк/шаблонных литералов.javascript.plainenglish.io





Тестирование внешнего интерфейса с помощью cypress
Сделайте свой код более безопасным, написав сквозные тестыjavascript.plainenglish.io





Создайте и разверните красивый сайт с помощью NextJS и Netlify
Хотите создать и развернуть приложение JavaScript быстрее, чем вы успеете произнести вустерский соус? Тогда смотрите не…enlear.academy



Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.