Testplane Blog

Селективность запуска тестов

Wed, 03 Dec 2025 14:00:00 GMT

В Testplane добавлена селективность запуска тестов — возможность автоматически запускать только те тесты, для которых изменились файлы, от которых они зависят.

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

Как использовать

Узнайте больше об этом в нашей документации Как настроить селективность при запуске тестов.

Заключение

Обновляйтесь на версию Testplane 8.36.0 или более позднюю и попробуйте селективность в своих проектах! В случае обнаружения проблем приходите в issue github — мы вам обязательно поможем!

Testplane vs Playwright: Полное сравнение инструментов для автоматизации тестирования

Mon, 10 Nov 2025 17:00:00 GMT

И Testplane, и Playwright — это решения для end-to-end тестирования, но они имеют разные подходы и возможности. В этой статье мы проведём детальное сравнение этих инструментов, чтобы помочь вам сделать правильный выбор.

Краткий обзор инструментов

Testplane — это инструмент для автоматизации тестирования веб-приложений, разработанный командой Яндекса. Он активно используется как в крупных, так и в небольших проектах компании и поддерживает широкий спектр браузеров и устройств.

Playwright — инструмент от Microsoft, который быстро завоевал популярность благодаря своей простоте использования и современному подходу к автоматизации.

Ключевые различия

Поддержка браузеров и мобильных устройств

подсказка

Testplane поддерживает как десктопные браузеры, так и мобильные устройства

Одним из ключевых преимуществ Testplane является его универсальность в работе с десктопными браузерами и мобильными устройствами. В отличие от Playwright, который фокусируется на современных десктопных браузерах последних версий, Testplane предоставляет полноценную поддержку как старых, так и новых версий браузеров. Это важно для компаний, которые работают с пользователями, использующими устаревшие браузеры. Полное сравнение двух подходов можно посмотреть в таблице ниже:

Критерий	Testplane	Playwright	Почему это важно
Источник браузеров	Оригинальные бинарники от браузерных вендоров	Кастомные сборки	Максимальная приближённость к реальным устройствам
Версии браузеров	Любые — от legacy до новейших	Версия браузера привязана к версии Playwright	Одновременное покрытие пользователей как на новых, так и на устаревших браузерах
Мобильные устройства	Android и iOS: браузеры + нативные приложения	Нет	Единый стек для десктопа и мобильных устройств
Удаленный грид	Selenium Grid/Selenoid/BrowserStack/SauceLabs (любой удаленный грид)	Официально — платный Microsoft Playwright Testing; Удаленный грид — с помощью хака, без гарантий	Масштабируемость и использование своего грида
Протоколы	CDP; WebDriver (W3C); WebDriver BiDi	Собственный кастомный протокол; CDP (Chromium); WebDriver — нет	Совместимость с браузерами и гибкость интеграций

Визуальное тестирование

подсказка

Testplane предлагает продвинутые возможности для визуального тестирования

В области визуального (скриншотного) тестирования Testplane демонстрирует явное превосходство над Playwright. Под капотом инструмент использует собственную библиотеку looks-same для сравнения скриншотов, которая быстрее и точнее текущих конкурентов:

Ожидание загрузки элементов перед скриншотом, чтобы исключить нестабильность в тесте;
Отключение анимации на странице;
Гибкая настройка чувствительности скриншотного тестирования — tolerance, anti-aliasing tolerance, игнорирование фиксированного количества пикселей;
Используется 3 уровня сравнения для оптимизации скорости;
Разнообразные виды визуализации различий между скриншотами для удобной отладки, в т.ч. и подсветка мелких диффов;
Игнорирование элементов на скриншоте при необходимости.

Testplane предоставляет удобный интерфейс для массового принятия скриншотов, что ускоряет процесс обновления эталонных изображений. Также, если в проекте пользователя настроен Storybook, то Testplane предоставляет автоматическую генерацию скриншотных тестов, что позволяет быстро покрыть визуальными проверками все компоненты проекта без написания кода.

Playwright предлагает лишь базовую поддержку скриншотного тестирования с ограниченными возможностями и менее удобным интерфейсом для работы со скриншотами. Это делает его менее подходящим для проектов, где важно визуальное тестирование.

