50 вопросов и ответов на собеседовании по Cypress

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

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

1. Напишите тест для проверки заголовка сайта

it('should have the correct title', () => {
  cy.visit('https://example.com');
  cy.title().should('eq', 'Example Domain');
});

2. Как выполнить проверку входа в систему с помощью Cypress?

it('should log in with valid credentials', () => {
cy.visit('https://example.com/login');
cy.get('input[name="username"]').type('myusername');
cy.get('input[name="password"]').type('mypassword');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});

3. Напишите тест для взаимодействия с выпадающим меню

it('should select an option from a dropdown', () => {
  cy.visit('https://example.com');
  cy.get('select').select('Option 2');
});

4. Как вы проводите тестирование API с помощью Cypress?

it('should make an API request', () => {
  cy.request('GET', 'https://jsonplaceholder.typicode.com/users/1')
    .its('body')
    .should('have.property', 'name');
});

5. Напишите тест для проверки загрузки файла

it('should upload a file', () => {
  cy.visit('https://example.com/upload');
  const fileName = 'example.txt';
  cy.fixture(fileName).then(fileContent => {
    cy.get('input[type="file"]').attachFile({
      fileContent,
      fileName,
      mimeType: 'text/plain'
    });
  });
  cy.get('button[type="submit"]').click();
});

6. Как работать с assertions в Cypress?

it('should assert element visibility', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('be.visible');
});

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

it('should handle a confirmation dialog', () => {
  cy.visit('https://example.com');
  cy.on('window:confirm', () => true); // Always confirm
  cy.get('button').click();
});

8. Как проверить, содержит ли элемент определенный текст?

it('should check if an element contains text', () => {
  cy.visit('https://example.com');
  cy.contains('h1', 'Welcome');
});

9. Напишите тест для проверки функции поиска в Google

it('should perform a Google search', () => {
  cy.visit('https://www.google.com');
  cy.get('input[name="q"]').type('Cypress testing{enter}');
  cy.contains('h3', 'Cypress - JavaScript End to End Testing Framework');
});

10. Как создать кастомную команду в Cypress?

Cypress.Commands.add('login', (username, password) => {
  cy.visit('https://example.com/login');
  cy.get('input[name="username"]').type(username);
  cy.get('input[name="password"]').type(password);
  cy.get('button[type="submit"]').click();
});

11. Напишите тест для проверки взаимодействия с чекбоксами

it('should check checkboxes', () => {
  cy.visit('https://example.com');
  cy.get('input[type="checkbox"]').check();
});

12. Как настроить хук beforeEach в Cypress?

beforeEach(() => {
  cy.visit('https://example.com');
});

13. Напишите тест для проверки выбора даты

it('should select a date from a date picker', () => {
  cy.visit('https://example.com/datepicker');
  cy.get('input[name="date"]').type('2023-10-05');
});

14. Как работать с iframe в Cypress?

it('should interact with elements inside an iframe', () => {
  cy.visit('https://example.com/iframe');
  cy.get('iframe').then($iframe => {
    const body = $iframe.contents().find('body');
    cy.wrap(body).find('button').click();
  });
});

15. Напишите тест для проверки работы с вкладками/окнами

it('should handle opening a new tab', () => {
  cy.visit('https://example.com');
  cy.get('a[target="_blank"]').invoke('removeAttr', 'target').click();
  cy.url().should('include', '/new-page');
});

16. Как выполнить визуальное регрессионное тестирование с помощью Cypress?

it('should perform visual regression testing', () => {
  cy.visit('https://example.com');
  cy.matchImageSnapshot();
});

17. Напишите тест для проверки функции drag and drop

it('should perform a drag-and-drop', () => {
  cy.visit('https://example.com/drag-drop');
  cy.get('.draggable').trigger('dragstart');
  cy.get('.droppable').trigger('drop');
});

18. Каким образом можно моделировать сетевые условия в Cypress?

it('should simulate a slow network', () => {
  cy.visit('https://example.com');
  cy.intercept('https://example.com/api/**', { delayMs: 2000 }).as('apiCall');
  cy.get('button').click();
  cy.wait('@apiCall');
});

