15 лучших вопросов на собеседовании по Cypress

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

Вы наверняка слышали, как много сейчас говорят о Cypress. Этот инструмент широко применяется для проведения сквозного (end-to-end) тестирования, что и неудивительно: он довольно удобен в использовании. Это сделало его популярным не только среди тестировщиков, но и среди разработчиков. 

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

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

1. Что такое Cypress?

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

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

1. Скорость. Поскольку Cypress работает в браузере, тесты выполняются намного быстрее. Здесь нет посредников и промежуточных слоев, поэтому процесс тестирования заметно ускоряется.
2. Точность. Работая в браузере, Cypress взаимодействует с вашим сайтом точно так же, как реальный пользователь. Это делает тесты более реалистичными и надежными.
3. Стабильность. Тесты реже сталкиваются с ошибками или неожиданными проблемами, так как они запускаются в той же среде, где будет использоваться сайт.

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

Одна из ключевых особенностей Cypress — поддержка языка JavaScript, который является основным языком для веб-разработки. Это означает, что разработчики и тестировщики могут писать тесты на том же языке, что и код приложения. Это улучшает сотрудничество и понимание между командами.

2. Чем Cypress отличается от других инструментов тестирования, таких как Selenium?

Хотя и Cypress, и Selenium являются инструментами для тестирования веб-приложений, они имеют явные различия:

	CYPRESS	SELENIUM
Архитектура	Запускается непосредственно в браузере, что обеспечивает более быстрое выполнение тестов, повышенную надежность и упрощенную настройку.	Работает через команды, отправляемые в браузер с помощью драйвера, что может привести к потенциальным задержкам и сложностям.
Язык	Полностью построен на JavaScript.	Поддерживает множество языков, включая Java, C# и Python.
Асинхронность	Легко справляется с асинхронностью JavaScript, что приводит к более читаемым и стабильным тестам.	Иногда требуется дополнительная настройка или код для эффективной работы с асинхронными операциями.
Обратная связь	Предоставляет обратную связь в реальном времени с помощью своего интерактивного тест-раннера.	Не имеет интерактивного тест-раннера для обратной связи в реальном времени.

3. Каковы ключевые особенности Cypress?

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

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

4. Как установить и настроить Cypress?

Установка и настройка Cypress — это несложный процесс.

1. Сначала установите Cypress, выполнив команду npm install cypress --save-dev.
2. После установки откройте Cypress с помощью команды npx cypress open. Эта команда откроет Cypress Test Runner, и вы можете начинать писать свои тесты.

5. Как написать базовый тест-кейс в Cypress?

Написать тест-кейс в Cypress очень просто благодаря его понятному синтаксису:

describe('Базовый тест', () => {
  it('должен посетить сайт SDET Unicorns и проверить его заголовок', () => {
    cy.visit('https://sdetunicorns.com')
    cy.title().should('eq', 'Master Software Testing & Automation Online | SDET Unicorns')
  })
})

Этот код перейдет на сайт sdetunicorns.com и проверит, что его заголовок совпадает с ожидаемым. Функции describe и it взяты из Mocha — фреймворка для тестирования, который Cypress использует “под капотом”.

6. Как Cypress обрабатывает асинхронные операции?

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

Это исключает необходимость явных ожиданий или задержек в тестах. Например, вы хотите дождаться, пока элемент станет видимым, прежде чем взаимодействовать с ним:

cy.visit('https://sdetunicorns.com');
// Предположим, что эта кнопка загружает контент после задержки
cy.get('#loadButton').click();  
cy.get('#loadedContent').should('be.visible').and('contain', 'Loaded Successfully');

В этом примере, после нажатия на #loadButton, Cypress автоматически подождет, пока элемент #loadedContent не станет видимым, прежде чем продолжить проверку.

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

7. Какие распространенные команды есть в Cypress и как их использовать?

Cypress предоставляет богатый набор команд для взаимодействия с объектной моделью документа (Document Object Model или DOM), выполнения проверок и других действий. Вот некоторые из часто используемых команд:

• cy.visit(url) переходит на указанный веб-сайт или страницу.
• cy.get(selector) получает один или несколько DOM-элементов по указанному селектору.
• cy.contains(content) находит элемент, содержащий указанный текст. Этот метод может использоваться для поиска текста в любом DOM-элементе.
• cy.click() кликает на найденный DOM-элемент. Этот метод может быть вызван после cy.get() или cy.contains().
• cy.type(text) вводит указанный текст в найденный DOM-элемент, такой как поле ввода или текстовая область.

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

// Переход на сайт
cy.visit('https://sdetunicorns.com');

// Ввод текста в поле поиска
cy.get('input[name="search"]').type('Testing');

// Проверка введенного текста
cy.get('input[name="search"]').should('have.value', 'Testing');

// Нажатие на кнопку поиска
cy.contains('Search').click();

Этот код переходит на сайт SDET Unicorns, вводит “Testing” в поле поиска и затем нажимает кнопку с надписью “Search”.

8. Как запускать тесты в Cypress?

Чтобы запустить тесты в Cypress, используйте Cypress Test Runner. Вот как это сделать:

