Cypress actions, assertions and custom commands

09.10.2025
| Коментарів немає

Методи взаємодії з елементами у Cypress (ч.1)

Cypress надає багато методів для взаємодії з веб-елементами. Розглянемо основні:

1. .click() – клік на елементі:

Цей метод викликає подію “click” на вибраному елементі.


cy.get('.submit-button').click(); // Натискання на елемент з класом 'submit-button'

Додаткова інфо у документації.

2. .type(text) – введення тексту:

Використовується для введення тексту у вибраний елемент, такий як textarea або input:


cy.get('#username').type('john_doe'); // Введення тексту 'john_doe' в поле з ідентифікатором 'username'

Додаткова інфо у документації.

3. .clear() – очистка поля вводу:

Очищає вміст текстового поля.


cy.get('#username').clear(); // Очищення вмісту поля з ідентифікатором 'username'

Додаткова інфо у документації.

4. .select(value) – вибір опції в селекті:

Використовується для вибору конкретної опції в селект-боксі.


cy.get('#country').select('Ukraine'); // Вибір опції 'Ukraine' в селект-боксі з ідентифікатором 'country'

Додаткова інфо у документації.

5. .check() та .uncheck() – встановлення/зняття галочки в чекбоксі:

Встановлює або знімає галочку в чекбоксі.


cy.get('#agree-checkbox').check(); // Встановлення галочки в чекбоксі з ідентифікатором 'agree-checkbox'
cy.get('#unsubscribe-checkbox').uncheck(); // Зняття галочки в чекбоксі з ідентифікатором 'unsubscribe-checkbox'

Додаткова інфо тут та тут.

6. .trigger(event) – спровокувати подію:

Спровокує вказану подію на вибраному елементі.


cy.get('.drag-handle').trigger('dragstart'); // Спровокування події 'dragstart' на елементі з класом 'drag-handle'

Додаткова інфо у документації.

7. .scrollIntoView() – прокрутка елемента в область видимості:

Здійснює прокрутку елемента в область видимості.Помилка


cy.get('#footer').scrollIntoView(); // Прокрутка елемента з ідентифікатором 'footer' в обл

Додаткова інфо у документації.

8. .dblclick() – подвійний клік:

Здійснює подвійний клік лівою кнопкою миші на обраному елементі.


cy.get('button').dblclick() // подвійний клік мишою на елементі 'button'

Додаткова інфо у документації.

9. .rightclick() – клік правою кнопкою миші:

Здійснює клік правою кнопкою миші на обраному елементі.


cy.get('.menu').rightclick() // правий клік на елементі .menu

Додаткова інфо у документації.

10. .focus() – фокус на елементі:

Фокусує курсор на обраному елементі.


cy.get('input').first().focus() // фокус на першому інпуті

Додаткова інфо у документації.

Методи взаємодії з елементами у Cypress (ч.2)

11. .submit() – відправка форми:

Виконує відправку даних з форми, тобто виконується тільки на елементі <form>.


cy.get('form').submit() // відправка форми

Додаткова інфо у документації.

12. .selectfile() – імітація завантаження файлу:

Виконує завантаження файлу у інпут з типом file, додатково може імітувати drag-and-drop.


cy.get('input[type=file]').selectFile('path to file/file.json') // завантажує файл у відповідний інпут з вказівкою абсолютного чи відносного шляху до файлу
cy.get('input[type=file]').selectFile('path to file/file.json', { action: 'drag-drop' }) // завантажує файл у відповідний інпут з вказівкою абсолютного чи відносного шляху до файлу з імітацією drag-and-drop

Додаткова інфо у документації.

13. .writefile() – запис контенту у файл:

Виконує запис необхідного контенту у відповідний файл.


cy.writeFile('path/to/message.txt', 'Hello World') // запис тексту 'Hello world' у файл message.txt

Додаткова інфо у документації.

14. .wrap() – обгортання існуючих об’єктів чи значень в об’єкт Cypress.:

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


const user = {
  name: 'John Doe',
  age: 30,
};

cy.wrap(user)
  .should('have.property', 'name', 'John Doe')
  .and('have.property', 'age', 30);ю

// обгортає об'єкт user, щоб його можна було використовувати разом із командами Cypress, такими як .should() для перевірки властивостей об'єкта.

