Тестирование полосовых элементов с помощью Cypress
В этой статье мы рассмотрим, как мы можем протестировать веб-сайт, который использует фреймы, такие как Stripe Elements.
Недавно мы начали использовать Cypress в качестве среды тестирования E2E и полюбили его за простоту и удобство использования. Если вы еще не использовали его, попробуйте!
Хотя Cypress элегантно работает с вашим собственным кодом, это может вызвать затруднения, если вы используете сторонние компоненты в своем веб-приложении. В нашем случае пользователи могут расплачиваться кредитной картой. Для сбора данных о платеже мы используем Stripe Elements, который загружает iframe на наш сайт. Однако Cypress еще не поддерживает iframe. К счастью, mightyiam нашел обходной путь для доступа к фреймам и их содержимому с помощью Cypress.
Настройка
Мы предполагаем, что вы настроили проект Cypress и запустили набор тестов. Структура вашего проекта должна выглядеть как на картинке ниже.
Начнем с расширения файла commands.js.
Добавьте этот код в свой commands.js файл. Теперь вы можете использовать cy.getWithinIframe('a selector') для таргетинга на любой элемент в iframe.
Если вам нужна большая гибкость, вы можете использовать iframeLoaded и getInDocument, как показано слева. Вы можете связать многие команды Cypress после getInDocument.
Ввод в элементы полосы
Теперь мы можем вводить данные кредитной карты. В инструментах разработчика вашего браузера вы можете увидеть структуру iframe, загружаемого Stripe Elements.
Как вы можете видеть в выделенной области, есть ввод, который мы можем выбрать с помощью [name="cardnumber"]. С помощью этой информации мы можем сказать Cypress заполнить номер тестовой кредитной карты 4242 4242 4242 4242, а также другую необходимую информацию. Другие части ввода - это exp-date, cvc и postal.
Интегрируйте код в свой набор тестов и запустите его. Вы должны увидеть Cypress, заполняющий данные о кредите.
Вот и все! Теперь вы можете протестировать весь процесс заказа без каких-либо взломов.
Устранение неполадок
Если вы используете Cypress с Chrome, возможно, вам придется отключить веб-безопасность, добавив "chromeWebSecurity": false в файл cypress.json.
Открытые вопросы
Мы не тестировали, как это работает с несколькими фреймами.