19. Напишите тест для проверки пагинации

it('should navigate through pagination', () => {
  cy.visit('https://example.com/pagination');
  cy.get('.next-page').click();
  cy.get('.current-page').should('contain.text', '2');
});

20. Как запустить тесты Cypress в headless-режиме?

npx cypress run --headless

21. Напишите тест для входа в систему с невалидными учетными данными и проверки сообщения об ошибке

it('should display an error message for invalid login', () => {
  cy.visit('https://example.com/login');
  cy.get('input[name="username"]').type('invalidusername');
  cy.get('input[name="password"]').type('invalidpassword');
  cy.get('button[type="submit"]').click();
  cy.contains('.error-message', 'Invalid credentials');
});

22. Как обрабатывать динамический контент с помощью Cypress?

it('should handle dynamic content', () => {
  cy.visit('https://example.com/dynamic-content');
  cy.get('.dynamic-element').should('exist');
});

23. Напишите тест для проверки функции поиска и результатов ее работы

it('should perform a search and verify results', () => {
  cy.visit('https://example.com/search');
  cy.get('input[name="search"]').type('Cypress testing{enter}');
  cy.get('.search-results').should('have.length.greaterThan', 0);
});

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

Cypress.Commands.add('login', (username, password) => {
  cy.visit('https://example.com/login');
  cy.get('input[name="username"]').type(username);
  cy.get('input[name="password"]').type(password);
  cy.get('button[type="submit"]').click();
});

25. Напишите тест для проверки наличия определенных элементов на странице

it('should validate the presence of elements', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('exist');
  cy.get('button').should('have.length.greaterThan', 0);
});

26. Как работать с переменными окружения в Cypress?

Вы можете задать переменные окружения, используя префикс CYPRESS_, например CYPRESS_BASE_URL.

27. Напишите тест для проверки кода ответа на запрос API

it('should validate the status code of an API request', () => {
  cy.request('GET', 'https://jsonplaceholder.typicode.com/users/1')
    .its('status')
    .should('eq', 200);
});

28. Как изменить размер видимой области экрана в Cypress?

it('should simulate different viewport sizes', () => {
  cy.viewport(320, 480); // Set viewport size to mobile
  cy.visit('https://example.com');
});

29. Напишите тест для проверки взаимодействия с динамической таблицей

it('should interact with a dynamic table', () => {
  cy.visit('https://example.com/table');
  cy.get('table').contains('tr', 'Row 2').contains('td', 'Edit').click();
});

30. Как обрабатывать несколько assertions в одном тесте?

it('should perform multiple assertions', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('exist');
  cy.get('button').should('have.length.greaterThan', 0);
});

31. Напишите тест, проверяющий обработку отправки формы с валидацией

it('should handle form submission with validation', () => {
  cy.visit('https://example.com/form');
  cy.get('input[name="username"]').type('myusername');
  cy.get('input[name="email"]').type('invalidemail');
  cy.get('button[type="submit"]').click();
  cy.contains('.error-message', 'Invalid email address');
});

32. Как использовать aliases в Cypress?

Aliases в Cypress позволяют сохранять и повторно использовать элементы или значения DOM на протяжении всего теста.

Например:

it('should use aliases', () => {
  cy.visit('https://example.com');
  cy.get('h1').as('pageTitle');
  cy.get('@pageTitle').should('have.text', 'Welcome');
});

33. Напишите тест для проверки выбора времени

it('should select a time from a time picker', () => {
  cy.visit('https://example.com/timepicker');
  cy.get('input[name="time"]').type('14:30');
});

34. Как выполнить кроссбраузерное тестирование с помощью Cypress?

Cypress поддерживает запуск тестов в нескольких браузерах с помощью опции --browser. Например:

npx cypress run --browser chrome

35. Напишите тест, проверяющий выход из системы

it('should log out', () => {
  cy.visit('https://example.com/dashboard');
  cy.get('button#logout').click();
  cy.url().should('include', '/login');
});

36. Как работать с динамическими URL в Cypress?

Для работы с динамическими частями URL можно использовать регулярные выражения или символы подстановки в cy.visit().

