Тестирование frontend

Компонентные тесты Vue с Vitest

Создавая компонентные тесты с Cypress, я столкнулся с некоторыми неприятными их особенностями.

Во-первых такие тесты оставались очень медленными. Они не были на столько быстрее E2E как этого бы хотелось. Для каждого компонента необходимо делать много тестов. Но из-за их низкой скорости выполнения приходилось ограничивать себя лишь небольшим числом самых необходимых.

Во-вторых эпизодически появлялась ошибка failed to fetch dynamically imported module в CI-CD. И эта проблема на момент написания статьи все еще не была решена.

Поэтому я решил попробовать что-то более легковесное. Vitest был на слуху, как инструмент для тестирования, который уже себя хорошо зарекомендовал.

Читать далее
Рабочее место

Разработка ПО с использованием ИИ-ассистента

В этой заметке будут собраны принципы, которыми я, в итоге, стал руководствоваться при разработке программного обеспечения с ИИ-ассистентом. Какие-то правила были получены на собственном опыте, какие-то были позаимствованы у коллег или в интернете.

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

Читать далее
Тестирование frontend

Тестирование с playwright. Компонентный тест с Vuetify

Продолжаем тему предыдущей статьи и пробуем приблизиться к проблемам реальных проектов. В них ведь часто используются готовые наборы UI-элементов. Посмотрим как запустить компонентный тест, но с поддержкой Vuetify. Ранее мы пробовали подобное с Cypress. Сделаем похожим способом пример и создадим тесты на Playwright.

Читать далее
Тестирование frontend

Тестирование с playwright. Компонентный тест

В этой статье будем пробовать запустить компонентные тесты Playwright. Мотив простой — e2e тесты с загрузкой всей страницы достаточно медленные. Всевозможные сценарии быстрее бы было протестировать на отдельных компонентах. А основной сценарий взаимодействия с пользователем уже — в e2e. Итак попробуем настроить запуск этих самых компонентных тестов в Playwright.

Читать далее
Тестирование frontend

Тестирование с playwright. Начало

На страницах этого блога есть уже некоторое количество статей о тестировании frontend-приложений с использованием Cypress. Однако ряд проблем, с которыми пришлось столкнуться в процессе работы с этим инструментом, побудили рассмотреть также и Playwright.

Читать далее
Vue.js

Sentry. Особенности подключения к Vue SPA

При подключении Sentry к backend, например, PHP Laravel, обычно не требуется внесения замысловатых настроек. Нужно установить пакет и прописать DSN. В случае же использования Sentry для отслеживания ошибок во frontend появляется ряд специфичных моментов. В этой статье будут собраны описания таких ситуаций и решения для них.

Читать далее
DevOps

Параллельный запуск тестов Cypress. Часть 2

В этой статье продолжим тему ускорения работы тестов Cypress за счет выполнения тестов в несколько потоков. В прошлый раз мы уже рассмотрели ряд инструментов. Тесты уже запускались параллельно, но делалось это вручную. Для Cypress Cloud и Sorry Cypress мы использовали для этого несколько экземпляров терминала, а cypress-parallel сам создавал процессы. Но лучше, когда наши тесты выполняются в рамках CI-CD. Будем двигаться от простого к сложному и начнем с инструмента, с которым проще всего сделать настройку для Gitlab.

Читать далее
DevOps

Параллельный запуск тестов Cypress. Часть 1

Тесты — полезная вещь. Но в Cypress они выполняются довольно долго, даже компонентные. Чтобы их ускорить можно использовать многопоточность. В этой статье будем знакомиться с инструментами для параллельного запуска тестов с целью сокращения времени их выполнения.

Читать далее
Vue.js

Перевод строк с html-разметкой в Vue I18n

Если в вашем Vue-приложении переводы работают через Vue-i18n, то вы наверняка сталкивались с ситуациями, в которых приходилось добавлять перевод для фразы, которая содержит html-разметку. Чаще всего это ссылки (тег a) или строковые контейнеры (тег span), позволяющие сделать акцент на определенных частях фразы. В таких ситуациях самым легким решением кажется добавить фразу вместе с разметкой в JSON с переводами, а вывод сделать через v-html. Давайте посмотрим какие с этим есть проблемы и как можно сделать лучше.

Читать далее
DevOps

Cypress. Тестируем отдельные компоненты

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

Читать далее
DevOps

Cypress. Добавляем тесты в Gitlab CI-CD

В предыдущей статье описывалось как начать создавать тесты для frontend на Cypress. Если вы работаете над проектом не один, то есть шанс, что при каких-либо изменениях их будут забывать выполнять. Для уверенности в том, что тесты будут запускаться, нужно добавить соответствующую задачу в систему CI-CD. В этой статье добавим такую задачу в Gitlab.

Читать далее