Общие вопросы по Cypress на собеседовании

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

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

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

Selenium использует WebDriver для выполнения команд, отправляя их удалённо через сеть. В Cypress тесты выполняются непосредственно в браузере, то есть браузер выполняет команды, которые мы запускаем в виде скрипта.

Рассмотрим пример с Selenium. Если в тестовом скрипте есть element.click(), то при его выполнении Selenium отправляет этот код драйверам браузера, таким как ChromeDriver или GeckoDriver. Эти драйверы взаимодействуют с конкретными браузерами, например, Chrome или Firefox, и выполняют действие клика.

Рассмотрим ту же команду element.click() в Cypress. При выполнении кода Cypress напрямую отправляет команды в браузер, и действие клика выполняется сразу. То есть промежуточного слоя (WebDriver) в Cypress нет.

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

3. Можно ли в Cypress работать с языками C# или Java, как в Selenium?

Нет, Cypress — это фреймворк на базе NodeJS. Поэтому он поддерживает только такие языки программирования, как JavaScript и TypeScript.

4. Назовите различия между Cypress и Selenium

• Selenium поддерживает все основные языки, такие как C#, Java, Python, JavaScript, Ruby и другие. Cypress поддерживает только JavaScript и TypeScript.
• Команды Selenium выполняются через драйверы веб-браузеров, а команды Cypress выполняются напрямую в браузере.
• Selenium поддерживает все основные браузеры: Chrome, Edge, Internet Explorer, Safari, Firefox. Cypress поддерживает только Chrome, Edge и Firefox.
• В Selenium настройку драйверов и привязку языков необходимо выполнять самостоятельно. В Cypress мы получаем готовый фреймворк, который нужно только установить.
• Selenium может использоваться для тестирования нативных мобильных приложений с помощью Appium. Cypress не поддерживает тестирование нативных мобильных приложений.

5. Каковы преимущества Cypress?

• Cypress — это современный фреймворк на базе NodeJS, поэтому он отлично работает с одностраничными веб-приложениями и внутренними Ajax-вызовами.
• Cypress предоставляет возможность делать снимки каждого теста (функция Time Travel). Мы можем увидеть, на каком именно шаге произошла ошибка и какое было состояние приложения в этот момент. Для этого не требуется никакой дополнительной настройки: функция встроена в Cypress по умолчанию.
• Функция отладки в Cypress предоставляет доступ к инструментам разработчика. Благодаря этому можно отлаживать тесты непосредственно в браузере.
• Cypress автоматически ожидает завершения команд, утверждений или анимаций, что в большинстве случаев избавляет от необходимости добавлять дополнительные задержки в тесты.
• Поскольку Cypress напрямую выполняет команды в браузере, он работает значительно быстрее по сравнению с инструментами на основе Selenium.
• Cypress выполняет тесты и команды напрямую в браузере, что делает тесты более стабильными.
• Cypress предоставляет опцию записи видео, позволяя записывать весь процесс выполнения тестов.

6. Можно ли использовать Junit или TestNG в Cypress?

Нет, в Cypress нельзя использовать Junit или TestNG. Cypress поставляется с библиотеками утверждений Mocha и Chai.

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

Чтобы установить Cypress, сначала нужно установить Node.js, затем открыть терминал или командную строку и выполнить команду npm install cypress.

8. Как открыть окно Cypress и запустить тест?

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

Примечание. При первом выполнении команды npm cypress open, Cypress автоматически подготавливает для вас всю инфраструктуру, что включает создание структуры папок, таких как “cypress”, “fixtures”, “integration”, “plugins” и “support” и т.д. Данный процесс подготовки происходит только при первом выполнении команды. При последующих запусках этой команды открывается только окно Cypress, так как вся необходимая настройка уже была выполнена.

9. Расскажите о структуре файлов и папок в Cypress

1. Cypress использует файл cypress.json для указания любых пользовательских настроек. Этот файл находится в корневой папке проекта.
2. Папка “Cypress” находится в корневой папке проекта и является основной папкой для автоматизации. По умолчанию она содержит четыре подпапки: “fixtures”, “integration”, “plugins” и “support”:
   • Fixtures предназначена для хранения внешних данных, которые могут быть использованы в тестах. Обычно это JSON-файлы, содержащие тестовые данные, такие как списки пользователей, данные для заполнения форм и т.д. Эти файлы можно использовать в тестах с помощью команды cy.fixture().
   • Integration является основной папкой для хранения тестовых файлов, содержащих тесты, написанные на JavaScript или TypeScript.
   • Plugins содержит специальные файлы, которые позволяют изменять поведение Cypress. Здесь можно создавать плагины, которые будут выполняться в Node.js до того, как проект загрузится, перед запуском браузера или во время выполнения тестов. Эти плагины могут быть использованы для пред- или постобработки данных, настройки окружения, изменения настроек браузера и т.д. Например, в этой папке можно создать файл index.js, в котором вы можете настроить генерацию HTML-отчета после выполнения всех тестов.
   • Support содержит файлы, которые выполняются перед каждым тестом. Обычно здесь находится файл index.js, который автоматически подключается к каждому тесту и может содержать пользовательские команды, перехват определенных запросов и любые другие настройки, которые должны быть применены ко всем тестам.