Отчет для работы с тестами

подсказка

У Testplane есть мощный UI для работы с тестами в самых различных сценариях

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

Этот отчет прекрасно подходит как для локальной работы, так и для использования в CI. Он предлагает единый интерфейс для выполнения различных задач:

Запуск тестов непосредственно из UI;
Отладка с помощью Time Travel (пошагового воспроизведения тестов);
Анализ производительности тестов;
Обновление эталонных изображений при скриншотном тестировании;
Объединение нескольких отчетов в один;
Повторное использование результатов из CI.

Особенно важно, что отчёт Testplane способен эффективно работать с тысячами тестов, не теряя производительности. А система плагинов позволяет кастомизировать отчёты под специфические потребности команды.

Со всеми возможностями отчета можно ознакомиться в разделе UI сайта https://testplane.io.

Взаимодействие с ИИ

подсказка

Testplane MPC помогает ИИ-агентам писать стабильные новые тесты и чинить существующие

Testplane MCP — это инструмент, который позволяет ИИ-агентам погрузиться в контекст того, что происходит в браузере, выполнять действия и создавать или чинить тесты, основываясь на реальном состоянии страницы. С помощью Testplane MCP пользователи могут не только создавать рабочие и стабильные тесты, но и быстро исправлять уже существующие. Testplane MPC позволяет подключиться к браузеру в ходе выполнения вашего теста, чтобы отладить или изменить его. Это значительно сокращает время, затрачиваемое на исправление нестабильных тестов. Кроме того, Testplane MCP предоставляет возможность запускать браузер в режиме эмуляции мобильных устройств. Например, можно сказать "Открой страницу example.com с помощью Testplane MCP на iPhone 15" или указать явно какой User Agent нужно указать при создании браузерной сессии.

Расширяемость и интеграции

подсказка

Testplane предоставляет больше возможностей для кастомизации

Архитектура Testplane построена с учётом потребностей в кастомизации и интеграции. Богатая событийная модель предоставляет множество точек расширения, позволяя разработчикам внедрять собственную логику на любом этапе выполнения тестов. Это особенно важно для проектов, где требуется интеграция с внутренними системами мониторинга, отчётности и управления качеством. Также Testplane предоставляет JS API, которое позволяет создавать собственные раннеры, адаптированные под специфические потребности проекта.

Playwright, несмотря на свою популярность, предлагает меньше точек расширения и требует самостоятельной разработки большинства интеграций. Это увеличивает время на внедрение и поддержку инструмента в корпоративной среде.

Масштабирование и производительность

подсказка

Testplane проверен на крупных проектах с миллионами тестов

Архитектура Testplane изначально проектировалась для работы с большими объёмами тестов, что обеспечивает стабильную работу даже при значительном росте тестового покрытия. Это особенно важно для долгосрочных проектов, где количество тестов постоянно увеличивается. Поддержка удалённого грида браузеров (например, BrowserStack, SauceLabs и т.д.) позволяет эффективно распределять выполнение тестов по множеству машин, обеспечивая быстрое выполнение даже очень больших тестовых наборов. Также Testplane позволяет масштабировать запуски за счет шардирования, запуская тесты на разных машинах. При этом, в результате пользователю будет предоставлен единый отчет с результатами пройденных тестов.

Playwright также имеет возможности для масштабирования в виде шардирования из коробки. Масштабирование за счет удаленного грида предоставляется только в виде платного сервиса Microsoft Playwright Testing.

Обновления и стабильность

Testplane обеспечивает высокую стабильность благодаря продуманному подходу к управлению зависимостями. Обновления инструмента полностью отвязаны от обновлений браузеров, что позволяет командам контролировать процесс миграции и избегать неожиданных поломок в CI/CD пайплайнах. Использование стабильных версий браузеров минимизирует количество проблем с переснятием скриншотов, что особенно важно для проектов с большим количеством визуальных тестов. Такой подход обеспечивает предсказуемость поведения тестов и снижает затраты на поддержку инфраструктуры тестирования. Команды могут планировать обновления браузеров независимо от обновлений самого инструмента тестирования, что даёт больше гибкости в управлении техническим долгом.

