Обезьянье тестирование сайта с GitHub Copilot × Playwright: практическое руководство

Введение

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

В этой статье описан практический сеанс обезьяньего тестирования, в котором VS Code Agent Mode (GitHub Copilot) напрямую управлял браузером для тестирования всего сайта. Мы систематизировали методологию тестирования, которую ИИ последовательно выполняет — от статического анализа исходного кода до динамической проверки в браузере.

---

Тестовая среда

Элемент	Детали
Редактор	VS Code + GitHub Copilot (Agent Mode)
Модель ИИ	Claude Opus 4.6
Управление браузером	Встроенные инструменты Playwright в VS Code
Объект тестирования	Статический сайт на Astro + UnoCSS + Cloudflare Pages
Предпросмотр	npm run preview (локально) + продакшн URL

В Agent Mode Copilot автономно выполняет команды терминала, читает и записывает файлы и управляет браузером. Тестировщик просто даёт инструкцию «протестируйте», и ИИ автоматически выполняет весь процесс, описанный ниже.

---

Фаза 1: Инвентаризация объектов тестирования

Полное чтение исходного кода

ИИ сначала сканирует структуру каталогов проекта и читает весь исходный код компонентов, страниц и утилит.

src/
├── components/    ← Прочитаны все 28 компонентов
├── content/blog/  ← Распознан frontmatter 16 статей
├── pages/         ← Определены все файлы маршрутизации
├── layouts/       ← Понята структура BaseLayout
└── utils/         ← Проанализированы rehype-плагины и генерация OG-изображений

На этом этапе ИИ автоматически определяет:

• Полный список маршрутов: 7 статических страниц + маршруты блога (статьи, теги, архив, авторы, пагинация)
• Интерактивные элементы: модальное окно поиска, переключатели FAQ, кнопки копирования, фасад YouTube, прокрутка вверх, слайдер на главной странице
• Внешние интеграции: ssgform.com (формы), Cloudflare Turnstile (защита от ботов), Google AdSense, GA4

Автоматическая генерация плана тестирования

По результатам анализа исходного кода ИИ автоматически генерирует план тестирования в виде списка задач. Людям не нужно создавать чек-листы.

---

Фаза 2: Полный обход всех маршрутов

Проверка HTTP-статусов

Собранный сайт запускается с помощью npm run preview, и Playwright обращается ко всем маршрутам.

Объекты тестирования: 31 маршрут
├── Статические страницы    7 (/, /about/, /services/ и т.д.)
├── Посты блога            16
├── Страницы тегов         24
├── Архив                   4
├── Пагинация               2 (/blog/page/2/, /blog/page/3/)
├── Страницы авторов        2
├── RSS                     1
└── Тест 404                1

Результат: Все маршруты 200 OK (кроме намеренного 404)

Проверка DOM-структуры

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

Элемент проверки	Метод проверки	Результат
Битые изображения	img.complete && img.naturalWidth === 0	0 найдено
Пустые ссылки	href пустой, # или не задан	0 найдено
Небезопасные внешние ссылки	target="_blank" без rel="noopener"	0 найдено
Количество H1	document.querySelectorAll('h1').length === 1	Все страницы OK
Ссылка пропуска	Наличие “Skip to content”	Все страницы OK
Атрибут lang	html[lang="ja"]	Все страницы OK

Проверка битых ссылок

Внутренние ссылки были рекурсивно собраны со стартовой страницы, подтверждена доступность всех 55 уникальных URL. 0 битых ссылок обнаружено.

---

Фаза 3: Проверка взаимодействий

ИИ напрямую управляет элементами браузера через Playwright для проверки функциональности на JavaScript.

FAQ (элементы <details>)

// Пример тестового кода, выполненного ИИ
const details = document.querySelectorAll('details');
// Начальное состояние: все закрыты → OK
// Клик для открытия → OK
// Повторный клик для закрытия → OK

Модальное окно поиска (Pagefind)

1. Открытие диалога поиска с помощью window.openSearch()
2. Ожидание завершения загрузки Pagefind UI
3. Ввод «Astro» и подтверждение появления результатов поиска
4. Подтверждение закрытия клавишей ESC

Паттерн фасада YouTube

1. Клик по элементу .yt-facade
2. Подтверждение динамической генерации iframe для youtube-nocookie.com/embed/
3. Подтверждение наличия параметра autoplay=1

Кнопка копирования (после View Transitions)

Подтверждено, что кнопки копирования блоков кода переинициализируются и работают после перехода страниц через View Transitions. Повторная регистрация через событие astro:page-load работала корректно.

Кнопка прокрутки вверх

Прокрутка до конца страницы → кнопка появляется → клик → подтверждение возврата window.scrollY к 0.

---

Фаза 4: Аудит SEO и структурированных данных

Мета-теги OGP

На всех страницах проверено следующее:

• og:title / og:description / og:image / og:url / og:type установлены
• twitter:card установлен в summary_large_image
• canonical URL корректен
• URL OG-изображения существует и имеет рекомендуемый размер (1200×630)

Структурированные данные (JSON-LD)

JSON-LD на каждой странице был разобран для проверки типов схем и содержимого.

Тип страницы	Структурированные данные
Все страницы	Organization, WebSite
Посты блога	BreadcrumbList, BlogPosting, FAQPage
Статьи с FAQ	FAQPage (mainEntity содержит вопросы и ответы)

Карта сайта

Подтверждено, что sitemap-index.xml → sitemap-0.xml содержит все 57 URL. Ссылка на карту сайта из robots.txt также работала корректно.

