Как проверить элемент Zebkit UI

Question

В рамках тестирования автоматизации мы хотим проверить элемент на веб-сайте, который сделан с использованием инфраструктуры пользовательского интерфейса Zebkit.

Мы не можем найти элемент, используя zebra.ui

примеры можно найти здесь

Может ли кто-нибудь помочь нам осмотреть элемент

Answer 1

Компоненты Zebkit UI отображаются на HTML5 Canvas. Таким образом, они не являются частью дерева DOM браузера, что может быть проблемой для инструмента тестирования, который ожидает DOM в качестве входных данных. Но это не значит, что вы не можете пройтись по зебкитскому интерфейсу для выполнения тестовых случаев.

Прежде всего, имейте в виду, что компоненты zebkit - это иерархия / дерево, как у DOM. Каждый визуализированный на холсте компонент пользовательского интерфейса zebkit имеет связанный экземпляр JS соответствующего класса. Существует множество методов API, которые вы можете использовать для перемещения по дереву компонентов пользовательского интерфейса. Эти методы ожидают путь (в стиле XPath), поскольку путь (с моей точки зрения) менее "зашифрован", чем CSS-селектор.

Методы API, которые вам, вероятно, понадобятся:

• byPath (path [, callback]) - обход дерева компонентов пользовательского интерфейса по заданному пути

  var zcanvas = new zebkit.ui.zCanvas(); ... // travel over all UI components in tree zcanvas.byPath("//*", function(comp) { // perform test cases here ... });

• Свойства ([путь,] свойства) применяет указанный набор свойств к компоненту или количеству компонентов, запрашиваемых данным путем

  var zcanvas = new zebkit.ui.zCanvas(); ... // set color property to black value for all labels zcanvas.properties("//zebkit.ui.Label", { color: "black" });

• on([eventName], [path], handler) добавить метод (ы) слушателя для данного события (или всех событий) данного компонента или компонентов, идентифицированных путем:

  var zcanvas = new zebkit.ui.zCanvas(); ... // register event listener for all found buttons zcanvas.on("//zebkit.ui.Button", function (src) { // handle button press event here ... });

• fire ([eventName,] [path,] [аргумент]) запускает данное событие для данного компонента или для компонентов, идентифицированных с путем:

  var zcanvas = new zebkit.ui.zCanvas(); ... // fire button pressed event to button with id equals "testButton" zcanvas.fire("//[@id='testButton']"); ... // or the same with a shortcut zcanvas.fire("#testButton");

Answer 2

Я не уверен, что правильно понимаю вашу проблему, но предположим, что вы не можете нажать правую кнопку на canvas открыть контекстное меню и выбрать пункт "Проверить элемент".

Вы можете

• Нажмите F12 в браузере
• перейти на вкладку "Элементы"/"HTML"
• в поле поиска (CTRL + F) Распечатать "canvas"/"<canvas" и нажмите Enter
• Продолжайте нажимать Enter пока не требуется canvas найдено (текущий элемент должен быть выделен)

Answer 3

Эти элементы управления реализованы с использованием HTML5 CANVAS тег. Selenium не может видеть "внутри" этого тега, потому что он не содержит HTML. Это как приложение внутри страницы. Со страницы, на которую вы ссылаетесь, похоже, вы сможете использовать JS для доступа к элементам внутри элемента управления. Когда я сделал что-то с CANVAS в прошлом я обычно нахожу JS, который выполняет или возвращает то, что я хочу, а затем заключаю этот код в функцию, которую я могу вызвать. Это сработает, но вам, вероятно, придется провести некоторое исследование на Zebkit, чтобы выяснить, какой JS вам понадобится для проверки, и т. Д. Все разные вещи, которые вы хотите проверить... и может закончиться тем, что вы не будете возможность проверить некоторые вещи.