Playwright же связывает обновления инструмента с обновлениями браузеров, что может приводить к неожиданным изменениям в поведении тестов. Это создаёт дополнительную нагрузку на команды разработки, которым приходится чаще пересматривать и обновлять скриншоты, особенно в проектах с активной разработкой интерфейса.

Testplane MCP

Mon, 16 Jun 2025 17:00:00 GMT

Рады представить Testplane MCP — проект, который позволяет AI-агентам быть в контексте происходящего в браузере, совершать действия и генерировать тесты с учетом реального состояния страницы.

Какие возможности открывает Testplane MCP?

Значительное улучшение генерации тестов

Представим, что мы добавили в приложение новую функциональность и теперь хотим сгенерировать тесты на неё с помощью AI-агента. Ранее, AI-агент мог лишь предположить как выглядит эта страница — селекторы, скорее всего, получились бы вымышленными, и тест требовал бы серьезных правок.

Testplane MCP выводит этот процесс на новый уровень: AI-агент во время написания теста может открыть нужную страницу в браузере, посмотреть на её верстку или выполнить любые действия (например, нажать на кнопку или заполнить форму).

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

Использование браузера AI-агентами

Testplane MCP делает возможным автоматизировать повторяющиеся процессы. Например, можно построить воркфлоу для извлечения информации из фото чеков, после чего с помощью Testplane MCP заходить на панель управления своей организации и заполнять форму отчета с соответствующей информацией (наименование, количество, цена и т.д.).

Установка

Необходимо добавить сервер Testplane MCP в конфигурацию вашей IDE.

Откройте настройки Cursor (кнопка в правом верхнем углу IDE), в секции MCP нажмите на кнопку Add new global MCP server, добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcpServers": {
        "testplane-mcp": {
            "command": "npx",
            "args": ["@testplane/mcp@latest"]
        }
    }
}

Установите расширение Cline.
На вкладке расширения необходимо перейти на вкладу "MCP" и нажать "Configure MCP Servers".

Добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcpServers": {
        "testplane-mcp": {
            "command": "npx",
            "args": ["@testplane/mcp@latest"]
        }
    }
}

Откройте настройки VS Code, введите в поиск MCP, нажмите на Edit in settings.json, добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcp": {
        "inputs": [],
        "servers": {
            "testplane-mcp": {
                "command": "npx",
                "args": ["@testplane/mcp@latest"]
            }
        }
    }
}

Откройте настройки как показано в оф. документации, добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcpServers": {
        "testplane-mcp": {
            "command": "npx",
            "args": ["@testplane/mcp@latest"]
        }
    }
}

Откройте настройки как показано в оф. документации, добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcpServers": {
        "testplane-mcp": {
            "command": "npx",
            "args": ["@testplane/mcp@latest"]
        }
    }
}

Откройте настройки как показано в оф. документации, добавьте в конфиг Testplane MCP как в примере ниже.

{
    "mcpServers": {
        "testplane-mcp": {
            "command": "npx",
            "args": ["@testplane/mcp@latest"]
        }
    }
}

После установки AI-агент сможет использовать Testplane MCP, можно прямо указать на это в промпте: "Используй testplane mcp, чтобы открыть страницу ...".

Использование

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

Сначала попросим AI-агента проанализировать страницу и составить план тестирования.

Тег video не поддерживается вашим браузером. Скачайте видео.

Теперь попробуем сгенерировать тесты и запустить их.

Тег video не поддерживается вашим браузером. Скачайте видео.

Как мы видим, AI-агент с первого раза сгенерировал тесты, которые проходят и содержат корректные селекторы.

Вы можете попробовать такой промпт для генерации тестов с использованием Testplane MCP:

Используй testplane mcp, чтобы открыть страницу https://ya.ru, выполни поиск по запросу "котики", проверь, что результаты поиска отображаются.

Не пиши лишние комментарии в тестах, кроме сложных краевых случаев. Пиши тесты в соответствии со стилем проекта.