---

Фаза 5: Проверка доступности

Проверки, аналогичные движку AXE, были выполнены через Playwright на нескольких страницах.

Элемент проверки	Проверено страниц	Нарушения
Атрибуты alt у img	4	0
Метки кнопок	4	0
Иерархия заголовков (порядок h1→h2→h3)	4	0
Метки полей ввода форм	1 (Контакты)	0
Элементы-ориентиры	4	0
Атрибуты rel внешних ссылок	4	0
Значения tabindex	4	0

Ноль нарушений на всех 4 страницах и по всем элементам проверки.

---

Фаза 6: Тестирование навигации с View Transitions

При использовании Astro View Transitions DOM обновляется дифференциально, что делает переинициализацию JavaScript сложной задачей. Были проверены следующие паттерны переходов:

Главная → Список блога → Статья → Тег → Автор → Контакты → Услуги → Главная

После каждого перехода подтверждено:

• URL, заголовок и H1 корректно обновляются
• Кнопка поиска работает
• Кнопки копирования переинициализируются
• Хлебные крошки обновляются
• Ноль JS-ошибок

---

Фаза 7: Проверка заголовков безопасности

Проверка заголовков ответа на продакшн-сайте:

Заголовок	Значение	Оценка
Content-Security-Policy	Полностью настроен	◎
X-Frame-Options	SAMEORIGIN	◎
X-Content-Type-Options	nosniff	◎
Strict-Transport-Security	max-age=15552000	○
Referrer-Policy	strict-origin-when-cross-origin	◎
Permissions-Policy	geolocation=(), camera=() и т.д.	◎

---

Обнаруженные ошибки и исправления

В ходе этого тестового сеанса были обнаружены 2 ошибки, обе исправлены в том же сеансе.

Ошибка 1: Модальное окно поиска не устойчиво к сбоям

Симптом: Если нажать кнопку поиска до завершения загрузки скрипта Pagefind, интерфейс перестаёт реагировать.

Причина: loadPagefindScript() не имел механизма повторной попытки после первоначального сбоя.

Исправление: Реализована очистка кэша промиса при сбое и отображение кнопки «Перезагрузить» в качестве запасного интерфейса.

Ошибка 2: Отсутствующие домены Google в CSP-заголовке

Симптом: Ресурсы, связанные с Google AdSense, блокируются CSP, вызывая ошибки в консоли.

Причина: connect-src и frame-src не включали https://www.google.com / https://www.google.co.jp.

Исправление: Добавлены домены Google в директивы CSP в public/_headers.

---

Систематизация методологии тестирования

Систематизируя данный подход к обезьяньему тестированию с ИИ, его можно классифицировать по следующим уровням:

Уровень 1: Статический анализ (чтение исходного кода)

• Сканирование структуры каталогов
• Построение карты зависимостей компонентов
• Анализ схемы frontmatter (Zod)
• Обзор конфигурации CSP и перенаправлений

Уровень 2: Тестирование HTTP-уровня (полный обход маршрутов)

• Проверка кодов состояния (200/404/301)
• Аудит заголовков ответа (безопасность, кэш)
• Согласованность sitemap, robots.txt, ads.txt

Уровень 3: Тестирование DOM-уровня (проверка структуры)

• Битые изображения, пустые ссылки, небезопасные внешние ссылки
• Уникальность H1 и иерархия заголовков
• Мета-теги (OGP, canonical, description)
• Структурированные данные (JSON-LD)

Уровень 4: Тестирование уровня взаимодействий (проверка поведения)

• Клик, ввод, операции с клавиатурой
• Открытие/закрытие модальных окон, валидация форм
• Переинициализация JS после View Transitions
• События прокрутки, ленивая загрузка

Уровень 5: Тестирование уровня доступности

• Атрибуты alt, метки, ARIA
• Иерархия заголовков, ориентиры
• Управление фокусом, tabindex
• Ссылки пропуска

---

Ограничения и оговорки

Обезьянье тестирование с ИИ имеет некоторые ограничения:

Ограничение	Подробности
Эмуляция вьюпорта	Эмуляция мобильной ширины не работает во встроенном браузере VS Code. Корректность CSS была проверена через статический анализ результатов сборки
Сетевые условия	Симуляция офлайн-режима и медленного соединения невозможна. Тестирование Service Worker также не охвачено
Пользовательское «ощущение»	Красота дизайна, читаемость и соответствие бренду требуют человеческой оценки
Потоки аутентификации	Страницы, требующие входа, нуждаются в отдельном безопасном управлении учётными данными

Для адаптивного CSS-дизайна мы заменили проверку прямым анализом CSS-файлов в результатах сборки, подтвердив корректную генерацию медиа-запросов @media(min-width:768px).

---

Заключение

GitHub Copilot Agent Mode может завершить полный цикл контроля качества — от анализа исходного кода → планирования тестов → автоматического управления браузером → исправления ошибок → повторной проверки — начиная с одной инструкции: «протестируйте».

Вот сводка результатов этого сеанса:

• Объекты тестирования: 31 маршрут + 24 тега + 4 архива + 2 пагинации = 61 маршрут
• Элементы тестирования: HTTP-статусы, DOM-структура, взаимодействия, SEO, доступность, безопасность, View Transitions
• Обнаружено ошибок: 2 (модальное окно поиска, CSP-заголовок) → исправлены на месте
• Нарушений доступности: 0
• Битых ссылок: 0

Сочетание визуальной проверки человеком и автоматизированной проверки ИИ обеспечивает как покрытие тестами, так и эффективность.