Тестирование вёрстки Рекомендации для разработчиков и QA по тестированию XHTML/CSS/JS прототипов Алексей Рыбаков Разработчик интерфейсов

ru Содержание 1). Соответствие реализации дизайн-прототипам 2). Браузеры 3). Разрешение экрана 4). Доступность 4.1). Навигация по сайту с отключенной графикой 4.2). Навигация по сайту с отключенным javascriptом или flashем 4.3). Размер шрифта 5). Формы 5.1). Работоспособность 5.2). Доступность 6). Соответствие стандартам 6.1). Автоматизация валидации 7). Идеальный баг-репорт

ru Соответствие дизайну Цвета Шрифты Размеры и отступы элементов Поведение при изменении размеров окна браузера Поведение ссылок (hover, visited, etc.) Качество нарезки графики

ru Браузеры Градация по уровням поддержки Первый уровень полное соответствие макетам во всех сайтах уровня, полную доступность всей представленной информации. Также дефектами считаются js-ошибки (включая консоль). Приоритет максимальный. Второй уровень допускает пропуск несущественных ошибок в оформлении и акцентирован на полную доступность всей информации, представленной на сайте. Приоритет средний.

ru Браузеры Первый уровень: Internet Explorer 5.0 Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Opera 9 Firefox 2 Safari 2 Второй уровень: Opera 7.5, 8.5 Netscape 8 Mozilla Konqueror 3.5

ru Браузеры Старые версии браузеров можно найти по следующим адресам: (Firefox) (Mozilla) (Opera) (Netscape) (Internet Explorer) (Safari)

ru Разрешение экрана Размеры и отступы элементов Поведение текста (неудачные переносы, etc.) Поведение графики (коллажи, etc.) Заданная минимальная ширина макета Приоритет от среднего до максимального.

ru Доступность Навигация по сайту с отключенной графикой Зарезервированное под изображения пространство Возможность навигации (графические меню) Наличие осмысленного альтернативного текста для изображений, несущих информацию Приоритет от среднего до максимального.

Доступность

Доступность

Доступность Навигация по сайту с отключенным javascriptом или flashем Возможность работы с формами Возможность навигации (попапы, etc.) Доступность всей информации Сохранение целостности макета Приоритет от среднего до максимального.

ru Доступность Размер шрифта Минимальное представление текста в виде графики Целостность макета при увеличении размера шрифта: до «Largest» в Internet Explorer На два шага по «CTRL-+» в Firefox Приоритет средний.

ru Формы Работоспособность Валидация полей Возможность использования и отправки форм Приоритет максимальный.

ru Формы Доступность Работоспособность labelов Работа с клавиатуры Приоритет низкий.

ru Автоматизация валидации Технические требования Apache Ant или выше wget validate.xml validate.cmd папка /dtd

ru Автоматизация валидации Запуск validate

ru Автоматизация валидации Результат Файл _errors.txt [xmlvalidate] C:\1\site\contact\index.html:38:84: Attribute "name" must be declared for element type "form". [xmlvalidate] C:\1\site\contact\index.html:66:50: Element type "select" must be followed by either attribute specifications, ">" or "/>". [xmlvalidate] C:\1\site\introduce\benefits.asp.html:25:86: Attribute "alt" is required and must be specified for element type "img". [xmlvalidate] C:\1\site\introduce\benefits.asp.html:26:295: Invalid byte 1 of 1-byte UTF-8 sequence. etc.

ru Идеальный баг-репорт Структура Название репорта Контент-навигация. Некорректное поведение фонового изображения пункта списка при увеличении шрифта Тактико-технические характеристики Downloads page Firefox *1024 Text size: 2x«Ctrl-+» Скриншот Приоритет Средний