Старайся использовать семантические селекторы, например, по атрибутам data-testid или тексту элемента вместо сложных CSS-селекторов.

Особенности реализации

Testplane MCP — не единственная реализация возможности взаимодействия AI-агента с браузером.

На данный момент Testplane MCP обеспечивает следующие преимущества:

Очень компактные и гибкие снапшоты страниц, модели не нужно работать со скриншотами. Это значительная экономия токенов API LLM.

Как пример — полный исходник https://ya.ru занимает ~260,000 символов, а компактный снапшот — лишь ~9,000.

Пример снапшота

Time Travel + новости Testplane UI

Wed, 21 May 2025 17:00:00 GMT

Представляем новый инструмент Testplane UI — Time Travel, теперь в стабильной версии! Расскажем о новой функциональности и что ещё появилось в Testplane UI за последнее время.

Как получить доступ к последним обновлениям?

Нужно установить свежие версии Testplane и html-reporter:

npm i -D testplane@8.29.2 html-reporter@10.18.0

Time Travel

Time Travel — это новый инструмент Testplane UI, который позволяет просматривать прогоны тестов в реальном времени, а также записывать и воспроизводить все действия, которые происходили в браузере во время теста.

Вот как это выглядит:

Time Travel записывает снапшоты DOM-дерева, что позволяет отлаживать проблемы, связанные с селекторами, и в то же время экономить место на диске.

Подробнее — в нашем новом руководстве.

Новости Testplane UI

Fuzzy-поиск тестов

Поиск тестов теперь более интеллектуальный и понимает запросы даже с опечатками или в другой раскладке. Появились опции поиска как в IDE: regex и case-insensitive.

А ещё мы добавили новый способ сортировки — по релевантности. Он включается автоматически во время поиска, благодаря чему сверху вы видите самые релевантные тесты.

Новые кнопки для управления элементами интерфейса

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

Интерфейс запоминает ваши предпочтения и даже после перезагрузки страницы всё будет так, как вы настроили.

Другие улучшения

Значительно переработали команду merge-reports — теперь она работает лучше, стабильнее и покрывает больше кейсов
Testplane UI теперь умеет работать с отчетами, созданными в старых версиях — теперь можно не бояться потерять данные при обновлении
Появилось API для выгрузки снапшотов в Time Travel
Возможность выбирать скорость воспроизведения в плеере Time Travel

Следите за новыми релизами в нашем блоге и в разделе Release Notes на GitHub, а в случае обнаружения проблем приходите в issue GitHub — мы вам обязательно поможем!

Поддержка WebDriver BiDi протокола

Tue, 06 May 2025 14:00:00 GMT

В testplane@8.27.0 добавлена поддержка WebDriver BiDi протокола (будущий единый стандарт для автоматизации браузеров).

WebDriver BiDi (Bidirectional) — это новый протокол кросс-браузерной автоматизации, который сочетает в себе лучшее из существующих протоколов: W3C WebDriver и Chrome DevTools Protocol (CDP) (подробнее о них можно почитать в нашей статье). По сути новый протокол расширяет существующий W3C Webdriver протокол и добавляет в него новые кросс-браузерные команды, которые заменяют CDP протокол (не является кросс-браузерным). Старые webdriver-команды работают как и раньше по http, а новые команды обеспечивают двунаправленную коммуникацию между клиентом и браузером по websocket соединению.

Новый протокол на данный момент поддержан следующими браузерами: Chrome, Firefox, Edge. В safari поддержки пока нет. Следить за поддерживаемыми браузерами можно на этой странице.

Список команд BiDi протокола доступен на этой странице.

Как использовать?

warning

В Testplane поддержка BiDi протокола доступна в браузерах начиная с версии: chrome@128 и firefox@129.

Для использования BiDi протокола необходимо:

установить testplane@8.27.0 или старше;
указать капабилити webSocketUrl: true в поле desiredCapabilities для необходимого браузера (в следующей мажорной версии будет выставляться по умолчанию);
запустить тесты.

Что можно сделать с помощью нового протокола?

Отслеживание и перехват сетевых запросов/ответов

