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

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

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

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

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

5 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

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

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

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

9 Доступность

10 Доступность

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

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

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

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

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

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

17 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. " 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.">

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