Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными:
- На что обращать внимание?
- Какие браузеры выбрать? Что делать с разными версиями одного браузера?
- Какие инструменты использовать?
- Сколько времени выделить?
Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование.
В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.
2. Об авторе
2 года тестирования web-приложений
в компании Softengi
Тренер в Softengi Training Center
tanya.skripnik92@gmail.com
tanya_skripnik92
Tanya Skripnik
3. Cross-browser
– это способность веб-сайтов, веб-
приложений, HTML конструкций или client-side
скриптов полноценно функционировать на
окружениях, полностью поддерживающих их
функционал, и корректно обрабатывать
случаи, когда функции отсутствуют или не
полностью поддерживаются.
https://en.wikipedia.org/wiki/Cross-browser
16. Placeholder с помощью javascript
1) Цвет шрифта может отличаться (зачастую он
темнее)
2) Подсказка может не пропадать при клике в
поле
3) Подсказка может не появиться обратно после
очистки поля от введенного текста
4) При нажатии на кнопку подписки будет
отправлен текст подсказки
22. Экономия времени
• Нет необходимости перетестировать весь
функционал приложения в разных
браузерах
• Больше багов будет выявлено в ранних
версиях ИЕ
23. Выводы
1. Грамотная оценка кросс-браузерного
тестирования может послужить буфером для
функционального тестирования
2. Стоит следить за новыми фичами HTML5 и CSS3,
которые, вероятней всего, не будут полностью
поддерживаться старыми версиями браузеров
3. Научитесь говорить на одном языке с
разработчиком
Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии.
Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии.
Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать.
Google Chrome сильно “косячит” с отображением внутренней тени у блока с закруглёнными углами (border-radius). Весьма странно, что в Safari, хотя он и работает с Chrome на одном движке, таких проблем не наблюдается.
В Safari радиус размытия (blur distance) у тени визуально значительно меньше, чем в других браузерах
Самым очевидным и простым способом сделать это ещё с ранних версий HTML являются картинки. Увы, самой простой способ не всегда самый лучший или подходящий. Например, можно просто наложить уголки с цветом фона на элемент, но такой способ не годится, когда, оставшаяся за скруглением, часть должна быть прозрачной.
И, конечно же, хочется уменьшить число запросов к серверу, чтобы страница сразу показывалась в задуманном виде без лишних задержек.
Кроме того, что прозрачные картинки усложняют вёрстку, дизайнеры ещё и хотят видеть их сглаженными, а с полупрозрачными картинками есть немалыесложности в Internet Explorer 6. Их можно решить через фильтры, но ценой этого будет сильное проседание производительности. Пожалуй, мало кто захочет чтобы с их сайта уходили клиенты, не дождавшиеся загрузки. Но не все об этом подозревают.
Для облегчения работы (и снижения стоимости создания решений, основанных на веб-стандартах) было придумано и реализовано современными браузерамиCSS-свойство border-radius, которое позволяет закруглить уголки прямо средствами браузера без каких-либо дополнительных усилий.
Так же в старых версиях браузера Opera (начиная с 9.5) существует ещё однообходное решение: использовать векторную графику SVG в качестве фона.
А что же Internet Explorer?
Однако, пока ещё самым распространённым в мире браузером является Internet Explorer, не поддерживающий решение ни через CSS, ни через SVG. Тем не менее, в Internet Explorer есть ещё одна малоизученная (как мы увидим дальше) возможность: один из предков SVG — векторная графика VML.
В VML есть предопределённая фигура: прямоугольник с закруглёнными угламиroundrect.
1# С помощью картинок - Вставляем в блок div 4 картинки по углам, Либо две сверху и снизу в виде шапки, где уже выполнено скругление. 2# С помощью блоков div и пощаговой аппроксимации радиуса - имитация скругления (скругление без картинок) css-div округлые углы.Скругление на уровне стилей... 3# W3C CSS3 и свойство border-radius. Благодаря различным вендорным свойствам от производителей браузеров и плагина PIE (для Internet Explorer) - стало возможно скруглять углы на уровне браузера, путем задания соответствующих стилей блоку div и указания радиуса скругления.
внутренний отступ у кнопки в FF, который зарезервирован для рамки при фокусе
Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий: Посередине есть зона контента, которую окружает padding, окруженный границей border, которая в свою очередь окружена полями margin.
