Как скрыть или изменить элемент через DevTools для целей тестирования?

DevTools предоставляет несколько методов для манипуляции DOM во время тестирования.

1. Скрытие элементов через панель Styles

/* Полное скрытие (элемент не занимает место) */
display: none;

/* Скрытие с сохранением пространства */
visibility: hidden;

/* Прозрачность */
opacity: 0;

2. Программное изменение через Console

// Скрыть первую кнопку
document.querySelector('button').style.display = 'none';

// Скрыть все кнопки определенного класса
document.querySelectorAll('.btn-primary').forEach(btn => {
    btn.style.visibility = 'hidden';
});

// Временное удаление атрибута disabled
document.getElementById('submit-btn').removeAttribute('disabled');

3. Изменение CSS-классов

// Добавление класса для скрытия
document.querySelector('.element').classList.add('hidden');

// Удаление класса для отображения
document.querySelector('.element').classList.remove('hidden');

4. Сохранение изменений для тестов (Local Overrides)

1. В DevTools → Sources → Overrides
2. Включите "Enable Local Overrides"
3. Сделайте изменения в элементах или стилях
4. Изменения сохранятся после перезагрузки

5. Использование для тестирования доступности

// Проверка, как скринридер видит скрытый элемент
const element = document.querySelector('.visually-hidden');
console.log(element.getAttribute('aria-label'));  // Проверка метки

Важно: изменения в DevTools временны и сбрасываются после обновления страницы.