Successfully reported this slideshow.

QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!

2

Share

1 of 26
1 of 26

QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!

2

Share

Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными:
- На что обращать внимание?
- Какие браузеры выбрать? Что делать с разными версиями одного браузера?
- Какие инструменты использовать?
- Сколько времени выделить?
Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование.
В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.

Зачастую начинающие тестировщики предполагают, что «посмотреть» веб-приложение в «разных» браузерах и есть содержание кросс-браузерного тестирования. Но множество вопросов остаются недосказанными:
- На что обращать внимание?
- Какие браузеры выбрать? Что делать с разными версиями одного браузера?
- Какие инструменты использовать?
- Сколько времени выделить?
Зная ключевые различия браузеров, особенности отображения контролов, форм и прочих элементов страницы, можно не только улучшить карму своего веб-приложения, но и не теряя эффективности значительно сократить время на тестирование.
В докладе хочу поделиться с вами приобретенными знаниями различий известных браузеров, показать, на что стоит обращать внимание в первую очередь и, как можно более грамотно описать проблему разработчику в случае её нахождения.

More Related Content

More from QAFest

Related Books

Free with a 14 day trial from Scribd

See all

QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!

  1. 1. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати! Скрипник Татьяна, Киев
  2. 2. Об авторе 2 года тестирования web-приложений в компании Softengi Тренер в Softengi Training Center tanya.skripnik92@gmail.com tanya_skripnik92 Tanya Skripnik
  3. 3. Cross-browser – это способность веб-сайтов, веб- приложений, HTML конструкций или client-side скриптов полноценно функционировать на окружениях, полностью поддерживающих их функционал, и корректно обрабатывать случаи, когда функции отсутствуют или не полностью поддерживаются. https://en.wikipedia.org/wiki/Cross-browser
  4. 4. Популярные браузеры
  5. 5. Популярные браузеры
  6. 6. Популярные браузеры
  7. 7. Популярные браузеры
  8. 8. Популярные браузеры
  9. 9. Популярные браузеры
  10. 10. Популярные браузеры
  11. 11. Популярные браузеры
  12. 12. Типичные баги кросс- браузерности - Placeholder - Shadow - Border radius - Buttons
  13. 13. Placeholder Атрибут placeholder выводит текст внутри текстового поля, который исчезает при получении фокуса.
  14. 14. Placeholder Placeholder реализованный с помощью javascript.
  15. 15. Placeholder с помощью javascript 1) Цвет шрифта может отличаться (зачастую он темнее) 2) Подсказка может не пропадать при клике в поле 3) Подсказка может не появиться обратно после очистки поля от введенного текста 4) При нажатии на кнопку подписки будет отправлен текст подсказки
  16. 16. Shadow Внутренняя тень Внешняя тень или «свечение»
  17. 17. Border radius Chrome, Safari, Opera IE 8,9
  18. 18. Buttons • Размещение кнопок относительно поля • Размещение текста кнопки IE 8 Opera Firefox
  19. 19. Developer Tools (F12)
  20. 20. Инструменты https://dev.modern.ie/tools/ Хабр плохого не советует  http://habrahabr.ru/sandbox/82473/
  21. 21. Экономия времени • Нет необходимости перетестировать весь функционал приложения в разных браузерах • Больше багов будет выявлено в ранних версиях ИЕ
  22. 22. Выводы 1. Грамотная оценка кросс-браузерного тестирования может послужить буфером для функционального тестирования 2. Стоит следить за новыми фичами HTML5 и CSS3, которые, вероятней всего, не будут полностью поддерживаться старыми версиями браузеров 3. Научитесь говорить на одном языке с разработчиком
  23. 23. И не забывайте: «идеальных» браузеров не бывает…
  24. 24. Полезные ссылки • http://webcocktail.ru/coding/css-box-shadow/ • http://xiper.net/ • http://web-standards.ru/articles/cross-browser-rounded- corners/ • http://pravdabiz.ru/2011/05/24/tri-metoda-skrugleniya- uglov-u-elementov-sajta/

Editor's Notes

  • Атрибут 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.

  • ×