大家好，最近在面试中又被问到盲点了，但是咱就是说，这就是咱进步的提示音。那么今天的问题是对于开发完成后会来到测试环节，那么除了咱们的手点测试以外，测试还会用到一些工具去测，那么有什么办法可以让这些工具去知道有这些dom呢。
我自己的回答
对于这个问题，因为我实习的时候做过一个插件，需要在插件里获取到页面的dom。所以我也是回答了利用dom上的id可以作为选中的方式和自己在实习中插件中的使用。但是既然写了这个博客，那说明感觉到对方有点不满意。
后来也是搜索了一下，还可以用event应该也可以去说一说，哎呀，咱就是说，没遇到过这种问题，没想起来。但是没关系，今天就来对这个问题总结一下，希望看到这个博客的小伙伴，以后可以有话可说，当然本篇主要是以我们熟悉的前端知识来获取，而非python等语言
原生方法
| 原生方法 | 在开发中常用到 |
|---|---|
getElementById | 通过元素的id属性来获取特定的 DOM 元素，，一种非常直接且高效的方式 |
getElementsByClassName | 通过元素的类名来获取一组 DOM 元素，如果页面中有多个具有相同类名的元素需要点击，可以使用这个方法获取元素列表，遍历列表并对每个元素进行点击操作 |
querySelector和querySelectorAll | 用 CSS 选择器来获取单个或多个 DOM 元素 |
event | 为一种获取需点击 DOM 元素的间接方式，通过监听特定事件，进而获取到与该事件相关的 DOM 元素 |
react / vue的测试库
| react | 使用库中提供的方法 |
|---|---|
getByText | 通过文本内容获取元素，getByText('文本内容')来精准定位这个按钮元素 |
getByRole | 通过元素的角色来获取元素，例如角色为 “button”，使用getByRole('button')来获取页面中的按钮元素 |
| vue | 使用库中提供的方法 |
|---|---|
wrapper.find | 通过 CSS 选择器来查找 Vue 组件中的单个 DOM 元素 |
wrapper.findAll | 查找 Vue 组件中多个具有相同特征的 DOM 元素时 |
自动化测试工具相关方法
| Selenium | 一款广泛使用的自动化测试工具 |
|---|---|
find_element_by_id | 元素的id属性来定位单个 DOM 元素，这种定位方式非常准确和高效 |
find_elements_by_class_name | 通过元素的类名来获取一组 DOM 元素，常用于有多个具有相同样式或功能的元素时 |
find_element_by_css_selector和find_elements_by_css_selector | 使用 CSS 选择器来定位单个或多个 DOM 元素，例如：find_element_by_css_selector('div.product - details a') |
find_element_by_xpath | 用于在 XML 文档中定位元素的语言，通过 XPath 表达式来定位元素。特别适用于处理页面结构复杂。find_element_by_xpath('//button[@type="submit"]')【案例为python语言】 |
总结
从上面的各测试工具获取 DOM 元素的方法，都支持通过元素的 id、class 以及 CSS 选择器来获取 DOM 元素。简单来说，id 定位因唯一性而精准高效。class 定位适用于批量处理具有相同样式或功能的元素。CSS 选择器适合组合定位应对复杂情况。