it('should handle dynamic URLs', () => {
  cy.visit('https://example.com/users/*/profile');
});

37. Напишите тест, проверяющий работу выпадающего списка с несколькими вариантами выбора

it('should handle a multi-select dropdown', () => {
  cy.visit('https://example.com/multiselect');
  cy.get('select').select(['Option 1', 'Option 2']);
});

38. Как создать проект Cypress с нуля?

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

mkdir my-cypress-project
cd my-cypress-project
npm init -y
npx cypress open

39. Напишите тест для проверки работы со всплывающей подсказкой (tooltip)

it('should interact with a tooltip', () => {
  cy.visit('https://example.com/tooltip');
  cy.get('.tooltip-trigger').trigger('mouseover');
  cy.get('.tooltip').should('be.visible');
});

40. Как управлять навигацией в Cypress?

it('should navigate to a different page', () => {
  cy.visit('https://example.com');
  cy.contains('a', 'Contact').click();
  cy.url().should('include', '/contact');
});

41. Напишите тест, проверяющий работу с динамически создаваемым списком

it('should handle a dynamically generated list', () => {
  cy.visit('https://example.com/dynamic-list');
  cy.get('.add-item').click();
  cy.get('.list-item').should('have.length', 1);
});

42. Как выполнить тестирование API в Cypress с помощью фикстур?

Вы можете использовать фикстуры для предоставления образцов данных для ваших тестов API.

Вот пример:

it('should test an API with fixture data', () => {
  cy.fixture('sample-data.json').then(data => {
    cy.request('POST', 'https://example.com/api/endpoint', data)
      .its('body')
      .should('have.property', 'status', 'success');
  });
});

43. Напишите тест для проверки работы с вкладками

it('should interact with a tabbed interface', () => {
  cy.visit('https://example.com/tabs');
  cy.contains('.tab-button', 'Tab 2').click();
  cy.get('.tab-content.active').should('contain.text', 'Tab 2 Content');
});

44. Как вы обрабатываете cookie в Cypress?

Вы можете использовать cy.setCookie(), чтобы установить cookie, и cy.getCookie(), чтобы получить cookie.

it('should handle cookies', () => {
  cy.visit('https://example.com');
  cy.setCookie('token', 'abc123');
  cy.getCookie('token').should('have.property', 'value', 'abc123');
});

45. Напишите тест, проверяющий функцию поиска с подсказками автозаполнения

it('should perform a search with autocomplete', () => {
  cy.visit('https://example.com/search');
  cy.get('input[name="search"]').type('Cypress');
  cy.get('.autocomplete-suggestion').first().click();
  cy.get('.search-results').should('have.length.greaterThan', 0);
});

46. Как обрабатывать случайные данные в тестах Cypress?

const randomUsername = `user_${Math.floor(Math.random() * 1000)}`;
cy.get('input[name="username"]').type(randomUsername);

47. Напишите тест для проверки индикатора выполнения

it('should interact with a progress bar', () => {
  cy.visit('https://example.com/progressbar');
  cy.get('button').click();
  cy.get('.progress-bar').should('have.css', 'width', '100%');
});

48. Как вы обрабатываете прокрутку окон в Cypress?

С помощью cy.scrollTo() можно прокрутить окно до определенного элемента или позиции на странице.

it('should scroll to a specific element', () => {
  cy.visit('https://example.com');
  cy.get('.scroll-target').scrollIntoView();
});

49. Напишите тест для проверки взаимодействия со всплывающим модальным окном

it('should interact with a pop-up modal', () => {
  cy.visit('https://example.com/modal');
  cy.get('button#open-modal').click();
  cy.get('.modal-content').should('be.visible');
  cy.get('.modal-close-button').click();
});

50. Как в Cypress имитировать медленную работу сети?

Для имитации медленного отклика сети можно использовать cy.intercept().

it('should simulate a slow network', () => {
  cy.visit('https://example.com');
  cy.intercept('https://example.com/api/**', { delayMs: 2000 }).as('apiCall');
  cy.get('button').click();
  cy.wait('@apiCall');
});

Перевод статьи «Top 50 Cypress Interview Questions And Answers in 2024».