Додаткова інфо у документації.

Також необхідо вказати декілька методів взаємодії, призначених для навігації:

1. .visit() – відкриває необхідну веб-сторінку:

Виконує перехід до необхідної веб-сторінки за допогою url адреси:


cy.visit('https://www.google.com/') // перехід на сторінку www.google.com

Додаткова інфо у документації.

2. .go() – перехід на попередню або наступну сторінку:

Виконує перехід вперед або назад по сторінкам в історії браузера:


cy.go('back') // перехід на попередню сторінку
cy.go('forward') // перехід на наступну сторінку

Додаткова інфо у документації.

3. .reload() – перезавантаження сторінки:

Виконує перезавантаження поточної сторінки браузера:


cy.reload() // перезавантаження

Додаткова інфо у документації.

Окремо слід описати команду cy.wait() , яка в Cypress використовується для тимчасової зупинки виконання тесту, дозволяючи зачекати на виконання певної умови чи просто вставити затримку перед виконанням наступних команд. Використання cy.wait() повинно бути обміркованим, оскільки зайве використання затримок може призвести до повільних і ненадійних тестів.

Основний синтаксис виглядає наступним чином:Помилка


cy.wait(milliseconds)

де milliseconds – це кількість мілісекунд, на які ви хочете затримати виконання тесту.

Приклади використання:

  1. Проста затримка:

cy.get('.submit-button').click();
cy.wait(2000); // Затримка на 2 секунди
cy.get('.message').should('be.visible');

2.Затримка на виконання певної умови:


cy.get('.dynamic-element').should('exist');
cy.wait(() => {
  // Затримка, доки елемент не стане видимим
  return Cypress.$('.dynamic-element').is(':visible');
});
cy.get('.dynamic-element').click();

Важливо зауважити, що використання cy.wait() не є найкращим підходом для очікування стану елементів або подій в додатку. У випадках, коли вам потрібно очікувати на щось, краще використовувати вбудовані команди Cypress для очікування, такі як cy.should(), або команди для роботи з асинхронним кодом, такі як cy.then().


cy.get('.dynamic-element').should('be.visible').click();

Загалом, використання cy.wait() має бути обміркованим і використовуватися тільки там, де воно є необхідним.

Кастомні команди у Cypress

У Cypress ви можете створювати власні кастомні команди для полегшення та узагальнення коду вашого тестування. Кастомні команди зазвичай використовуються для повторюваних або спеціалізованих дій, щоб зробити ваші тести більш читабельними та обслуговуваними. Ось кілька аспектів імплементації кастомних команд у Cypress:

Створення кастомної команди:

  1. Визначте команду: Створіть новий файл, наприклад, commands.js, де ви визначите ваші кастомні команди. Наприклад:

Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('.submit-button').click();
});

У цьому прикладі ми створюємо кастомну команду login, яка приймає імена користувача та пароль, відвідує сторінку логіну, вводить дані та натискає кнопку для авторизації.

2.Підключення кастомних команд: Підключіть ваш файл з кастомними командами у своєму тестовому файлі (наприклад, spec.js) за допомогою import або require:


import './commands';
// або
// require('./commands');

import './commands';
// або
// require('./commands');

Використання кастомної команди:

Тепер ви можете викликати свою кастомну команду у тестах так:


cy.login('john_doe', 'password123');

Аспекти імплементації:

  1. Передача параметрів: Кастомні команди можуть приймати параметри, що робить їх більш універсальними. У прикладі вище ми передаємо імена користувача та пароль у команду login.
  2. Використання ланцюжків: Кастомні команди можуть використовувати ланцюжки (чейнінг) так само, як і вбудовані команди Cypress. Наприклад, ви можете використовувати cy.get(), should(), then(), тощо у вашій кастомній команді.
  3. Повторне використання: Коли ви створюєте кастомні команди для повторюваних дій, це полегшує їх повторне використання в різних тестах і підтримку коду.
  • Приклади імплементації:Команда для створення нового користувача та його авторизації.
  • Команда для заповнення форми з певними даними.
  • Команда для перевірки наявності елемента на сторінці.
  1. Параметризація команд: Ви можете робити ваші кастомні команди більш гнучкими, дозволяючи передавати параметри або використовувати дефолтні значення.

