Браузерные E2E-тесты в Docker

Написание E2E-тестов для проверки работы проекта из фронтенда и API. Тестирование интерфейса ReactJS-приложения в браузере в Docker-контейнере.

  • 00:00:52 Типы тестов
  • 00:08:34 Расположение E2E тестов
  • 00:10:08 Behavior Driven Development
  • 00:12:14 Gherkin Syntax
  • 00:19:38 Выбор E2E фреймворка
  • 00:22:50 Установка CucumberJS
  • 00:25:53 Написание тестового сценария
  • 00:30:55 Проверка стиля для тестового кода
  • 00:32:25 Браузерный эмулятор Puppeteer
  • 00:34:43 Установка браузера в Docker
  • 00:39:31 Объект тестового мира World
  • 00:43:16 Запуск тестового браузера
  • 00:46:01 Открытие целевых страниц
  • 00:47:39 Подключение пакета expect chai
  • 00:48:39 Проверка элементов по селекторам
  • 00:50:10 Использование data-атрибутов для селекторов
  • 00:53:33 Повторное использование step-ов
  • 00:54:48 Параметризованные шаги
  • 00:56:52 Генерация скриншотов при ошибках
  • 01:00:40 Сохранение отчётов тестирования
  • 01:05:08 HTML-отчёты с cucumber-html-reporter
  • 01:10:32 Параллельный запуск
  • 01:12:08 Таймауты и повторы
  • 01:13:54 Дымовые Smoke тесты
Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (20)
Руслан

Спасибо, отличное видео!!

Ответить
Александр Кулик

Спасибо. Все супер. Единственный момент для винды s WSL не работает команда docker-compose, ей нужно docker-compose.exe. Если кто-то знает как решить проблему, кроме как банальной замены, пожалуйста поделитесь.

Ответить
ХОРХОЙ

попробуйте сделать ссылку ln -s "полный путь к docker-compose.exe" "полный путь к папке со ссылками типа /usr/bin"/docker-compose

Ответить
Максим Кремнев

Можно попробовать совместное использование $PATH для WSL. Еще как вариант, если у тебя Win Pro то поставить Docker Desktop, там интеграция уже с WSL.

Ответить
Arunas

Спасибо.

Ответить
Bondarenko Alexandr

Отличный урок! Спасибо!

Ответить
fedot

Спасибо, Дмитрий, материал бесценен, а будет ли про хранение картинок аукциона где-нибудь в S3 ? Наверняка ведь есть какой-нибудь готовый докер образ под такую важную тему.

Ответить
Олег

Ставите minio, добавляете пакеты thephpleague/flysystem + thephpleague/flysystem-aws-s3-v3 и вперёд.

Ответить
fedot

Спасибо!

Ответить
Дмитрий Елисеев

Да, хранилища будут. Для их эмуляции FTP или S3 хранилищ для локальной разработки как раз подключают образы вроде stilliard/pure-ftpd или minio.

Ответить
fedot

Спасибо, отлично.

Ответить
Александр Л

Вопрос по minio может кто сталкивался, есть два котейнера в одной сети апп и минио. Не получается добавить файл из апп, если AWS_ENDPOINT=http://minio:9000 хотя по идее должно срабатывать. Нужно заходить в контейнер minio и смотреть урл апи который динамический API: http://192.168.16.2:9000 , если подставить его в env AWS_ENDPOINT то все срабатывает. Может кто знает как решить?? В браузере http://localhost:8900 консоль открывает, проблема именно если с прилаги пробуешь загрузить файл

Ниже докер-композе

    minio:
        image: 'minio/minio:latest'
        ports:
          - '${FORWARD_MINIO_PORT:-9000}:9000'
          - '${FORWARD_MINIO_CONSOLE_PORT:-8900}:8900'
        environment:
          MINIO_ROOT_USER: 'sail'
          MINIO_ROOT_PASSWORD: 'password'
        volumes:
          - 'sailminio:/data/minio'
        networks:
          - sail
        command: minio server /data/minio --console-address ":8900"
        healthcheck:
          test: [ "CMD", "curl", "-f", "http://localhost:9000/minio/health/live" ]
          retries: 3
          timeout: 5s
    app:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP:-1000}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        environment:
            WWWUSER: '${WWWUSER:-1000}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
Ответить
Дмитрий Елисеев

У нас minio подключается в 60-ом эпизоде для загрузки бэкапа БД. И всё там работает.

Ответить
Александр Л

Да, спасибо за ответ, уже разобрался. На самом деле все работает отлично из коробки, не внимательно изучил документацию к пакету который адаптер предоставляет. Нужно было добавить в конфиг пару строчек

Ответить
Павел

Спасибо, хороший урок! Есть вопрос, для e2e тестов используется ли практика приводить БД в первоначальный вид перед каждым сценарием? Чтобы один сценарий не мог повлиять на результаты другого. Безусловно, в этом случае у нас проявляются недостатки. Падает производительность, и мы не можем использовать параллелизм, по причине того, что каждый сценарий будет обнулять базу, которая в 1 экземпляре. И здесь нужно извращаться и каждый сценарий как-то обрабатывать отдельным изолированным экземпляром приложения. Или просто отказываемся от параллелизма, что совсем убьет скорость запуска таких тестов. Либо e2e нужно продумывать так, чтобы минимизировать сайд-эффекты?

Ответить
Дмитрий Елисеев

Да, оптимальнее делать любые тесты не мешающими друг другу. Для E2E тестов это важнее, так как система может состоять из нескольких сервисов и сбрасывать БД каждого сервиса снаружи будет не очень удобно.

Ответить
А

Тут как с ansible, очень поверхностно вышло. В целом понятно что и зачем делается, но не детально. По этим двум темам хотелось бы отдельные уроки.

Ответить
Ruslan

Спасибо. Я думал в Ларавел e2e это что-то космическое, но тут еще более полезное с Огурцом.

Ответить
Герман

C cucumber ^8.0.0-rc.1 формирование имени файла скриншота через sourceLocation.uri и sourceLocation.line не работает. Выкрутился так (хотя детализация месторасположения ошибки только до сценария получается):

hooks.js

After(async function (testCase) {
    if (testCase.result.status === Status.FAILED) {
        const name = testCase.pickle.uri + '-' + testCase.pickle.name
        await this.page.screenshot({ path: 'var/' + name.replace(/\/|\s/g, '_') + '.png', fullPage: true })
        }
    await this.page.close()
    await this.browser.close()
})
Ответить
Герман

О. спасибо, тезка! Тоже столкнулся. И да, хотелось бы более полного раскрытия темы. Понятно что доки курить, но все же...

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex
MailRu
GitHub
Google