Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Кросс-браузерность, что ты делаешь?..
Ах-ха-ха, прекрати!
Скрипник Татьяна, Киев
Об авторе
2 года тестирования web-приложений
в компании Softengi
Тренер в Softengi Training Center
tanya.skripnik92@gmail....
Cross-browser
– это способность веб-сайтов, веб-
приложений, HTML конструкций или client-side
скриптов полноценно функцион...
Популярные браузеры
Популярные браузеры
Популярные браузеры
Популярные браузеры
Популярные браузеры
Популярные браузеры
Популярные браузеры
Популярные браузеры
Типичные баги кросс-
браузерности
- Placeholder
- Shadow
- Border radius
- Buttons
Placeholder
Атрибут placeholder выводит текст внутри
текстового поля, который исчезает при
получении фокуса.
Placeholder
Placeholder реализованный с помощью
javascript.
Placeholder с помощью javascript
1) Цвет шрифта может отличаться (зачастую он
темнее)
2) Подсказка может не пропадать при ...
Shadow
Внутренняя тень
Внешняя тень или «свечение»
Border radius
Chrome, Safari, Opera
IE 8,9
Buttons
• Размещение кнопок относительно поля
• Размещение текста кнопки
IE 8 Opera Firefox
Developer Tools (F12)
Инструменты
https://dev.modern.ie/tools/
Хабр плохого не советует 
http://habrahabr.ru/sandbox/82473/
Экономия времени
• Нет необходимости перетестировать весь
функционал приложения в разных
браузерах
• Больше багов будет вы...
Выводы
1. Грамотная оценка кросс-браузерного
тестирования может послужить буфером для
функционального тестирования
2. Стои...
И не забывайте:
«идеальных» браузеров не бывает…
Полезные ссылки
• http://webcocktail.ru/coding/css-box-shadow/
• http://xiper.net/
• http://web-standards.ru/articles/cros...
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
QA Fest 2015. Татьяна Скрипник. Кросс-браузерность, что ты делаешь?.. Ах-ха-ха, прекрати!
Prochain SlideShare
Chargement dans…5
×

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

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

  • Identifiez-vous pour voir les commentaires

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/

×