Cypress.Commands.add('selectProduct', (productName = 'Default Product') => {
  cy.get('.product-list').contains(productName).click();
});

Тепер ви можете викликати цю команду з або без параметра:


cy.selectProduct(); // Використається дефолтне значення
cy.selectProduct('Special Product'); // Використається переданий параметр

Створення та використання кастомних команд у Cypress робить ваш код тестів більш читабельним та обслуговуваним.

Типи кастомних команд

Кастомні команди можна поділити на три типи в залежності від рівня використання – це parent, child та dual типи.

  1. Parent тип – це команди, які викликаються на рівні батьківського об’єкту cy, тобто не залежать від контексту будь якого елементу, приклад:
// Імплементація
Cypress.Commands.add('clickLink', (label) => {
  cy.get('a').contains(label).click()
})

// Виклик
cy.clickLink('Buy Now')

2.Child тип – можуть бути викликані тільки в контексті знайденого елементу (об’єкту), приклад:

// Імплементація
Cypress.Commands.add(
  'console',
  {
    prevSubject: true, // в даній опції вказано, що попередній об'єкт винен існувати
  },
  (subject, method) => {
    method = method || 'log'
    // логування об'єкту у консоль
    console[method]('The subject is', subject)
		// повернення отриманого об'єкту
    return subject
  }
)

// Корректний виклик (кастомна команда викликана у контексті знайденого об'єкту button)
cy.get('button')
  .console('info')
  .then(($button) => {
    // завдяки тому, що у команді був return з контекстом об'єкту, маємо можливість працювати з ним у чейнінгу
  })

// Некорректний виклик
cy.console() // помилка, яка каже про те, що команда не може бути викликаною не у контексті елементу (об'єкту)

3.Dual тип – команди, які можуть бути викликані опціонально як у контексті елементу (об’єкту), так і без нього, приклад:

// Імплементація
Cypress.Commands.add('dismiss', {
  prevSubject: 'optional' // даною опцією вказуємо, що наявність контексту об'єкту опціональна
}, (subject, arg1, arg2) => {
	// обробляємо умовним блоком поведінку команди за наявністю об'єкту, або ні	
  if (subject) {
    cy.wrap(subject)
    ...
  } else {
    ...
  }
})

// Виклик
cy.dismiss() // команда буде викликана не у контексті об'єкта, тобто відпрацює умовний блок else
cy.get('#dialog').dismiss() // команда буде викликана у контексті об'єкта, тобто відпрацює умовний блок if

У Cypress, механізм overwrite використовується для перевизначення існуючих кастомних командта оригінальних команд api фреймворку, та надання нової імплементації для цих команд. Це може бути корисно, якщо вам потрібно змінити поведінку певних команд у конкретному тесті чи наборі тестів без потреби зміни вихідного коду.

Синтаксис команди overwrite:


Cypress.Commands.overwrite('commandName', (originalFn, ...args) => {
  // Нова імплементація команди
  // Можна викликати оригінальну функцію originalFn з новими параметрами args
});

Приклад використання overwrite:


// Початкова імплементація кастомної команди
Cypress.Commands.add('customCommand', () => {
  console.log('Original implementation of customCommand');
});

// Перевизначення команди
Cypress.Commands.overwrite('customCommand', (originalFn) => {
  console.log('New implementation of customCommand');
  // Виклик оригінальної функції
  originalFn();
});

// Виклик перевизначеної команди
cy.customCommand();

У цьому прикладі ми спочатку визначаємо кастомну команду customCommand з оригінальною імплементацією. Потім ми використовуємо overwrite, щоб замінити цю команду новою імплементацією. При виклику cy.customCommand(), виводиться повідомлення з новою імплементацією.

В Cypress ви можете використовувати механізм overwrite для перевизначення існуючих команд API. Давайте розглянемо приклад перевизначення команди cy.request.


// Початкова імплементація команди cy.request
Cypress.Commands.add('makeCustomRequest', (options) => {
  // Додатковий функціонал чи змінені параметри перед викликом оригінальної команди
  console.log('Making a custom request with options:', options);

  // Виклик оригінальної команди cy.request
  return cy.request(options);
});

