Тестирование безDOMных объектов
•
0 likes•752 views
Доклад Алексея Емелина на конференции SQA Days-12, 30 ноября-1 декабря, Минск
Recommended
Recommended
More Related Content
Similar to Тестирование безDOMных объектов
Similar to Тестирование безDOMных объектов (20)
More from SQALab
More from SQALab (20)
Тестирование безDOMных объектов
- 2. Тестирование безDOMных объектов современных веб-интерфейсов Алексей Емелин Инженер по автоматизации тестирования
- 3. Современные веб-интерфейсы <html>! <head>! …! </head>! <body>! …! <canvas>! </canvas>! …! </body>! </html>! http://www.lw-zone.org/word/ 3
- 4. Результат работы API Яндекс.Карт DOM-элементы безDOMные элементы (canvas) 4
- 5. Этапы тестирования Интерфейс 5
- 6. Этапы тестирования Интерфейс unit тесты 6
- 7. Этапы тестирования ручные тесты Интерфейс unit тесты 7
- 8. Этапы тестирования ручные тесты Интерфейс unit тесты авто тесты 8
- 9. Требования к автоматизации • Запуск тестов во всех популярных браузерах 9
- 10. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API 10
- 11. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) 11
- 12. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения 12
- 13. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 13
- 14. Запуск тестов во всех популярных браузерах
- 15. Запуск тестов во всех популярных браузерах. WebDriver • Нативный интерфейс для взаимодействия с браузером 15
- 16. Запуск тестов во всех популярных браузерах. WebDriver • Нативный интерфейс для взаимодействия с браузером • Есть для всех популярных браузеров 16
- 17. Запуск тестов во всех популярных браузерах. WebDriver • Нативный интерфейс для взаимодействия с браузером • Есть для всех популярных браузеров • Поиск элемента в DOM-дереве по имени, по названию класса, по id, по css или xpath селектору и взаимодействие с ним 17
- 18. Запуск тестов во всех популярных браузерах. WebDriver • Нативный интерфейс для взаимодействия с браузером • Есть для всех популярных браузеров • Поиск элемента в DOM-дереве по имени, по названию класса, по id, по css или xpath селектору и взаимодействие с ним • Чтение и запись параметров DOM-элемента 18
- 19. Запуск тестов во всех популярных браузерах. WebDriver • Нативный интерфейс для взаимодействия с браузером • Есть для всех популярных браузеров • Поиск элемента в DOM-дереве по имени, по названию класса, по id, по css или xpath селектору и взаимодействие с ним • Чтение и запись параметров DOM-элемента • Выполнение JavaScript кода 19
- 20. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 20
- 21. Взаимодействие с JavaScript API
- 22. Выполнение JS кода. JavascriptExecutor js =(JavascriptExecutor) driver;! ! String script = "return map.getCenter();";! ! Float[] center = js.executeScript(script);! 22
- 23. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 23
- 24. Взаимодействие с пользовательским интерфейсом
- 25. Элементы веб-интерфейса DOM-элементы безDOMные элементы (canvas) 25
- 26. Структура карты подложка 26
- 27. Структура карты слой графики подложка 27
- 28. Структура карты слой событий слой графики подложка 28
- 29. Структура карты слой контролов слой событий слой графики подложка 29
- 30. Хотспоты ! RenderedGeometry: {! type: "Circle",! coordinates: [141, 208],! !radius: 40! } ! слой событий слой графики 30
- 31. Взаимодействие с безDOMными объектами 31
- 32. Взаимодействие с безDOMными объектами 32
- 33. Взаимодействие с безDOMными объектами 33
- 34. Работа с сеткой 11 click(11, 11); Ширина клетки: 32 11 x = 11 * 32 + 32 / 2 y = 11 * 32 + 32 / 2 34 click(368, 368);
- 35. Способы взаимодействия с интерфейсом • DOM-элемент – классический подход • БезDOMный элемент – координатный подход Два различных подхода – это слишком! 35
- 36. Выбираем элемент для клика document.elementFromPoint(x, y)! 36
- 37. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 37
- 39. Проверка визуального представления DOM-элементы безDOMные элементы(canvas) 39 Как проверить содержимое canvas?
- 40. Проверка canvas через JS объект var placemark = new ymaps.Placemark([54, -8]);! var options = placemark.options;! var style = options.get(‘preset’); ! placemark ! А если разработчик ошибся? 40
- 41. Проверка canvas через пиксели var pixel = canvas.getImageData(x, y, 1, 1).data; ! Не лучший вариант 41
- 42. Проверка canvas сравнением скриншотов 1. Подготовить эталонное изображение 2. Сравнить проверяемое с эталоном 3. ??? 4. PROFIT тест.png эталон.png 42
- 43. Проблемы работы с эталоном • Редактируем сценарий теста – создаем новый эталон 43
- 44. Проблемы работы с эталоном • Редактируем сценарий теста – создаем новый эталон • Информация, меняющаяся со временем 44
- 45. Проблемы работы с эталоном • Редактируем сценарий теста – создаем новый эталон • Информация, меняющаяся со временем • Разные браузеры – разные скриншоты 45
- 46. Проблемы работы с эталоном • Редактируем сценарий теста – создаем новый эталон • Информация, меняющаяся со временем • Разные браузеры – разные скриншоты 46
- 47. Генерируем эталоны на лету Запускаем • в то же время 47
- 48. Генерируем эталоны на лету Запускаем • в то же время • в той же версии браузера 48
- 49. Генерируем эталоны на лету Запускаем • в то же время • в той же версии браузера • тот же тест 49
- 50. Генерируем эталоны на лету Запускаем • в то же время • в той же версии браузера • тот же тест • с проверенной версией АПИ 50
- 51. Проверка визуального отображения testing production сравниваем 51
- 52. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 52
- 54. Отслеживание JavaScript ошибок window.onerror = function(message, url, line){} 54
- 55. Разные хосты – разный текст ошибок Тот же хост Другой хост http://clck.ru/28EY9 55
- 56. Решение проблемы описания JS ошибок Access-Control-Allow-Origin: *! Access-Control-Allow-Origin: http://testhost.ru ! • http://enable-cors.org/ 56
- 57. Если нет доступа к серверу FirefoxProfile ffProfile = new FirefoxProfile(); JavaScriptError.addExtension(ffProfile); ! final WebDriver driver = new FirefoxDriver(ffProfile); ! ! driver.get("http://somesite"); ! ! final List<JavaScriptError> jsErrors = !JavaScriptError.readErrors(driver); ! assertTrue(jsErrors.toString(), jsErrors.isEmpty());! • https://github.com/mguillem/JSErrorCollector 57
- 58. Требования к автоматизации • Запуск тестов во всех популярных браузерах • Взаимодействие с JavaScript API • Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) • Проверка визуального отображения • Отслеживание JavaScript ошибок 58
- 59. Архитектура
- 60. Архитектура тестирования *.html • карта • описание теста • сценарий теста Java движок • выполнение теста • проверка результатов • построение отчета 60
- 61. html. Что внутри? <!doctype html>! <!--(description)! проверяем опцию ZIndex! -->! <!--(version)! 2.0.13! -->! <!--(commands)! click(12, 11); // кликаем по объекту! test();! drag([10, 0], [14, 0]); // перетаскиваем метку! test();! -->! <html>! <head>! ! ! !<script src=“/dynamic_api_loader.js"></script>! <script type="text/javascript">! function init(ymaps){! myMap = new ymaps.Map(‘map’);! ...! 61
- 62. … … тест движок … 62
- 63. Доступные команды • mousedown(x, y) • test() • mouseup(x, y) • center(lat, long) • click(x, y) • zoom(z) • dblclick(x, y) • sleep(s) • mouseover(x, y) • drag([x1, y1], [x2, y2]) • mouseout(x, y) • mousemove(x, y) 63
- 64. click(10, 0); sleep(1000); 64
- 65. click(10, 0); sleep(1000); click(8, 7); sleep(1000); 65
- 66. click(10, 0); sleep(1000); click(8, 7); sleep(1000); test(); 66
- 67. Версия для проверки Эталон Разница 67
- 68. click(0, 15); test(); 68
- 69. Версия для проверки Эталон Разница 69
- 70. Итого • Рабочий прототип системы автоматического тестирования • Удовлетворяющий требованиям: – Запуск тестов во всех популярных браузерах – Взаимодействие с JavaScript API – Взаимодействие с пользовательским интерфейсом (DOM, CANVAS) – Проверка визуального отображения – Отслеживание JavaScript ошибок 70
- 71. Емелин Алексей Инженер по автоматизации тестирования dolf@yandex-team.ru twitter:aemelin