10. Что такое Cypress CLI?

Cypress CLI — уникальная функция в Cypress, которая позволяет запускать тесты из командной строки. Эта функция полезна при запуске тестов в CI/CD пайплайнах. Cypress CLI предоставляет множество опций для управления поведением тестов, например, команда npm cypress run запускает тесты из командной строки.

11. Как запустить файл спецификации (specfile) из командной строки?

Можно запустить один файл спецификации из командной строки, используя опцию --spec и указав имя теста: npm cypress run --spec="myspec.ts".

12. Как выполнить тест “Hello World” в Cypress?

1. В папке “cypress/integration” создайте новый файл, например, hello_world.spec.js. Этот файл будет содержать ваш первый тест.
2. В данном файле спецификации должен быть блок describe() и it().
3. Откройте Cypress и выберите файл hello_world.spec.js. Cypress выполнит тест и покажет результаты прямо в браузере.

describe('Hello World Test', () => {
  it('Displays "Hello World" on the page', () => {
    cy.visit('https://example.com') // Замените на URL вашего приложения
    cy.contains('Hello World').should('be.visible')
  })
})

13. Можно ли создавать тесты не в “integration”, а в другой папке?

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

14. Как посмотреть настройки по умолчанию?

Настройки по умолчанию можно увидеть в окне Cypress в разделе Test Runner > Settings and Configurations.

15. Как создать тестовые наборы?

Блок describe() в Cypress аналогичен тестовому набору, внутри которого каждый тест может быть создан как отдельный блок it().

16. Назовите несколько команд в Cypress

Для перехода на определённый сайт используется команда cy.visit():

cy.visit('http://www.google.com')

cy.log() используется для отображения логов во время выполнения:

cy.log('test 123')

cy.get() используется для получения элемента. Как только мы получаем элемент, мы можем выполнить действие над ним: кликнуть, ввести и т.д:

let myElement = cy.get('#username')

cy.url() используется для получения текущего URL страницы, которая активна в данный момент. Допустим, вы перешли на сайт с помощью cy.visit('https://google.com'). Теперь вы можете использовать cy.url(), чтобы получить URL:

// Пример кода:
cy.visit('https://www.google.com'); // Перешли на сайт
let myurl= cy.url(); //Получаем URL
cy.url().should('include', 'google'); 

17. Как воспроизвести клик по элементу?

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

Если мы хотим нажать на кнопку поиска Google, сначала нужно получить элемент поиска с помощью селекторов: cy.get('#search').click().

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

.click() используется для клика по элементу:

cy.get('#search').click()

.dblclick() позволяет выполнить двойной клик по элементу:

cy.get('input[name="btnK"]').dblclick()

.rightclick() используется для клика правой кнопкой мыши по элементу:

cy.get('body').rightclick()

.type() используется для ввода текста в элементы, такие как текстовые поля:

cy.get('input[name="textbox"]').type("Это тест")

С помощью .clear() можно очищать поля или текстовые ячейки:

cy.get('input[name="q"]').clear()

.check() используется для отметки чекбоксов или радиокнопок:

cy.get('input[name="chkbox"]').check()

Для снятия отметки с чекбоксов или радиокнопок используется.uncheck():

cy.get('input[name="chkbox"]').uncheck()

.select() используется для выбора опции в элементе <select>, который представляет собой выпадающий список:

cy.get('select').select('user-1')

19. Допустим, при клике по ссылке на веб-странице открывается новое окно. Как проверить текст в новом окне?

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

Рассмотрим пример:

<a href="http://google.com" target="_blank"> Take me to Google </a>

Нажатие на ссылку “Take me to Google” откроет новое окно, поскольку используется атрибут target="_blank". Если мы удалим этот атрибут, страница откроется в том же окне. Это можно сделать с помощью кода:

// мы можем удалить этот атрибут - target='_blank',
// чтобы ссылка открылась в том же окне

cy.get('a[href*="google"]').invoke('removeAttr', 'target').click()

// После клика по ссылке <a> проверяем,
// что мы действительно перешли на нужную страницу

cy.url().should('include', 'google')

20. Какие селекторы поддерживает Cypress?

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

21. Можно ли использовать XPath в Cypress?

Cypress не поддерживает XPath по умолчанию, но если установить сторонний плагин, такой как cypress-xpath, можно использовать XPath в своих скриптах.

Сначала нужно установить cypress-xpath в вашем проекте с помощью команды:  npm install cypress-xpath. Затем нужно добавить запись в файл проекта cypress/support/index.js:

require('cypress-xpath')

Теперь вы можете использовать XPath в своих скриптах, например:

cy.xpath('//ul[@class="todo-list"]//li');

22. Что такое переменные окружения в Cypress?

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

Для использования переменной окружения её нужно определить в файле cypress.json:

{
  "env": {
    key: "value"
  }
}

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

cy.visit(Cypress.env('key'))

Значение переменной окружения можно изменять динамически с помощью аргументов командной строки: cypress run --env "Key"="Value".