// Перевизначення команди cy.request
Cypress.Commands.overwrite('request', (originalFn, options) => {
  // Додатковий функціонал чи змінені параметри перед викликом оригінальної команди
  console.log('Overwritten cy.request with custom logic:', options);

  // Виклик оригінальної функції cy.request
  return originalFn(options);
});

// Виклик нової команди
cy.makeCustomRequest({
  method: 'GET',
  url: 'https://jsonplaceholder.typicode.com/todos/1'
});

У цьому прикладі ми спочатку визначаємо нову кастомну команду makeCustomRequest, яка має свій власний функціонал та викликає оригінальну команду cy.request. Потім ми використовуємо overwrite, щоб перевизначити вбудовану команду cy.request та використовуємо новий функціонал чи параметри перед викликом оригінальної команди.

Перевизначення існуючих команд також може бути використано напряму, тобто не у кастомній команді, наприклад:

// Така команда буде приховувати за зірочками у логах Сайпреса будь яку інфо, яка вводиться командою type в залежності від переданої опції sensitive
Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  if (options && options.sensitive) {
    // відключення оригінального логування у випадку переданої опції sensitive
    options.log = false
    // створення власного логування
    Cypress.log({
      $el: element,
      name: 'type',
      message: '*'.repeat(text.length),
    })
  }

  return originalFn(element, text, options)
})

// Виклик
cy.get('#username').type('username@email.com') // звичайне логування
cy.get('#password').type('superSecret123', { sensitive: true }) // приховане логування

Але важливо пам’ятати, що зміна поведінки команд оригінального API фреймворку може призвести до неочікуваних наслідків його роботи, тобто необхідно чітко усівдомлювати реалізацію та її необхідність.

Кастомні запити у Cypress

Починаючи з Cypress 12, Cypress постачається з власним API для створення кастомних запитів.

Вбудовані запити Cypress використовують той самий API, який пояснено нижче.

Запити – це тип команд, які використовуються для отримання стану вашого застосунку.

Вони відрізняються від інших команд тим, що слідують трьом важливим правилам:

  1. Запити синхронні. Вони не повертають або очікують проміси.
  2. Запити можна повторювати. Як тільки ви повернете внутрішню функцію, Cypress бере контроль і обробляє повтори за вас.
  3. Запити ідемпотентні. Як тільки ви повернете внутрішню функцію, Cypress буде її викликати повторно. Повторний виклик внутрішньої функції не повинен змінювати стан вашого застосунку.

Дотримуючись цих правил, запити легко писати і надзвичайно потужні. Вони є основою, на якій ґрунтується API Cypress. Для докладнішої інформації про відмінності між командами та запитами, див. посібник з приводу можливості повторного виклику.

Також вам слід написати команду замість запиту, якщо ваш метод повинен бути асинхронним або якщо його можна викликати лише один раз.

Ми рекомендуємо визначати запити у вашому файлі cypress/support/commands.js, оскільки він завантажується перед будь-якими тестовими файлами.

Синтакс:

Cypress.Commands.addQuery(name, callbackFn)
Cypress.Commands.overwriteQuery(name, callbackFn)

Приклад коректного використання:

Cypress.Commands.addQuery('getById', function (id) {
  return (subject) => newSubject
})

Cypress.Commands.overwriteQuery('get', function (originalFn, ...args) {
  return originalFn.apply(this, args)
})

Давайте розглянемо приклад. Це справжній код Cypress – як .focused() реалізований внутрішньо, з деякими невеликими змінами для роботи з файлу підтримки. Єдине, що тут вилучено для спрощення, – це визначення TypeScript.


Cypress.Commands.addQuery('focused2', function focused2(options = {}) {
  const log = options.log !== false && Cypress.log({ timeout: options.timeout })

  this.set('timeout', options.timeout)

  return () => {
    let $el = cy.getFocused()

    log &&
      cy.state('current') === this &&
      log.set({
        $el,
        consoleProps: () => {
          return {
            Yielded: $el?.length ? $el[0] : '--нічого--',
            Elements: $el != null ? $el.length : 0,
          }
        },
      })

    if (!$el) {
      $el = cy.$$(null)
      $el.selector = 'focused'
    }

    return $el
  }
})