Можно замокать запрос к testplane.io и вернуть свой ответ:

it("should mock testplane.io", async ({ browser }) => {
    await browser.networkAddIntercept({ phases: ["beforeRequestSent"] });

    browser.on("network.beforeRequestSent", networkRequest => {
        browser.networkProvideResponse({
            request: networkRequest.request.request,
            body: {
                type: "string",
                value: "hello world",
            },
        });
    });

    await browser.url("https://testplane.io");
});

Тег video не поддерживается вашим браузером. Скачайте видео.

Перехватим все запросы к ресурсу testplane.io и отобразим список всех загружаемых урлов:

it("should log all loaded urls", async ({ browser }) => {
    browser.on("network.responseCompleted", networkResponse =>
        console.log("got response from url:", networkResponse.response.url),
    );

    await browser.url("https://testplane.io");
});

Тег video не поддерживается вашим браузером. Скачайте видео.

Отображение логов в браузере

it("should show browser console logs", async ({ browser }) => {
    browser.on("log.entryAdded", entryAdded => console.log(JSON.stringify(entryAdded, null, 4)));

    await browser.execute(() => console.log("Hello Bidi"));
});

Тег video не поддерживается вашим браузером. Скачайте видео.

Снятие скриншота всей страницы

import * as fs from "node:fs";

it("should screen full page", async ({ browser }) => {
    await browser.url("https://www.npmjs.com/");

    const tree = await browser.browsingContextGetTree({});
    const file = await browser.browsingContextCaptureScreenshot({
        context: tree.contexts[0].context,
        origin: "document",
    });

    fs.writeFileSync("screenshot.png", Buffer.from(file.data, "base64"));
});

Тег video не поддерживается вашим браузером. Скачайте видео.

Заключение

Хотя протокол BiDi все еще находится в Editor's Draft, но уже очевидно, что за этим протоколом будущее. Так например браузер firefox уже объявил о том, что прекращает поддержку CDP протокола с версии 129.

Поддержка протокола BiDi позволяет нашим пользователям:

использовать больше возможностей для автоматизации тестов, которых не было в WebDriver протоколе;
возможность отказаться от использования Puppeteer (используются под капотом для поддержки CDP протокола), который по нашему опыту приводит к множеству проблем в тестах;
идти в ногу со временем и уже начинать привыкать к будущему единому стандарту.

Переходите на новую версию Testplane и приносите фидбек. В случае обнаружения проблем приходите в issue github — мы вам обязательно поможем!

Запуск на локальных браузерах

Thu, 19 Dec 2024 14:00:00 GMT

В Testplane добавлена возможность автоматической загрузки браузеров и драйверов для последующего локального запуска.

Раньше Testplane с протоколом автоматизации webdriver можно было запустить локально только с вручную запущенным selenium-standalone. Теперь достаточно указать gridUrl: "local" в Конфиге Testplane или запустить тесты с CLI-опцией --local. В таком случае перед запуском тестов при необходимости будут загружены соответствующие браузеры и вебдрайверы к ним, которые также будут запущены для дальнейшего использования в этих тестах.

Загрузить браузеры и вебдрайверы к ним можно и отдельно, с помощью команды install-deps.

Пример запуска тестов на локальном браузере с webdriver протоколом автоматизации:

Тег video не поддерживается вашим браузером. Скачайте видео.

Как использовать?

Узнайте больше об этом в нашей документации Как запустить Testplane в локальном браузере.

Расширение для VS Code

Thu, 26 Sep 2024 19:00:00 GMT

Для Testplane реализовали расширение для VS Code, с помощью которого можно настраивать Testplane с нуля, запускать тесты и удобно работать с REPL режимом.

Установка

Установите расширение со страницы VS Code Marketplace или на вкладке расширений в VS Code IDE.

После установки откройте VS Code в пустом проекте и в панели управления введите:

Install Testplane

Запуск тестов

Из сайдбара в панели для тестирования

Панель для тестирования можно открыть, кликнув на значок тестирования в панели действий.

В левой части экрана отображается сайдбар с деревом всех прочитанных тестов. В дереве сверху вниз отображаются:

название директории с тестами (testplane-tests);
название файла теста (example.testplane.ts);
название сьюта (test). В примере используется describe из Mocha BDD интерфейса;
название теста (example). В примере использует it из Mocha BDD интерфейса;
название браузера в котором тест будет запущен (chrome).

У каждого из элементов дерева отображается кнопка Run Test. Если нажать на Run Test у элемента:

директории, файла или сьюта, то запустятся все дочерние тесты во всех браузерах;
теста, то запустится выбранный тест во всех браузерах;
браузера, то запустится один тест в одном браузере.

Пример запуска тестов из сайдбара:

Тег video не поддерживается вашим браузером. Скачайте видео.

Также можно выполнить запуск всех тестов с помощью кнопки Run Tests.

Из текстового редактора

Если в текстовом редакторе открыть Testplane тест, то рядом с каждым сьютом (describe) и тестом (it) будет отображаться зеленая кнопка play для их запуска. Если нажать левой кнопкой мыши, то запустится тест во всех браузерах, и после его выполнения отобразится результат в виде иконки статуса прохождения теста. Если нажать на кнопку play правой клавишей мыши, то можно запустить тест в одном из браузеров.

Пример запуска тестов из текстового редактора:

Тег video не поддерживается вашим браузером. Скачайте видео.

С настройкой `devtools`

В сайдбаре в панели для тестирования также отображается секция с названием Testplane. В ней можно управлять настройками в рантайме. При клике в чекбокс Enable devtools и последующем запуске тестов браузеры будут подниматься с использованием CDP протокола (вне зависимости от того, что указано в конфиге). Подробнее про этот режим можно прочитать здесь.

С настройкой `REPL`

При клике в чекбокс Enable REPL и последующем запуске теста (в REPL режиме можно одновременно запустить только один тест) он будет запущен в специальном REPL режиме. Подробнее про этот режим можно прочитать здесь.

Фильтрация тестов в сайдбаре панели тестирования

Чтобы в дереве отобразить только тесты в определенном браузере, необходимо ввести тег @testplane:browser:your_browser_name в инпут фильтрации. Чтобы появился саджест, можно просто написать @browser. Там же можно использовать несколько тегов.

Также в инпуте с фильтрацией можно использовать следующие значения:

строка с названием элемента дерева (директория/файл/сьют/тест/браузер);
тег @doc — для отображения тестов из активного файла в текстовом редакторе;
тег @openedFiles — для отображения тестов во всех открытых файлах в текстовом редакторе;
тег @executed — для отображения только выполняющихся тестов;
тег @failed — для отображения только упавших тестов.

Перезапуск окружения Testplane

С помощью кнопки Refresh Tests в сайдбаре можно перезапустить Testplane. В этом случае перечитается конфиг и тесты. Пригодится в случае, если вы добавили новый тест в файл (вотчинг тестовых файлов пока не поддерживается) или произошла какая-то критическая ошибка. Обновление дерева тестов выполняется автоматически при изменении конфига.

Требования

версия testplane должна быть 8.20.0 и старше (с версиями ниже запуск тестов работать не будет).

Текущие ограничения

не поддержаны debug и continuous (auto-run) режимы;
нет вотчинга добавления/удаления тестов и файлов;
использование кастомных интерфейсов Mocha может приводить к некорректному отображению иконок с кнопкой play для запуска тестов из текстового редактора.

Заключение

Данная функциональность предоставляет нашим пользователям новые возможности:

возможность запуска тестов прямо из IDE и просмотр результата выполнения;
возможность максимально быстро переключиться в режим devtools и repl;
автоматически подхватывать изменения, внесенные в конфиг Testplane.

Устанавливайте расширение Testplane для VS Code и приходите с фидбеком. В случае обнаружения проблем приходите в issue github — мы вам обязательно поможем!

Скриншотное тестирование со Storybook

Thu, 26 Sep 2024 13:00:00 GMT

Теперь для автоматического визуального тестирования ваших компонентов достаточно иметь Storybook с вашими компонентами и плагин @testplane/storybook. Больше не нужно писать тесты.

