Раздел 43 · Автотестирование с нуля

Фронтенд для тестировщика: из чего сделана страница

middle~50 мин

без входаВойди, чтобы отмечать прогресс, вести заметки и решать задачи в редакторе. войти

Блок G закончился на том, что API больше не врёт: гонку за место 14Б ты поймал и закрепил тестом. Но зритель API не видит. Он видит кнопку. Кнопка может не нажаться, нажаться дважды, уехать за край экрана или остаться без подписи, и всё это при идеально работающем API. В «Ночь продаж» 40 000 зрителей будут жать её за 15 минут, и каждый лишний клик по «Купить» это второй запрос на то же место. Блок H про этот уровень: браузер, страница, клик.

«У меня в Chrome всё ок» Ника говорит честно: на её ноутбуке, в её браузере, на её широком экране страница работает. Ника верит линтеру и DevTools больше, чем своим глазам, и в этом уроке это тебе на руку: она покажет, как браузер видит страницу изнутри. А увидеть то, что сломается у зрителя с телефоном, придётся тебе.

Начнём не с Playwright, а с того, по чему он ходит. Если слова «DOM», «атрибут» и «всплытие события» звучат впервые, пройди сначала уроки 01, 02 и 03 раздела про фронтенд: это ворота блока, без них дальше будет тяжело. Если звучат знакомо, этот урок соберёт их в то, что нужно тестировщику.

Схема зала и сам зал

У администратора театра на столе лежит схема зала: ряды, места, проходы, где ложа. По схеме он отвечает на вопросы «где 14Б» и «свободно ли оно» и ни разу не заходит в зал. Схема не красивая, зато точная. Если в зале перекрасили кресла, схема не меняется. Если убрали ряд, меняется.

Браузер держит такую схему для каждой страницы. Красивая картинка на экране получается из неё, а не наоборот. Автотест работает со схемой: ищет в ней место, проверяет его состояние, нажимает. Поэтому тестировщику нужно знать, как схема устроена, что в ней значимо, а что просто цвет кресел.

урок из курса

Урок из курса «Автотестирование с нуля». Курс покупается один раз и остаётся навсегда: 500 ₽.

Оплата пока не подключена: премиум и курсы открываются промокодом.