Тестирование сайта без JavaScript: что и зачем

Большинство фронтенд-разработчиков исходят из того, что JavaScript всегда доступен. Обычно так и есть. Но это предположение незаметно влияет на то, как вы строите приложения — и может привести к хрупким решениям, которые ломаются способами, которых вы никогда не ожидали.

Тестирование сайта без JavaScript — это не попытка угодить редким пользователям, которые намеренно отключают скрипты. Это диагностический инструмент. Он показывает, полностью ли ваш основной пользовательский сценарий зависит от выполнения кода на клиенте, и заставляет серьёзно задуматься о том, что происходит, когда это выполнение не срабатывает.

Почему JavaScript отказывает чаще, чем вы думаете

Незаметные отказы JavaScript встречаются чаще, чем осознают большинство разработчиков. Скрипты не успевают загрузиться в медленных мобильных сетях. Расширения браузера, такие как uBlock Origin или NoScript, блокируют сторонние скрипты — иногда вместе с вашими. Сбои CDN, неправильная конфигурация Content Security Policy, несоответствия type="module" и ошибки выполнения — всё это может помешать корректной инициализации вашего приложения.

Когда JavaScript — единственный механизм, обеспечивающий навигацию, рендеринг контента или отправку форм, любой из этих сбоев приводит к пустому экрану или сломанному интерфейсу. Пользователи не получают сообщения об ошибке. Они просто уходят.

Что на самом деле выявляет тестирование без JavaScript

Отключение JavaScript во время разработки — это быстрый и честный аудит вашего HTML-first фундамента. Вот что вы обычно обнаружите:

• Навигация, построенная из несемантических элементов. <div> или <span>, привязанные к обработчику клика, полностью перестают работать. Правильный <a href="/page"> продолжает функционировать.
• Формы с валидацией только на клиенте. Если ваша форма полностью зависит от JavaScript-валидации и не имеет атрибута action, указывающего на серверную точку входа, она ничего не делает без скриптов.
• Контент, который существует только после гидратации. Во многих React или Vue SPA сервер отправляет почти пустую HTML-оболочку. Без JavaScript пользователи ничего не видят.
• Элементы управления UI, реализованные исключительно в скриптах. Аккордеоны, модальные окна и панели вкладок, построенные без семантического HTML или нативного поведения браузера, полностью ломаются.

Это не крайние случаи. Это архитектурные решения, которые накапливаются со временем.

Как тестировать сайт без JavaScript

Самый быстрый способ — использовать Chrome DevTools:

1. Откройте DevTools и нажмите Cmd+Shift+P (Mac) или Ctrl+Shift+P (Windows).
2. Введите Disable JavaScript и нажмите Enter.
3. Перезагрузите страницу.

Альтернативно, откройте настройки DevTools (значок шестерёнки), перейдите в Debugger и отметьте Disable JavaScript — это сохранится между перезагрузками.

Построение устойчивых фронтенд-приложений с прогрессивным улучшением

Цель — не создавать два отдельных варианта интерфейса. Цель — построить один интерфейс на прочном HTML-фундаменте, а затем наслоить JavaScript сверху.

Современные фреймворки всё больше поддерживают это. Next.js, Remix и Astro предлагают серверный рендеринг, который предоставляет реальный HTML до запуска любого клиентского кода. HTML-формы с атрибутами action и method корректно отправляются до завершения гидратации. Нативные возможности браузера — <details> для аккордеонов, <dialog> для модальных окон, CSS :target для паттернов вкладок — обрабатывают взаимодействия, которые раньше полностью требовали JavaScript.

Паттерн выглядит так: начните с семантического HTML, который работает. Затем добавьте JavaScript как улучшение.

<!-- Работает без JS: настоящая ссылка, доступная с клавиатуры -->
<a href="/dashboard" id="nav-dashboard">Dashboard</a>

<script>
  // Улучшение: перехват только когда JS доступен
  document.getElementById('nav-dashboard')
    ?.addEventListener('click', (e) => {
      e.preventDefault();
      router.push('/dashboard');
    });
</script>

<!-- Форма работает без JS, если сервер обрабатывает endpoint -->
<form action="/contact" method="post">
  <label for="message">Сообщение</label>
  <textarea id="message" name="message" required></textarea>
  <button type="submit">Отправить</button>
</form>

Серверная валидация здесь обязательна. Никогда не полагайтесь исключительно на клиентскую валидацию.

Заключение

Тестирование без JavaScript — это не о поддержке пользователей, которые его отключают. Это о понимании собственной архитектуры. Если отключение JavaScript ломает весь ваш сайт, вы построили что-то хрупкое — а хрупкие вещи отказывают в продакшене в самые неподходящие моменты.

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

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.