如何检查 Zebkit UI 的元素

Posted

技术标签:

【中文标题】如何检查 Zebkit UI 的元素【英文标题】:How to inspect element of Zebkit UI 【发布时间】:2017-08-14 12:11:42 【问题描述】:

作为自动化测试的一部分,我们希望检查使用 Zebkit UI 框架构成的网站中的元素。

我们无法使用 zebra.ui 找到元素

例子可以在here找到

有人可以帮助我们检查元素吗

【问题讨论】:

你是如何尝试“找到”元素的?您要“查找”/“检查”哪个确切元素? selenium 与此问题有何关联? 我们的 QA 团队正计划使用 selenium 实现自动化,因此认为 selenium 中的任何解决方案也适用于他们。我尝试在运行 zebra.ui 等命令后运行并检查属性,并使用他们使用的 zebra 命名空间。 【参考方案1】:

Zebkit UI 组件在 html5 Canvas 上呈现。所以它们不是浏览器 DOM 树的一部分,这对于期望 DOM 作为输入的测试工具来说可能是个问题。但这并不意味着你不能通过 zebkit UI 的东西来执行测试用例。

首先要记住zebkit 组件是像DOM 一样的层次结构/树。 每个呈现在画布上的zebkit UI 组件都有一个相关的相应类的JS 实例。您可以使用多种 API 方法来遍历 UI 组件树。这些方法需要路径(类似 XPath),因为路径(从我的角度来看)比 CSS 选择器的“加密”方式更少。

你可能需要的 API 方法:

byPath(path [,callback]) - 通过给定路径遍历 UI 组件树

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

properties([path,] properties)将指定的属性集应用到给定路径请求的组件或组件数

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)为给定组件的给定事件(或所有事件)添加侦听器方法或使用路径标识的组件: p>

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,] [argument]) 将给定事件触发到给定组件或由路径标识的组件:

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");

【讨论】:

【参考方案2】:

我不确定我是否正确理解了您的问题,但假设您无法单击 canvas 上的右键打开上下文菜单并选择“检查元素”选项。

你可以

在浏览器中按F12 切换到“元素”/“HTML”标签 在搜索字段中 (CTRL + F) 打印 "canvas"/"<canvas" 并按 Enter 继续按Enter,直到找到需要的canvas(当前元素应突出显示)

【讨论】:

感谢您的回复。但我们想检查画布内的表单元素。 您是指看起来像input 的元素,例如"rgb(185,188,192)" 没有。我们在 Html 中看到了唯一的画布。但是使用 Zebkit 将所有输入元素都包裹在画布内 它们似乎不是“真实的”输入,您不能将它们作为单独的 Web 元素处理。我想你可以以某种方式使用Actions(),但你应该注意,目前它不适用于Firefox。您也可能会发现这很有用qxf2.com/blog/selenium-html5-canvas-verify-what-was-drawn 好的..你能看看这个。 repo.zebkit.org/latest/samples/uidemo.html# 在基本 UI 中,它们具有输入元素。我们想捕捉这样的元素【参考方案3】:

这些控件是使用 HTML5 CANVAS 标记实现的。 Selenium 看不到这个标签的“内部”,因为它不包含 HTML。它就像页面内的应用程序。从您链接的页面看来,您应该能够使用 JS 访问控件内的元素。过去,当我使用CANVAS 标签完成操作时,我通常会找到执行或返回我想要的内容的 JS,然后将该代码包装在我可以调用的函数中。它会起作用,但您可能需要对 Zebkit 进行一些研究,以找出您需要验证的 JS 等等。您想要验证的所有不同的东西......最终您可能不会能够验证一些东西。

【讨论】:

以上是关于如何检查 Zebkit UI 的元素的主要内容,如果未能解决你的问题,请参考以下文章

Selenium Webdriver:如何检查特定屏幕上是不是存在 ui 元素,无论它当前是不是可见/可点击

如何检查 JQuery UI 工具提示?

检查 UI 元素/RectTransform 是不是重叠

如何统一检查文本元素[重复]

在 XCUITests 中,如何等待多个 ui 元素的存在?

Xcode ui 测试:staticTexts 开头