如何检查剑道多选？答案

【问题标题】：How to inspect a Kendo multiselect?如何检查剑道多选？
【发布时间】：2020-05-08 04:16:53
【问题描述】：

我正在为具有 kendo 多选下拉清单的页面开发自动化功能。

通常我依靠 Chrome 检查器开发工具来确定我正在访问的元素的 Xpath。

但是，当我尝试检查 Kendo 多选时，我遇到了 catch-22（或者更准确地说，是不确定性原则）。我遵循的程序是……

前提条件： 1a) 浏览器打开到包含 Kendo 多选的页面 1b) Chrome 检查器处于活动状态
单击 Kendo Multiselect 的搜索栏。这会导致可能的多选项目（每个项目都有自己的复选框）的下拉式列表的扩展。它是一种嵌入下拉列表中的混合复选框列表。对最终用户来说非常方便。
现在列表已展开，我想探索，比如说，位于列表第三个元素处或周围的 DOM。我的最终目标是确定多选列表的第三个元素的 Xpath。没问题...我已经扩展了列表，我需要做的就是单击 Chrome 检查器窗口中的元素选择器图标，然后指向浏览器窗口中的第三个元素。

但没那么快......

问题出在这里...只要我单击 Chrome 检查器窗口中的元素选择器图标，多选列表就会折叠（！），当然，有了它，DOM 也会相应地更新，并且我拥有的元素由于多选列表的更新状态，希望检查甚至不在 DOM 中。

4a。作为一种潜在的解决方法，我尝试了等效于单击 Chrome 检查器的元素选择器图标 (Ctrl-Shift-C) 的热键。这只是部分起作用：虽然多选列表没有折叠，但我无法找出结果匹配在 DOM 中的 where - 因为只要我向上/向下滚动或执行任何操作其他鼠标或键盘活动，多选列表崩溃。

WTF？

我想我正在寻找某种方法来将 Chrome 检查器窗口中的鼠标点击与被检查者窗口隔离开来。我过去没有遇到过这个要求，所以我不知道如何进行。

我找到了一些关于远程检查的参考，我想知道这是否是我的解决方案。但我完全不清楚它是否能解决我的问题。我没有把那只兔子追到一个可能永无止境的兔子洞里，而是选择在这里发布这个问题，希望得到一些与我的难题相关的明智建议。

【问题讨论】：

【解决方案1】：

在“源”选项卡上打开“开发工具”后，打开“多选”框并按 F8。这会暂停一切，一切都会变灰。

现在您可以切换到开发工具中的“元素”选项卡并做任何您想做的事情，页面上的任何内容都不会改变。

完成后，再次按 F8 或单击开发工具中“源”选项卡上的“播放”按钮。

【讨论】：

【解决方案2】：

右键单击该项目并选择“检查”可能会更幸运。虽然多选可能会崩溃，但您仍然应该能够在 DOM 中捕获元素。（我假设 Kendo 用于 jQuery？）

如果您的页面上只有一个 MultiSelect，这将为您提供：

$(".k-animation-container .k-list-container.k-popup li:nth-child(3)");

如果您可以编辑代码，暂时将autoClose 设置为 false 可能会对您有所帮助。您还可以绑定到各种events Kendo 暴露并在其中放置一些调试代码。

最后一个技巧是在 DOM 检查器中捕获一个节点，在本例中 div.k-animation-container 应该是 body 的直接子级，然后右键单击 > 中断 > 属性修改。这可能会过于频繁地暂停您的代码，但它是一个很好的工具，可以随身携带，以备不时之需。

【讨论】：

【解决方案3】：

这些建议并没有解决我的问题，每次我尝试检查多选时，它都会继续崩溃。例如，仅按 F8 就会导致多选崩溃。

但是，我确实找到了一个简单的解决方案。我一直在使用一个停靠在浏览器窗口的检查器窗口。这似乎导致被检查者浏览器窗口和检查器窗口共享键盘和鼠标活动。

但是，当我取消停靠检查器时，我可以单击例如 select-an-element-in-the-page-to-inspect-it 图标，而不会导致被检查页面中的任何活动 - 包括多选。现在我可以将鼠标悬停在每个多选项目上并单独检查它们。

【讨论】：

【解决方案4】：

在子树更改或元素属性更改时使用 Chrome 开发者工具中断。以下博客文章详细描述了该过程：

【讨论】：