{
  "index": 188,
  "slug": "editorial-2022-10-mechanism-ui-tests",
  "title": "Механика UI-проверки: сделать состояние наблюдаемым",
  "excerpt": "Как отделить transition, наблюдение и assertion, чтобы не лечить флак произвольным ожиданием.",
  "contentHtml": "<p>Проблема теста, который ждёт секунду потому, что после клика ему нечего наблюдать, обычно скрыта в самой странице. Внутри меняется несколько флагов, затем кто-то закрывает модалку, а итог пользователю виден только случайно. Цена — флак и дорогая диагностика: лог показывает click, но не показывает, какой transition не состоялся и почему.</p>\n<p>Механика ниже строит один узкий мост: domain transition создаёт named visible state, а assertion проверяет именно его. Это не настоящий Playwright run и не реализация WebDriver. Локальная fixture специально не содержит таймеров, selector-ов, DOM или HTTP, чтобы можно было проверить reason перехода и rollback без истории конкретного браузера.</p>\n<h2>Три слоя, которые нельзя склеивать</h2>\n<p>Первый слой — intent: пользователь ввёл текст или нажал submit. Второй — transition: state machine решила, что переход допустим, и записала request id. Третий — observation: экран получил status либо alert с доступным именем. Когда тест сразу читает внутренний флаг второго слоя, он перестаёт проверять пользовательский результат. Когда он ждёт только время, он не проверяет ни один слой. Нужен явный третий слой, связанный с переходом.</p>\n<div class=\"table-scroll\"><table><caption>Разделение ответственности</caption><thead><tr><th scope=\"col\">Слой</th><th scope=\"col\">Хранит</th><th scope=\"col\">Не должен утверждать</th><th scope=\"col\">Проверка</th></tr></thead><tbody><tr><td>Intent</td><td>ввод и click</td><td>что сохранение принято</td><td>событие доступно пользователю</td></tr><tr><td>Transition</td><td>phase и request id</td><td>что браузер уже отрисовал результат</td><td>guard и matching acknowledgement</td></tr><tr><td>Observation</td><td>role, name, testState</td><td>что сеть работала</td><td>assertion пользовательского сценария</td></tr><tr><td>Транспорт</td><td>запрос и reply</td><td>смысл UI без mapping</td><td>отдельный API-contract</td></tr></tbody></table></div>\n<h2>Почему request id входит в учебную модель</h2>\n<p>Если confirmation приходит после submit, модели недостаточно boolean <code>isLoading</code>. Ей нужно знать, какую попытку она ждёт. Первый <code>submit</code> создаёт <code>request-01</code>; acknowledgement с <code>request-00</code> отвергается. После rollback счётчик не возвращается назад: повторный submit получает <code>request-02</code>, а запоздалый reply от первой попытки остаётся чужим. Это не утверждение о формате production ID и не требование передавать именно такое поле по сети. Это способ записать invariант: старый reply не может признать текущий transition.</p>\n<p>Дальше работает guard. Повторный submit во время <code>submitting</code> возвращает <code>submit-guard-active</code> и не создаёт второй request id. Такой исход важен именно как наблюдаемая граница: кнопка в реальном UI может стать disabled, но смысл должен жить не только в button. Иначе пользовательский сценарий будет зависеть от timing отрисовки, а компонент-автоматизация найдёт обходной путь.</p>\n<h2>Пример: local fixture проверяет owner перехода</h2>\n<p>Ниже нет <code>page.click</code>, <code>locator</code> или sleep. Вызовы создают намерение, планируют transition и вручную передают acknowledgement. Проверка не измеряет задержку: она смотрит на shape evidence и на <code>testState</code>. Если заменить order событий, stale acknowledgement не сдвигает сценарий; если сделать rollback, состояние возвращается к snapshot. Это удобный first gate перед настоящим UI.</p>\n<pre><code>import { runUiTestsFixture } from &#039;./upgrade-2022-10.mjs&#039;;\nconst report = runUiTestsFixture();\nif (!Object.values(report.assertions).every(Boolean)) throw new Error(&#039;fixture contract failed&#039;);\nconsole.log(report.evidence.planned.observation.testState); // &#039;submitting&#039;\nconsole.log(report.evidence.accepted.observation.name); // &#039;Изменение сохранено&#039;</code></pre>\n<p>После failure fixture возвращает pre-submit snapshot: <code>editing</code> с черновиком, без request id и без сохранённого результата. При этом счётчик запросов не откатывается. Поэтому повторный submit получает новый id, а поздний <code>request-01</code> не может подтвердить вторую попытку. Это не метрика надёжности и не готовая политика production rollback. Это узкая защита от модели, которая после возврата случайно принимает старый reply за текущий успех.</p>\n<figure><img src=\"/assets/editorial/2022/ui-tests-2022-observation-route.svg\" alt=\"Схема разделения UI-проверки: intent submit создаёт transition submitting с request id; accessible status становится наблюдением; acknowledgement с совпадающим id переводит в saved; stale reply и повторный submit не меняют переход; recovery выводится отдельным alert.\" loading=\"lazy\" /><figcaption>Рисунок отделяет модель переходов от инструмента автоматизации и не показывает настоящий DOM или WebDriver-сеанс.</figcaption></figure>\n<h2>Как писать browser assertion после контракта</h2>\n<p>После модели assertion должен выражать пользовательский факт, например: после действия есть status с именем «Отправка ожидает подтверждения», а после контролируемого ответа — status «Изменение сохранено». В Playwright-документации v1.27.0 retrying assertion повторяет проверку выбранного условия до timeout. Поэтому timeout — ограничитель ожидания условия, не само условие. Если condition выбран как «кнопка где-то исчезла», инструмент добросовестно ждёт неправильный факт.</p>\n<p>Стабильный selector допустим, если он не подменяет семантику. Для чисто технического контейнера можно применять <code>data-testid</code>; для результата сценария лучше сначала искать роль и имя, которые уже нужны человеку. Это не абсолютное правило: составной виджет, локализация и визуально скрытый status потребуют отдельного решения. Важно зафиксировать, какой contract должен пережить рефакторинг, а какой selector является внутренней деталью.</p>\n<h2>Маршрут: симптом → причина → проверка → действие</h2>\n<ol><li><strong>Симптом.</strong> В отчёте есть timeout либо sleep между click и проверкой, но не видно нужного состояния.</li><li><strong>Причина.</strong> Intent, transition и observation склеены: тест знает click, но не знает owner результата.</li><li><strong>Проверка.</strong> Найдите phase, request id и текст/role результата. Если одного нет, тесту нечего ждать корректно.</li><li><strong>Действие.</strong> Добавьте named status для pending/saved и alert для recovery; свяжите их с transition в одном месте.</li><li><strong>Проверка guard.</strong> Локально подтвердите duplicate submit и stale reply. Fixture не заменяет browser тест.</li><li><strong>Rollback.</strong> Откатывайте весь новый contract вместе с тестом, если доступное состояние расходится с утверждённой UX-копией; не возвращайте sleep как постоянный патч.</li></ol>\n<h2>Ошибки внедрения</h2>\n<p>Первая ошибка — назвать все состояния <code>loading</code>. Пользователь не отличит ожидание подтверждения от повторной попытки, а тест не отличит новый запрос от старого reply. Вторая — очищать форму сразу после click. Тогда rollback нечего восстанавливать. Третья — делать success индикатор побочным эффектом network callback без проверки request id. В такой схеме поздний callback способен сообщить о старой операции поверх нового редактирования.</p>\n<p>Четвёртая ошибка — добавить <code>aria-live</code> или role только ради теста. WCAG 2.1, критерий 4.1.3, требует, чтобы сообщения о состоянии можно было определить программно и передать вспомогательным технологиям без перевода фокуса. Это не даёт универсального шаблона: роль должна соответствовать срочности и поведению интерфейса. Полный accessibility-аудит реализации остаётся отдельной задачей.</p>\n<h2>Ограничение и следующий шаг</h2>\n<p>Учебная модель не знает re-render, framework scheduler, локализацию, авторизацию, несколько вкладок и фактическую доставку reply. Она не говорит, что любой stale reply следует молча отбросить: production может потребовать журнал, server reconciliation или повторное чтение данных. Фиксированная строка request id и ручной acknowledgement существуют только для детерминированной fixture.</p>\n<p>Следующий шаг — взять один настоящий тест и нарисовать его timeline без времени: intent, pending observation, controlled response, final observation. Отдельно обозначьте fail path. Если на этой схеме нет наблюдаемого условия после click, сначала добавьте contract страницы. Только потом заменяйте sleep на auto-retrying assertion выбранного инструмента.</p>\n<h2>Историческая граница октября 2022</h2>\n<p>Техническая граница построена на immutable Playwright documentation commit v1.27.0, WebDriver Working Draft от 25 октября 2022 года и WCAG 2.1 Recommendation. Ни один из документов не является доказательством того, что локальная fixture открывала страницу или что конкретный UI обладает заявленной доступностью.</p>\n<h2>Проверяемые источники</h2><ul><li><a href=\"https://github.com/microsoft/playwright/blob/af0d2936ac6e8780214c251ff58a5e7d6eba41ca/docs/src/test-assertions-js.md\" target=\"_blank\" rel=\"noopener noreferrer\">Playwright: test assertions, commit af0d2936 (7 октября 2022)</a> — неизменяемый исходный документ версии v1.27.0, опубликованной 7 октября 2022 года. Описывает retrying assertion до условия или timeout; статья не запускает Playwright.</li><li><a href=\"https://www.w3.org/TR/2022/WD-webdriver2-20221025/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C WebDriver, Working Draft 25 октября 2022 года</a> — датированный Working Draft, доступный в октябре 2022 года. Он задаёт remote-control interface, но не определяет смысл прикладного состояния страницы.</li><li><a href=\"https://www.w3.org/TR/2018/REC-WCAG21-20180605/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C WCAG 2.1, Recommendation 5 июня 2018 года</a> — нормативная Recommendation, доступная к октябрю 2022 года. Используется для критерия 4.1.3 и границы: статус должен быть программно определимым, а статья не заявляет conformance конкретной страницы.</li></ul>"
}