Cypress — это инструмент тестирования на основе JavaScript, который позволяет разработчикам писать автоматические тесты для веб-приложений. Он предоставляет удобный интерфейс, перезагрузку в реальном времени и автоматическое ожидание, что позволяет разработчикам легко и эффективно создавать и запускать тесты. Cypress известен своими мощными возможностями тестирования, интуитивно понятным API и быстрым выполнением тестов, помогая разработчикам выявлять ошибки и гарантировать, что их приложения работают должным образом в разных браузерах и платформах.
Вот несколько примеров команд Cypress:
cy.visit(url): Эта команда используется для посещения определенного URL-адреса в браузере. Обычно он используется в начале теста для загрузки тестируемой страницы.
cy.visit('https://www.google.co.id/')
cy.get(selector):Эта команда используется для поиска и выбора элемента DOM на странице с помощью селектора CSS. Он возвращает объект jQuery, представляющий выбранные элементы.
cy.get('#submit-btn')
//selects the button with the id "submit-btn" on the page
cy.get('.username-input')
//.username-input is the CSS selector that matches elements with the "username-input" class.
cy.get('input[name=email]')
//selects the first input element on the page that has a name attribute with a value of 'email'
cy.get('li:first')
// selects the first <li> element on the page.
cy.contains(text):Эта команда используется для поиска на странице элемента, содержащего указанный текст. Он возвращает объект jQuery, представляющий выбранные элементы.
cy.get('.nav').contains('About')
// Yield el in .nav containing 'About'
cy.click():Эта команда используется для имитации щелчка по элементу DOM. Его можно использовать для запуска любого типа события щелчка, такого как нажатие кнопки, нажатие ссылки или выбор флажка.
cy.get('.btn').click() // Click on button
cy.contains('Welcome').click() // Click on first el containing 'Welcome'
cy.type(text):Эта команда используется для имитации пользовательского ввода в элемент DOM. Его можно использовать для ввода текста в поля ввода, выбора параметров из раскрывающихся меню и многого другого.
cy.get('input').type('Hello, World') // Type 'Hello, World' into the 'input'
cy.clear():Эта команда очищает содержимое выбранного поля ввода. Это полезно для сброса значения поля формы в исходное состояние.
cy.get('[type="text"]').clear() // Clear text input
cy.get('textarea').type('Hi!').clear() // Clear textarea
cy.wait(time):Эта команда приостанавливает тест на указанное время (в миллисекундах). Это полезно для ожидания того, что элемент станет видимым, или для завершения сетевого запроса.
cy.wait(5000) // it will be wait 5 second
cy.should():Эта команда позволяет вам сделать утверждение о выбранных элементах.
// Ensures that the selected element (using cy.get() or cy.contains()) is visible on the page.
cy.get('button').should('be.visible');
// Ensures that the selected element has a specific text content.
cy.get('h1').should('have.text', 'Welcome to my site');
// Ensures that the selected element has a specific attribute with a matching value.
cy.get('input[type="text"]').should('have.attr', 'placeholder', 'Enter your name');
// Ensure that the selected element disabled
cy.get('button').should('be.disabled');
cy.check():Эта команда используется для установки флажка или переключателя. Он позволяет имитировать пользователя, проверяющего элемент ввода, что может быть полезно для тестирования форм или других функций пользовательского ввода.
cy.get('[type="checkbox"]').check() // Check checkbox element
cy.get('[type="radio"]').first().check() // Check first radio element
cy.uncheck():Эта команда используется для снятия флажка или переключателя. Он позволяет имитировать пользователя, проверяющего элемент ввода, что может быть полезно для тестирования форм или других функций пользовательского ввода.
cy.get('[type="checkbox"]').uncheck() // Unchecks checkbox element
cy.select():Эта команда используется для выбора параметра из раскрывающегося меню или элемента выбора. Он позволяет имитировать пользователя, выбирающего вариант из раскрывающегося списка, что может быть полезно для тестирования форм или других функций пользовательского ввода.
cy.get('select').select('user-1') // Select the 'user-1' option
cy.get("select#second").select(["Yamaha", "Honda"]);// Select the 'Yamaha' and 'Honda' option
cy.select():Эта команда используется для перехвата и имитации HTTP-запросов, сделанных тестируемым приложением. Это позволяет вам проверить, как ваше приложение отвечает на различные ответы сервера, фактически не делая никаких сетевых запросов.
cy.intercept('GET', '/api/users', {
statusCode: 200,
body: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' }
]
}).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');
cy.get('.user-list').should('have.length', 2);
cy.request():Эта команда используется для выполнения HTTP-запросов из ваших тестов Cypress. Он позволяет вам взаимодействовать с внешними API или службами и проверять, как ваше приложение обрабатывает различные сетевые ответы.
cy.request('GET', '/api/users').then((response) => {
expect(response.status).to.eq(200);
expect(response.body).to.have.length(2);
});
cy.scrollTo():Эта команда используется для прокрутки области просмотра к определенному элементу или позиции на странице. Это полезно для тестирования того, как ваше приложение обрабатывает поведение прокрутки, особенно в отношении отложенной загрузки, бесконечной прокрутки и других сценариев загрузки динамического содержимого.
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
Использованная литература :
