如何检查 Zebkit 的元素 UI
How to inspect element of Zebkit UI
作为自动化测试的一部分，我们想检查使用 Zebkit UI 框架构建的网站中的元素。
我们无法使用 zebra.ui
找到元素
可以找到示例here
谁能帮我们检查元素
我不确定我是否正确理解了您的问题，但假设您无法在 canvas 上单击右键打开上下文菜单和 select "Inspect element" 选项。
你可以
- 在浏览器中按
F12
- 切换到"Elements"/"HTML"选项卡
- 在搜索字段 (
CTRL + F) 中打印 "canvas"/"<canvas" 并按 Enter
- 继续按
Enter 直到找到所需的 canvas（当前元素应突出显示）
这些控件是使用 HTML5 CANVAS 标记实现的。 Selenium 看不到 "inside" 这个标签，因为它不包含 HTML。它就像页面内的一个应用程序。从您链接的页面看来，您应该能够使用 JS 访问控件内的元素。当我过去用 CANVAS 标签做事时，我通常会找到 JS 或 returns 我想要的，然后将该代码包装在一个我可以调用的函数中。它会起作用，但您可能需要对 Zebkit 进行一些研究，以找出您需要验证哪些 JS，等等。您将要验证的所有不同的东西......最终可能不会能够验证一些事情。
Zebkit UI 组件在 HTML5 Canvas 上呈现。所以它们不是浏览器 DOM 树的一部分，这对于期望 DOM 作为输入的测试工具来说可能是个问题。但这并不意味着你不能通过 zebkit UI 的东西来执行测试用例。
首先请记住 zebkit 组件是 hierarchy/tree 就像 DOM 一样。 每个渲染在 canvas zebkit UI组件有相应的class的相关JS实例。您可以使用多种 API 方法遍历 UI 组件树。这些方法需要路径（类似 XPath），因为路径（从我的角度来看）比 CSS 选择器少 "encrypted" 方式。
您可能需要的 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) 为给定的给定事件（或所有事件）添加监听器方法用路径标识的一个或多个组件：
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");
作为自动化测试的一部分，我们想检查使用 Zebkit UI 框架构建的网站中的元素。
我们无法使用 zebra.ui
找到元素可以找到示例here
谁能帮我们检查元素
我不确定我是否正确理解了您的问题，但假设您无法在 canvas 上单击右键打开上下文菜单和 select "Inspect element" 选项。
你可以
- 在浏览器中按
F12 - 切换到"Elements"/"HTML"选项卡
- 在搜索字段 (
CTRL+F) 中打印"canvas"/"<canvas"并按Enter - 继续按
Enter直到找到所需的canvas（当前元素应突出显示）
这些控件是使用 HTML5 CANVAS 标记实现的。 Selenium 看不到 "inside" 这个标签，因为它不包含 HTML。它就像页面内的一个应用程序。从您链接的页面看来，您应该能够使用 JS 访问控件内的元素。当我过去用 CANVAS 标签做事时，我通常会找到 JS 或 returns 我想要的，然后将该代码包装在一个我可以调用的函数中。它会起作用，但您可能需要对 Zebkit 进行一些研究，以找出您需要验证哪些 JS，等等。您将要验证的所有不同的东西......最终可能不会能够验证一些事情。
Zebkit UI 组件在 HTML5 Canvas 上呈现。所以它们不是浏览器 DOM 树的一部分，这对于期望 DOM 作为输入的测试工具来说可能是个问题。但这并不意味着你不能通过 zebkit UI 的东西来执行测试用例。
首先请记住 zebkit 组件是 hierarchy/tree 就像 DOM 一样。 每个渲染在 canvas zebkit UI组件有相应的class的相关JS实例。您可以使用多种 API 方法遍历 UI 组件树。这些方法需要路径（类似 XPath），因为路径（从我的角度来看）比 CSS 选择器少 "encrypted" 方式。
您可能需要的 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) 为给定的给定事件（或所有事件）添加监听器方法用路径标识的一个或多个组件：
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");