Однак важливо враховувати, що цей приклад містить деякі специфічні для Cypress конструкції. У цьому коді функція .focused2() є кастомним запитом, який може бути використаний для отримання фокусованого елемента на сторінці. Зокрема, використовується метод .getFocused() та логування для виведення інформації у консоль Cypress.

Ви також можете змінювати поведінку існуючих запитів Cypress. Це корисно для розширення функціональності вбудованих команд.

Cypress.Commands.overwriteQuery може перезаписувати лише запити, а не інші команди. Якщо ви хочете змінити поведінку не-запитової команди, вам слід використовувати Cypress.Commands.overwrite.

Пам’ятайте, що функції запитів залежать від this – коли ви викликаєте originalFn, впевніться, що використовуєте .call або .apply.


Cypress.Commands.overwriteQuery('get', function (originalFn, ...args) {
  console.log('get викликано з аргументами:', args)

  const innerFn = originalFn.apply(this, args)

  return (subject) => {
    console.log('get внутрішня функція викликана з об’єктом:', subject)

    return innerFn(subject)
  }
})

originalFn – це функція, яка спочатку передавалася до Cypress.Commands.addQuery – це функція, яка повертає функцію. Це дає вам доступ як до зовнішніх аргументів (перед викликом originalFn), так і до внутрішньої функції (результату виклику originalFn), надаючи велику кількість контролю над тим, як виконується запит.

Chaining in Cypress

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

Основні аспекти механізму чейнінгу в Cypress:

  1. Послідовність команд: Кожна команда Cypress повертає об’єкт, який дозволяє подальше викликання команд. Це дозволяє створювати послідовні ланцюжки команд:

cy.get('.login-form')
  .type('username')
  .should('have.value', 'username')
  .find('.submit-button')
  .click();

2.Автоматичне очікування: Cypress вбудовано підтримує автоматичне очікування на виконання команд. Це означає, що Cypress буде чекати, доки відбудеться вказана подія, перш ніж перейти до наступної команди. Немає потреби в явних операціях очікування.

3.Відстеження стану елементів: Механізм чейнінгу в Cypress дозволяє здійснювати виклики до команд, які відстежують стан елементів. Наприклад, ви можете використовувати should(‘…’) для перевірки різних властивостей елементів під час виконання тестів.


cy.get('.message')
  .should('be.visible')
  .and('have.text', 'Login successful');

4.Кастомні команди: Ви також можете визначати власні кастомні команди і використовувати їх у ланцюжках чейнінгу:


Cypress.Commands.add('login', () => {
  cy.get('#username').type('user123');
  cy.get('#password').type('password123');
  cy.get('.submit-button').click();
});

cy.login().get('.dashboard').should('be.visible');

5.Контекст ланцюжка: Ланцюжок команд утримує контекст, що дозволяє вам працювати зі змінними, об’єктами або елементами, які були вибрані попередніми командами.


const loginForm = cy.get('.login-form');
loginForm.type('username');
loginForm.should('have.class', 'active');

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

POM in Cypress (ч.1)

Page Object Model (POM) – це шаблон проектування для автоматизованих тестів, який допомагає створювати та підтримувати тести ефективно. У контексті Cypress, POM використовується для структуризації коду тестів та ізоляції локаторів та логіки сторінок. Основні аспекти реалізації POM у Cypress включають наступне:

Створення класів сторінок (Page Classes):

  • Кожна сторінка вашого веб-додатку повинна мати свій клас, який представляє цю сторінку. Наприклад, якщо у вас є сторінка авторизації, ви можете створити клас LoginPage.
  • Клас повинен містити елементи сторінки та методи для взаємодії з ними. Кожен елемент сторінки повинен бути описаний за допомогою локаторів.

// Приклад класу для сторінки авторизації
class LoginPage {
  // Локатори елементів сторінки
  get usernameInput() {
    return cy.get('#username');
  }

  get passwordInput() {
    return cy.get('#password');
  }

  get loginButton() {
    return cy.get('button[type="submit"]');
  }

  // Методи для взаємодії з елементами
  typeUsername(username) {
    this.usernameInput.type(username);
    return this;
  }

  typePassword(password) {
    this.passwordInput.type(password);
    return this;
  }

  clickLoginButton() {
    this.loginButton.click();
  }
}

// Експорт класу для використання в тестах
export default new LoginPage();

