Ускорьте тестирование с помощью Cypress
На прошлой неделе мы уже создали компонент, в основном компонент пользовательской формы ввода.
Мы хотим, чтобы в нашем новом проекте все было проверено, и процессы обеспечения качества заставляют нас покрывать % нашего кода тестированием, поэтому мы должны быть готовы к тестированию.
Нам наскучили скучные тесты для тестирования функций или модульные тесты, которые имитируют все в ядре нигде больше, поэтому мы решили использовать Cypress, чтобы убедиться, что все работает так, как мы ожидали.
Никаких сравнений и комментариев с его предшественниками, такими как Selenium, Protactor… Он просто быстрее, его очень приятно кодировать, и он выполняет свою работу.
Введение
Подводя итог, мы должны протестировать этот компонент и его другую часть кода.
Если вы хотите увидеть, как мы создали этот пользовательский компонент, нажмите на ссылку ниже 👇
1. Интеграция Cypress
ng add @cypress/schematic
2. Подумайте, прежде чем сделать
Мы собираемся протестировать три состояния компонента: Default, Filled и Active.
В целом, мы уделяем особое внимание структуре данных. Затем, с точки зрения изменений, которые мы видим в стилях, мы углубляемся в то, что изменилось в нашем состоянии Css.
По умолчанию
Создаем компонент, проблем нет и компонент существует сам по себе с правильным полем
Заполнено
Записываем во ввод и заполненный текст должен появиться во вводе
Активный
Изменения отражаются в пользовательском интерфейсе.
3. Теперь тестируем код
Мы строим наши первые тесты здесь
cypress/integration/spec.ts
describe('Custom Input Form Component', () => {
const typeComponent = 'app-text-field-form'
beforeEach(() => {
cy.visit('/')
})
Просто зайдя на веб-страницу…
По умолчанию
Создаем компонент, проблем нет и компонент существует сам по себе с правильным полем
it(‘Default’, () => {
cy.get(typeComponent).contains(‘Another name’)
})
Заполнено
Записываем во ввод и заполненный текст должен появиться во вводе
it('Filled', () => {
const foo = 'Hello, World';
cy.get(typeComponent).type(foo)
cy.get(`${typeComponent} > input`).should('have.value', foo)
})
Активный
Изменения отражаются в пользовательском интерфейсе.
it('Active', () => {
const foo = 'Hello, World';
cy.get(`${typeComponent} > input`).first().focus()
cy.get(`${typeComponent} > input`).should('have.css', 'border', '1px solid rgb(146, 119, 255)')
})
В моем случае я просто сравнил с рамкой, потому что это единственное, что нужно добавить, когда она активна. Тем не менее, я признаю, что вы можете сделать это более элегантным способом, добавляя классы и сравнивая их в Cypress, если классы были добавлены успешно.
Вот API Cypress для взаимодействия с DOM
Откройте наши тесты
ng e2e
Код
Я не делюсь Stackblitz, потому что его сложно интегрировать с Cypress, и вы не сможете запускать команды, однако я создал репозиторий на github со всем кодом 👨💻 Я объяснял ранее.
Заключение
Если вы новичок в Cypress и тестировании или даже если вы этого не знали, я надеюсь, что эта статья может дать представление о возможностях Cypress и о том, как он помогает нам автоматизировать задачи (он поставляется с множеством функций, таких как запись видео , скриншоты и т.д.).
На сегодняшний день это лучший фреймворк для тестирования Front, такие тесты придают нам уверенности и позволяют автоматизировать взаимодействие.
Есть больше возможностей, которые мы можем увидеть в других сообщениях, поэтому подписывайтесь на меня, если хотите увидеть, как я решаю обычные проблемы, которые вы можете встретить в своей повседневной жизни. Оставайтесь с нами и до скорой встречи!!!