Storybook - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде. Такой "шоурум" идеально подходит для скриншотного тестирования ваших компонентов, т.к. за счет этой изолированной среды такие тесты получаются в разы стабильнее и быстрее, чем вариант с e2e.

С помощью плагина @testplane/storybook предоставляется возможность автоматически проверять изменения ваших компонентов с помощью скриншотного тестирования без единой строчки кода теста. Вам достаточно описать ваш компонент в Storybook, а testplane при запуске автоматически сгенерит все необходимые тесты, прогонит их в нужных браузерах и предоставит визуальный отчет для обновления скриншотов. При этом, если для компонентов была задекларирована play-функция, то testplane перед началом теста выполнит ее, чтобы привести компонент в нужное состояние.

Но если и этих возможностей вам не хватит, то вы можете прямо в story-файле описать testplane-тест, который будет выполнен как дополнительный тест для компонента.

Как это использовать?

Узнайте больше об этом в нашей документации Скриншотное тестирование со Storybook. Пример проекта с настроенным скриншотным тестированием со Storybook можно посмотреть в нашем репозитории на GitHub.

Компонентное тестирование

Mon, 10 Jun 2024 14:00:00 GMT

В testplane в экспериментальном режиме поддержали компонентное тестирование и unit-тесты, выполняющиеся в браузере.

Практически все современные веб-интерфейсы пишутся с использованием фреймворков (React, Vue, Svelte, ...) для упрощения создания и реиспользования компонентов. Такие компоненты важно тестировать в изоляции друг от друга, чтобы быть уверенным, что каждый компонент корректно справляется со своей работой. Точно так же как мы пишем unit-тесты отдельно от интеграционных. В Testplane уже поддержанно скриншотное тестирование компонентов с помощью Storybook, однако этот инструмент актуален не для всех проектов. Поэтому мы разработали ещё один вариант компонентного тестирования, который не требует использования Storybook.

Данная возможность может быть полезна, если у вас в проекте используются React-компоненты. При этом тестов нет совсем или используются только тяжелые интеграционные тесты (т.е. проверяются целые страницы, содержащие множество компонентов). Согласно пирамиде тестирования, интеграционных тестов должно быть меньше всего так как они больше подвержены “флапам” и зачастую избыточны. Множество сценариев можно проверить с помощью компонентых тестов и тем самым сократить время выполнения тестов в CI и улучшить их стабильность.

Варианты реализации компонентного тестирования

Компонентное тестирование — это вид тестирования, при котором логика работы веб-компонента проверяется в изоляции от веб-страницы, в которой он используется. Для того, чтобы выполнить такой тест, нужно уметь корректно рендерить компонент. Часто для этой задачи применяют JSDom (используется в Jest), который рендерит веб-компоненты с помощью виртуального рендеринга Node.js, т.е. без использования реального браузера. С одной стороны, это работает быстрее (браузер не поднимается), а с другой — менее стабильно, так как проверки выполняются не в реальном браузере. Второе популярное решение — это использовать очень быстрый dev-сервер Vite, который поддерживает множество фреймворков (React, Vue, Svelte, ...) и отвечает за рендеринг компонентов в изоляции.

Мы остановились на варианте с использованием Vite, так как такой подход обеспечивает тестирование страницы более приближенное к реальности (как если бы ее открыл пользователь). При этом, сами тесты выполняются немного дольше, чем в jsdom. Но для нас самое главное стабильность и воспроизводимость результатов тестов, поэтому выбор был очевиден.

Краткая информация о том, как это реализовано

Ребрендинг

Mon, 20 May 2024 13:00:00 GMT

Представляем вашему вниманию... Testplane. Наш проект Hermione решил сменить имя — встречайте проверенный годами продукт в свежем образе!

Мы долго рассматривали все за и против и пришли к выводу, что новое имя — Testplane — наилучшим образом отражает наше видение и будущее развитие продукта:

Мы планируем активно вкладываться в развитие инструмента в опенсорсе. Новое имя символизирует качественный переход в развитии инструмента.
Мы стремимся создать полноценный бренд с товарным знаком, логотипом, фирменным визуальным стилем. Testplane — это название, которое как сочетает в себе отсылку к «испытательному полету», так и может читаться как "плоскость для тестирования".