1. Откройте Cypress Test Runner, выполнив команду npx cypress open в терминале.
2. В Test Runner вы увидите список ваших файлов с тестами. Нажмите на нужный файл, чтобы запустить его.
3. Тесты будут выполняться в браузере, и вы сможете видеть результаты в реальном времени.

Также вы можете запустить тесты в фоновом режиме из командной строки, используя команду npx cypress run.

9. Как использовать фикстуры в Cypress?

Фикстуры (fixtures) в Cypress позволяют загружать внешние статические данные, которые можно использовать в тестах. Чтобы использовать фикстуру:

1. Поместите файл фикстуры (например, data.json) в каталог cypress/fixtures.
2. В своем тесте используйте cy.fixture() для загрузки данных.

Пример кода:

cy.fixture('data.json').then((data) => {
  cy.get('input[name="username"]').type(data.username);
  cy.get('input[name="password"]').type(data.password);
});

В этом примере тест загружает данные из фикстуры data.json и использует их для ввода в поля ввода.

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

10. Как проводить тестирование, основанное на данных?

В Cypress тестирование, основанное на данных, предполагает запуск одного и того же набора тестов с различными входными данными. Это можно сделать, используя команду cy.fixture() в сочетании с методами массива JavaScript.

1. Создайте файл фикстуры. Поместите файл фикстуры (скажем, users.json) в каталог cypress/fixtures. Этот файл должен содержать массив данных, которые вы хотите использовать в тестах, например:

[
  { "username": "user1", "password": "pass1" },
  { "username": "user2", "password": "pass2" },
  { "username": "user3", "password": "pass3" }
]

2. Загрузите данные и выполните тесты. Используйте команду cy.fixture() для загрузки данных и метод forEach() для итерации по ним.

Пример кода:

cy.fixture('users.json').then((users) => {
  users.forEach((user) => {
    cy.visit('https://sdetunicorns.com/login');
    cy.get('input[name="username"]').type(user.username);
    cy.get('input[name="password"]').type(user.password);
    cy.get('button[type="submit"]').click();
    cy.contains('Logout').should('be.visible');
  });
});

В этом примере тест загружает список пользователей из фикстуры users.json и выполняет тест входа для каждого пользователя.

11. Как проводить кроссбраузерное тестирование?

Cypress поддерживает кроссбраузерное тестирование с браузерами семейства Chrome (включая Edge и Electron) и Firefox. Вы можете легко переключаться между этими браузерами в интерфейсе Cypress.

Кроме того, есть экспериментальная поддержка WebKit (движок Safari). Используя командную строку Cypress, вы можете указать конкретную версию браузера или путь. Для того, чтобы запустить тесты в Chrome, выполните команду cypress run --browser chrome.

12. Как тестировать iframes в Cypress?

Cypress не имеет встроенной поддержки взаимодействия с iframes. Но, чтобы упростить этот процесс, можно использовать плагин cypress-iframe. После установки плагина вы сможете применить команду cy.iframe() для обращения к элементам внутри iframe.

• Установите плагин cypress-iframe: npm install -D cypress-iframe
• Импортируйте плагин в ваш файл теста:

import 'cypress-iframe';

• Используйте команду cy.iframe() для взаимодействия с элементами внутри iframe:

cy.visit('https://sdetunicorns.com');
cy.iframe().find('button').click();

В этом примере тест сначала посещает страницу, а затем использует cy.iframe() для поиска и клика по кнопке внутри iframe.

13. Можно ли тестировать API с помощью Cypress?

Да, Cypress не ограничивается только тестированием пользовательского интерфейса. Он также предоставляет команды для тестирования API с использованием команды cy.request().

Например, можно протестировать GET-запрос:

cy.request('GET', '/api/users').then((response) => {
  expect(response.status).to.eq(200);
  expect(response.body).to.have.property('users');
});

В этом примере тест выполняет GET-запрос к API /api/users и проверяет, что статус ответа равен 200, а в теле ответа присутствует свойство users.

14. Как запускать тесты параллельно?

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

Чтобы запустить тесты параллельно:

1. Создайте аккаунт в Cypress Dashboard и получите ключ записи.
2. Используйте флаг --parallel вместе с --record с командой cypress run: cypress run --record --key YOUR_RECORD_KEY --parallel.

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

15. Как работать с несколькими вкладками или окнами?

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

Вместо тестирования поведения в новой вкладке, можно протестировать поведение, которое ведет к её открытию. Например, проверить, что ссылка имеет правильный атрибут href, не кликая на неё:

cy.get('a#external-link').should('have.attr', 'href', 'https://example.com');

В этом примере проверяется, что ссылка содержит правильный URL, даже если фактическое открытие ссылки не происходит.

С помощью cy.request() можно проверить, как работает новая страница или API, не открывая её в новой вкладке:

cy.request('GET', 'https://example.com/api/data').then((response) => {
  expect(response.status).to.eq(200);
  expect(response.body).to.have.property('data');
});

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

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

Заключение

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

Изучите, как оптимизировать тесты, как использовать передовые методы и подходы, а также как отлаживать и поддерживать тесты в вашем проекте. Удачи на интервью!

Перевод статьи «Top 15 Cypress Interview Questions: You Must Know These!».