Рассмотрим пример. Давайте создадим переменную окружения в cypress.json:

{
  "env": {
    token: "ierimvrpenrjgn"
  }
}

Получаем это значение переменной окружения:

let tokenvalue = Cypress.env(‘token’)

Мы можем динамически изменить значение этой переменной с помощью командной строки: cypress run --env "token"="ieoeeoeieoeie".

23. Как динамически изменить baseUrl?

При выполнении тестов в разных окружениях (Staging, QA, Production), как правило, изменяется только URL сайта. Он называется baseUrl, и его можно динамически изменять, передавая baseUrl в командной строке.

Сначала нужно задать параметр baseUrl в cypress.json:

"baseUrl": "https://qa.web.com"

Затем можно переопределить этот baseUrl в командной строке при выполнении тестов:

npx cypress run --config baseUrl="https://www.staging-website.com/"

Эта команда выполнит тесты на сайте Staging. Ранее настроенный qa.web.com будет переопределен значением baseUrl, переданным через аргумент командной строки.

24. Как можно сохранять cookies?

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

Например, у нас есть такой код:

describe('my test', () => {
  it('test1', () => {
    // Код теста
  });

  it('test2', () => {
    // Код теста
  });

  it('test3', () => {
    // Код теста
  });
});

Здесь у нас есть три теста: test1, test2, и test3. Предположим, что мы выполнили вход в свое приложение в test1. После выполнения test1, при переходе к test2, система снова запросит авторизацию, потому что сессии и куки очищаются после выполнения test1. Это стандартное поведение Cypress.

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

describe('мой тест', () => {
  beforeEach(() => {
    Cypress.Cookies.preserveOnce('session_id', 'remember_token')
  });

  it('test1', () => {
    // Код теста
  });

  it('test2', () => {
    // Код теста
  });

  it('test3', () => {
    // Код теста
  });
});

Теперь, благодаря использованию Cypress.Cookies.preserveOnce, сессии и куки будут сохраняться между тестами, и нам не придется снова авторизоваться в каждом из них.

25. Что такое пользовательские команды?

Cypress поставляется с набором стандартных команд, таких как cy.visit, cy.reload и т.д. Но можно создавать и свои собственные команды.

Например, можно создать команду cy.login(), которая будет вводить имя пользователя и пароль и нажимать кнопку отправки.

Все пользовательские команды сначала настраиваются в файле cypress/support/command.js. В этом файле нужно создать команду:

Cypress.Commands.add("login", (username, password) => {

  // добавление новой команды под названием login

  cy.get("#username").type(username);
  cy.get("#password").type(password);
  cy.get("#login").click();

});

После добавления команды вы можете использовать её в своем скрипте следующим образом:

cy.visit("http://mysite.com/login.html");
cy.login('Myusername','My Passowrd');

25. Как воспроизвести нажатие клавиш?

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

cy.get(‘login’).type('{shift}{alt}hello'))

26. Как получить значение из файла конфигурации Cypress?

Значения из файла конфигурации Cypress можно получить с помощью команды Cypress.config().

Если в файле конфигурации указано значение pageLoadTimeout, как показано ниже:

{

  "pageLoadTimeout": 60000

}

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

let timeout = Cypress.config('pageLoadTimeout')

27. Как получить заголовок страницы?

Для получения заголовка текущего активного окна используется cy.title():

cy.visit('http://www.facebook.com');
cy.title().should('eq','Facebook Login or Signup');

28. Как использовать ожидание в Cypress?

cy.wait() позволяет приостановить выполнение теста на определенное количество миллисекунд или до завершения определенного события:

cy.wait(1000)

29. Как получить первый и последний дочерний элемент?

Для получения первого и последнего дочернего элемента используются команды.first() и .last().

Допустим, у нас есть селектор, который возвращает массив из 6 элементов:

cy.get('input[name="rows"]')

Тогда первый дочерний элемент можно получить следующим образом:

cy.get('input[name='rows']).first()

Соответственно, последний дочерний элемент можно получить так:

cy.get('input[name="rows"]').last()

30. Что такое теневая модель документа и как получить к ней доступ?

Теневая модель документа (shadow DOM или теневой DOM) — это мощный инструмент веб-разработки, который позволяет создавать изолированные и инкапсулированные компоненты пользовательского интерфейса. Она создает внутри элемента скрытое от остального документа “теневое дерево”, обеспечивая уникальные CSS-правила и другие элементы, которые не влияют на внешний контекст и остаются недоступными для изменений из главного документа.

Начальная точка, с которой начинается “теневое дерево”, называется корневым элементом теневого дерева (shadow root). Элемент, к которому привязан корневой элемент теневого дерева, называется ведущим элементом теневого дерева (shadow host).

Предположим, что у нас есть теневая модель документа:

<div class="shadow-host">

  #корневой элемент теневого дерева

  <button class="my-button">Click me</button>

</div>

Мы можем получить к ней доступ с помощью следующего кода:

cy.get('.shadow-host').shadow().find('.my-button').click()

Перевод статьи «Common Cypress Interview Questions».