Суть продукта остаётся неизменной. Testplane — это тот же проект, который вы знали многие годы как Hermione, но в свежем, обновленном виде. Чтобы упростить переход, мы решили сохранить сквозную нумерацию версий: Testplane v8.x — это эквивалент Hermione v8.x.

Если вы уже работаете с Hermione, обновление на Testplane займет всего несколько минут. Мы проектировали его как drop-in замену:

Полная поддержка существующих плагинов Hermione.
Понимание всех опций и переменных окружения Hermione.
Полная совместимость конфигураций.
Два бинарных файла (testplane и hermione) для плавного перехода (вы можете запускать и как hermione gui, и как testplane gui).
Экспорт типов для TypeScript, включая как собственные типы Testplane, так и типы Hermione (включая hermioneCtx).

Если же вы еще не пробовали Testplane — загляните в нашу документацию и начните ваше исследование с Testplane всего за пару минут!

Благодарим за интерес к проекту! ✈️

Testplane Blog

Селективность запуска тестов

Как использовать​

Заключение​

Testplane vs Playwright: Полное сравнение инструментов для автоматизации тестирования

Краткий обзор инструментов​

Ключевые различия​

Поддержка браузеров и мобильных устройств​

Визуальное тестирование​

Отчет для работы с тестами​

Взаимодействие с ИИ​

Расширяемость и интеграции​

Масштабирование и производительность​

Обновления и стабильность​

Рекомендации по выбору​

Выбирайте Playwright, если:​

Выбирайте Testplane, если:​

Testplane MCP

Какие возможности открывает Testplane MCP?​

Значительное улучшение генерации тестов​

Использование браузера AI-агентами​

Установка​

Использование​

Особенности реализации​

Time Travel + новости Testplane UI

Как получить доступ к последним обновлениям?​

Time Travel​

Новости Testplane UI​

Fuzzy-поиск тестов​

Новые кнопки для управления элементами интерфейса​

Другие улучшения​

Поддержка WebDriver BiDi протокола

Как использовать?​

Что можно сделать с помощью нового протокола?​

Отслеживание и перехват сетевых запросов/ответов​

Отображение логов в браузере​

Снятие скриншота всей страницы​

Заключение​

Запуск на локальных браузерах

Как использовать?​

Расширение для VS Code

Установка​

Запуск тестов​

Из сайдбара в панели для тестирования​

Из текстового редактора​

С настройкой devtools​

С настройкой REPL​

Фильтрация тестов в сайдбаре панели тестирования​

Перезапуск окружения Testplane​

Требования​

Текущие ограничения​

Заключение​

Скриншотное тестирование со Storybook

Компонентное тестирование

Варианты реализации компонентного тестирования​

Ребрендинг

Как использовать

Заключение

Краткий обзор инструментов

Ключевые различия

Поддержка браузеров и мобильных устройств

Визуальное тестирование

Отчет для работы с тестами

Взаимодействие с ИИ

Расширяемость и интеграции

Масштабирование и производительность

Обновления и стабильность

Рекомендации по выбору

Выбирайте Playwright, если:

Выбирайте Testplane, если:

Какие возможности открывает Testplane MCP?

Значительное улучшение генерации тестов

Использование браузера AI-агентами

Установка

Использование

Особенности реализации

Как получить доступ к последним обновлениям?

Time Travel

Новости Testplane UI

Fuzzy-поиск тестов

Новые кнопки для управления элементами интерфейса

Другие улучшения

Как использовать?

Что можно сделать с помощью нового протокола?

Отслеживание и перехват сетевых запросов/ответов

Отображение логов в браузере

Снятие скриншота всей страницы

Заключение

Как использовать?

Установка

Запуск тестов

Из сайдбара в панели для тестирования

Из текстового редактора

С настройкой `devtools`

С настройкой `REPL`

Фильтрация тестов в сайдбаре панели тестирования

Перезапуск окружения Testplane

Требования

Текущие ограничения

Заключение

Варианты реализации компонентного тестирования