Проверка лендинга с Codex Computer Use: учебный стенд
Локальный стенд для проверки ссылок, сохранения формы и узких экранов. Исходная и исправленная страницы, шаблон отчёта и границы офлайн-проверки.
Ofox 
Проверка лендинга должна завершаться воспроизводимыми находками, а не сообщением «всё выглядит хорошо». На учебной странице специально предусмотрены неработающая ссылка, ложное сообщение об успешной отправке и макет для проверки на узком экране. Есть исправленный вариант для повторения тех же действий.
Скачать QA-стенд. Он содержит Python-сервер, обе страницы, тесты, шаблон результатов и описание ожидаемых дефектов. Интерфейс англоязычный. Реальная браузерная проверка и снимки экранов в статье не заявляются.
Запустите локальную страницу
Нужен Python 3.9 или новее. В распакованном каталоге qa-kit выполните:
python3 -B server.py --port 8876Сервер слушает только 127.0.0.1. Откройте напечатанный URL в разрешённом браузере. Если порт занят, выберите свободный и замените адреса во всём плане; это не способ обхода запрета доступа. Остановите сервер сочетанием Ctrl-C после упражнения.
/ содержит дефекты, /fixed — исправления, /submissions — локальные записи отправок формы. Используйте только вымышленные адреса с окончанием @example.test. Реальные контакты, покупки и внешние отправки не нужны.
Дайте задачу, а не ответы
Попросите Codex проверить навигацию, форму и макет при ширине 1440, 390 и 320 CSS-пикселей. Нужно сохранять доказательства, разделять ожидаемое и фактическое поведение и ничего не исправлять. Не передавайте исходник и ответы до первого прохода: отчёт должен описывать наблюдения.
Это всё равно учебная демонстрация, а не слепой сравнительный тест. Несколько намеренно внесённых ошибок не позволяют измерить долю найденных дефектов на реальных сайтах.
Скопируйте задание для первого прохода
Передайте тестировщику только это задание. Не включайте исходники, описание ожидаемых дефектов и расположенное ниже описание дефектов в контекст первого прохода. Используйте браузер, для которого уже разрешено управление.
Проверь локальный стенд http://127.0.0.1:8876/.
Не читай исходники или ответы и не изменяй страницу.
Запиши версию браузера, время, URL и фактические размеры области просмотра.
1. Сохрани исходные записи /submissions как базу этого прогона.
2. Открой Working guide и Pricing, запиши конечный URL, заголовок и смысл страницы.
3. Отдельно проверь пустое значение, not-an-email и qa-run1@example.test.
После каждого случая запиши сообщение, обнови /submissions и сохрани результат.
4. Проверь ширины 1440, 390 и 320 CSS-пикселей: обрезку, переполнение
всей страницы и доступность элементов управления.
Если размер нельзя установить или прочитать, отметь pending, не угадывай.
5. Составь отчёт: шаги, ожидание, наблюдение, путь к доказательствам.
Неисполненные случаи остаются pending, а не passed.
6. Повтори на /fixed с новой базой и qa-run2@example.test.
7. Верни временные настройки области просмотра. Не вводи реальные контакты.
При отказе доступа остановись и запиши ресурс; не обходи ограничение.
Отделяй наблюдения от предположений. Баннер не доказывает сохранение,
а узкое окно настольного браузера не является тестом физического телефона.Разделите файлы на run-01/original/ и run-01/fixed/. В каждой папке удобно хранить receiver-before.json, receiver-after.json, снимки при заданных размерах области просмотра и отчёт. Это предлагаемая структура, а не утверждение, что такие снимки уже были сделаны нами.
У ссылки должен быть правильный смысл
Откройте отдельно Working guide и Pricing, запишите конечный URL и заголовок, затем вернитесь. Ответ 404 — ошибка. Но и код 200 не помогает, если содержимое не соответствует обещанию ссылки. Исправленный Pricing должен вести к вымышленному объяснению цен, а не к любой существующей странице.
Три случая для формы
В отдельной вкладке прочитайте /submissions до каждого действия. После отправки обновите эту вкладку: старое содержимое нельзя считать новым результатом.
| Ввод | Ожидаемое поведение |
|---|---|
| Пустое поле | Понятное сообщение о необходимости заполнить поле, без новой записи |
not-an-email | Ошибка формата, без новой записи |
qa-run1@example.test | Подтверждение и ровно одна новая запись с этим адресом |
На исправленной странице используйте qa-run2@example.test, затем каждый раз новый адрес. Проверяйте число и содержание записей вместе. Успешный баннер не доказывает сохранение, а дубликат нужно отметить как ошибку.
Исходная страница намеренно показывает успех без записи. Это свойство исходника стенда, а не результат уже выполненного браузерного теста. В отчёте различайте ответ из методички и реальное наблюдение.
Сравнивайте записи целиком, а не только количество
Следующие данные иллюстрируют правило приёмки; они не получены при браузерном тесте:
{
"before": [{"email": "old@example.test"}],
"after": [
{"email": "old@example.test"},
{"email": "qa-run1@example.test"}
]
}Рост с одной записи до двух сам по себе недостаточен. Старая запись должна остаться прежней, новая — содержать адрес текущего запуска. Две новые копии указывают на дублирование; другой адрес может принадлежать иному прогону. Сохраняйте настоящие записи целиком, включая временные поля, не сокращая доказательства под этот пример.
Для пустого и неверного значения ожидаются понятная валидация и отсутствие добавления. Для корректного синтетического адреса на исправленной странице — ровно одно совпадение. Сопоставление экрана с принимающей стороной помогает отличить валидацию, ложный баннер и сохранение, но не доказывает надёжность формы на другом рабочем сайте.
Проверка узкого экрана
На каждой ширине осмотрите карточки показателей, навигацию, поле и кнопку. Ищите выход за границы, скрытый текст и недоступные элементы. Сохраните снимок с фактическими размерами области просмотра.
Изменение окна настольного браузера — симуляция ширины. Она не проверяет физический телефон, сенсорное управление, его клавиатуру и производительность. После проверки верните временные настройки.
Составьте одинаковую матрицу для обеих версий
Таблица описывает задуманное поведение по исходному коду. После своего прогона добавьте фактические результаты отдельно.
| Случай | Исходная версия | Исправленная версия | Какие доказательства нужны |
|---|---|---|---|
| Pricing | Несуществующий маршрут | Страница вымышленного тарифа | Конечный URL, заголовок, статус ответа при наличии |
| Пустое/неверное значение | Успех без сохранения | Валидация, добавления нет | Сообщение и обновлённые записи |
| Корректный тестовый адрес | Успех без сохранения | Одна совпадающая запись | Полные данные до/после и адрес |
| Узкая строка показателей | Минимальная ширина 650 CSS-пикселей | Карточки могут переноситься | Фактическая область просмотра, переполнение и доступность управления |
На ширинах 390 и 320 проверьте не только карточки, но и возможность добраться до поля и кнопки. Горизонтальная прокрутка таблицы внутри своего контейнера отличается от переполнения всего документа. Документация MDN об overflow объясняет механизм; она не подтверждает визуальную приёмку этого стенда.
Оформите воспроизводимый отчёт
Для каждой находки нужны URL, окружение, точный ввод, шаги, ожидание, фактическое поведение и ссылка на доказательство. Принятие пустого значения, неверного формата и ложный успех могут происходить из одного обработчика; не выдавайте три симптома за три независимые причины.
После первого прохода сверяйтесь с ответами, учитывая пропуски и ложные срабатывания. Повторите проверки на /fixed с новыми адресами, затем попробуйте воспроизвести процедуру из новой задачи только по инструкции.
Пример заполненного отчёта о дефекте
Это учебный пример по исходному коду, а не находка браузерного агента. Он показывает форму отчёта без выдуманных наблюдений и снимков.
| Поле | Пример |
|---|---|
| ID / область | FORM-01, исходная страница / |
| Подготовка | Сохранить записи, выбрать уникальный синтетический адрес |
| Шаги | Ввести qa-run1@example.test, отправить один раз, обновить /submissions |
| Ожидание | Старые записи неизменны, добавлена ровно одна совпадающая |
| Поведение по коду | Страница сообщает об успехе, но не сохраняет |
| Наблюдение браузера | Pending — заполнить после выполнения |
| Доказательства | Pending — приложить реальные данные до/после и снимок |
| Возможное влияние для проверки | Пользователь может ошибочно считать запрос сохранённым |
| Повторная проверка | /fixed, новая база, qa-run2@example.test |
В настоящем отчёте замените сведения по коду своими наблюдениями и приложите доказательства того же прогона. Если принимающая сторона недоступна, сохранение остаётся непроверенным. Отсутствие снимка или устаревшая вкладка сами по себе не доказывают поломку сервера. Три варианта ввода — три тестовых случая, но они могут иметь один корень проблемы: учитывайте покрытие отдельно от числа дефектов.
Что делать, если результат неясен
| Симптом | Следующая проверка | Ошибочный вывод или действие |
|---|---|---|
| Нет соединения | Работает ли процесс и совпадает ли разрешённый адрес | Сразу объявить страницу неисправной |
| Явный отказ доступа | Записать ресурс и решить вопрос обычными настройками | Обойти другим инструментом или хостом |
| Порт занят | Остановить свой ненужный экземпляр или согласованно выбрать разрешённый свободный порт | Менять порт для обхода отказа |
| В приёмнике есть старые записи | Зафиксировать новую базу и новый адрес | Принять старые данные за успех прогона |
| Баннер есть, новых данных нет | Обновить приёмник и сохранить обе стороны | Многократно нажимать и смешивать попытки |
| Снимок похож на телефон | Указать CSS-размеры и среду | Объявить проверку физического устройства |
Записи лежат в локальном submissions.jsonl; перезапуск не удаляет этот файл автоматически. Сохраните его как доказательство. Для нового чистого стенда используйте другую распакованную копию. В руководстве по таблице конкурентов показан похожий способ отделять наблюдения от открытых вопросов.
Что действительно проверено
На Python 3.9.6 и Node.js 24.13.0 прошли семь внутрипроцессных тестов обработчика и девять JavaScript-симуляций формы, в том числе после распаковки свежей копии:
python3 -B -m unittest discover -s . -p 'test_*.py' -v
node test_form.mjsPython проверяет неверные длины и JSON, синтетические адреса, запись, маршруты и подстановку шаблона. JavaScript выполняет код с подставными document и fetch. Браузер не запускается, сетевых запросов нет.
Это не доказывает правильность вёрстки, реальную отправку или способность Codex найти дефекты. Снимки трёх ширин и браузерное сравнение до/после остаются непроверенными. Стенд не заменяет аудит доступности, безопасности, производительности и работы на разных устройствах.
Для программной проверки завершения см. офлайн-контроллер, для подключения браузера — разрешения Computer Use.
Часто задаваемые вопросы
- Означают ли прошедшие тесты завершённую проверку в браузере?
- Нет. Пройдены семь Python-тестов и девять JavaScript-симуляций. Реальная работа браузера, три ширины экрана и обнаружение дефектов не проверены.
- Как проверить, что форма действительно сохранила данные?
- Сохраните базовые записи, отправьте уникальный синтетический адрес и проверьте одно совпадающее добавление при неизменной истории. Баннер подтверждает только текст на экране.
- Изменение ширины браузера считается мобильным тестом?
- Оно проверяет область просмотра заданной ширины в CSS-пикселях, но не физический телефон, сенсорное управление, клавиатуру или производительность устройства.
- Зачем новый адрес на исправленной странице?
- Новый адрес и заново сохранённые исходные записи отделяют повторную проверку от старых записей и позволяют заметить дублирование. Сохраняйте доказательства обеих попыток.
