【发布时间】：2022-10-18 04:40:52
【问题描述】：
我正在为qbo3 用户界面编写 UI 测试脚本。我注意到许多 HTML div 标签不包含 id 属性。可以将id 属性添加到所有div 标记以简化测试吗？
【问题讨论】：
标签： javascript css-selectors qbo3
【发布时间】：2022-10-18 04:40:52
【问题描述】：
qbo3 UI 标准明确避免使用 ids 标记，因为经常在单个 HTML 页面中多次使用相同的 UI 小部件。曾几何时，我们确实包含了id 标签，但我们发现依赖它们会导致我们的 JavaScript 库变得脆弱。
例如，考虑下面的Loan/Search 面板：
在上面的屏幕截图中，基本的Loan/Search UI 允许弹出任何Loan 记录。在这个例子中，Loan/Summary UI 小部件被渲染了两次（贷款000001194 和000001402）。如果有一个通用的id 属性与Loan/Summary 小部件相关联，那么它不会有用，因为可以有多个。
相反，应该使用以下方式设计测试：
| Function | Comment |
|---|---|
document.querySelector("div.tab-pane") |
Gets the first match. |
document.querySelector("div.tab-pane")[1] |
Gets the second match. |
对于可能有多个搜索和弹出选项卡的复杂登录页面，您可以使用下一个选择器：
// Find the second dashboard tab, and it's first child pane
document.querySelectorAll("div.dashboard")[1].querySelector("div.tab-pane")
【讨论】：