Використання класів сторінок у тестах:

  • В тестах використовуйте класи сторінок для взаємодії з елементами та логікою цих сторінок.
  • Забезпечте, щоб тести були читабельними та легко зрозумілими, використовуючи методи класів сторінок.

import LoginPage from '../pageObjects/LoginPage';

describe('Login Functionality', () => {
  it('should login successfully with valid credentials', () => {
    LoginPage
      .typeUsername('your_username')
      .typePassword('your_password')
      .clickLoginButton();

    // Додайте додаткові перевірки для підтвердження успішного входу
  });
});

import LoginPage from '../pageObjects/LoginPage';

describe('Login Functionality', () => {
  it('should login successfully with valid credentials', () => {
    LoginPage
      .typeUsername('your_username')
      .typePassword('your_password')
      .clickLoginButton();

    // Додайте додаткові перевірки для підтвердження успішного входу
  });
});

Управління локаторами:

  • Локатори елементів повинні бути визначені централізовано в класах сторінок.
  • Використовуйте унікальні та стійкі до змін локатори, наприклад, id, class або data attributes.

// Приклад класу для сторінки авторизації
class LoginPage {
get usernameInput() {
return cy.get(‘#username’); // Локатор за id
}

get passwordInput() {
return cy.get(‘#password’); // Локатор за id
}

get loginButton() {
return cy.get(‘button[type=”submit”]’); // Локатор за атрибутом type
}
}

Реініціалізація сторінок:

  • У великих проектах важливо реініціалізувати сторінку перед кожним тестом, щоб уникнути проблем зі станом елементів.
  • Використовуйте методи для очищення чи перезавантаження елементів або викликайте їх при створенні нового екземпляру сторінки.

class LoginPage {
  // ...

  // Метод для очищення введення пароля
  clearPasswordInput() {
    this.passwordInput.clear();
    return this;
  }

  // Метод для перезавантаження сторінки
  reloadPage() {
    cy.reload();
  }
}

POM in Cypress (ч.2)

Розділення відповідальності:

Розділіть код тестів та код сторінок. Тестові файли повинні містити лише виклики методів сторінок та перевірки.


// Тестовий файл
import LoginPage from '../pageObjects/LoginPage';

describe('Login Functionality', () => {
  it('should display an error message with invalid credentials', () => {
    LoginPage
      .typeUsername('invalid_username')
      .typePassword('invalid_password')
      .clickLoginButton();

    // Додайте перевірки для відображення повідомлення про помилку
  });

  it('should reset password input on reload', () => {
    LoginPage
      .typeUsername('your_username')
      .typePassword('your_password')
      .reloadPage(); // Перезавантаження сторінки

    // Додайте перевірку для очищеного поля вводу пароля
  });
});

Використання Fixtures та Параметрізація:

Використовуйте Cypress Fixtures для зберігання тестових даних та параметризуйте тести для різних сценаріїв.


// Приклад використання Fixtures та параметрізації
describe('Login Functionality', () => {
  const validCredentials = require('../fixtures/validCredentials.json');

  it('should login successfully with valid credentials', () => {
    LoginPage
      .typeUsername(validCredentials.username)
      .typePassword(validCredentials.password)
      .clickLoginButton();

    // Додайте перевірки для успішного входу
  });
});

Інтеграція зі звітами:

Використовуйте можливості Cypress для генерації звітів, щоб отримувати зрозумілу інформацію про пройдені та невдалі тести.


// Приклад використання звітів у Cypress
describe('Login Functionality', () => {
  it('should display an error message with invalid credentials', () => {
    LoginPage
      .typeUsername('invalid_username')
      .typePassword('invalid_password')
      .clickLoginButton();

    // Додайте перевірки та використання звітів для підтвердження тесту
    cy.get('.error-message').should('be.visible');
  });
});

З використанням цих аспектів, реалізація Page Object Model у Cypress допомагає створювати структуровані та підтримувані автоматизовані тести.

Однак завдяки наявності реалізації кастомних команд та специфічної реалізації асинхронності у Cypress використання POM може бути виправдане тільки у випадку наявності великого фреймворку, який покриває велику кількість функціоналу.

Додаткові матеріали

Interacting with Elements

Table of Contents

Assertions

should

and

Custom Commands

Custom Queries

Cypress, Основи JS