UI自动化元素定位方式

UI自动化元素定位方式

注意：精准定位元素必须找到唯一值，例如id，或者多层class定位出的唯一元素值，否则极有可能定位不准，执行失败

网页按F12可调出网页代码，点击代码窗口按control+F使用代码查找框，可输入id，css，xpath定位元素

-------------------以下正式内容，例子+示例定位+格式--------------------

#定位元素——ID：

 - css定位：div#app
 即：标签#XX
 
 - xpath定位：//div[@id="app"]
即：//标签[@id="XX"]

#定位元素——class：

 - css定位：div.app-wrapper.openSidebar
即：标签.XXX.XXX（class包含多个字符串，空格用.替代）

 - xpath定位：//div[@class="XXX XXX"]
即：//标签[@class="XXX XXX"] （class包含多个字符串，直接复制即可，空格即空格）

#定位元素——text文本

xpath定位：//span[text()="搜索"]
即：//标签[text()="XX"]

#特殊标识定位——placeholder

其余特殊标识也一致
 - css定位：input[placeholder=请选择环境]
 即：标签[标识=XXX]（不需要加引号）
 
 - xpath定位：//input[@placeholder="请选择环境"]
即：//标签[@标识=“XXX”]

#多个标识定位一个元素：

 - css定位：input.el-input__inner[placeholder=请选择环境]
即：标签.XXX[标识=YYY]

 - xpath定位：//input[@class="el-input__inner" and @placeholder="请选择环境"]
即：//标签[@class="XXX" and @标识="YYY"]

 - xpath定位：//a[@class="label-button a-primary" and text()="详情"]
即：//标签[@标识="XXX" and text()="YYY"]

#相邻两层定位（即父子层）：

 - css定位：div.el-table__body-wrapper.is-scrolling-none>table.el-table__body
即：父层定位>子层定位（以尖括号“ > ”引出子元素）

 - xpath定位：//div[@class="el-table__body-wrapper is-scrolling-none"]/table[@class="el-table__body"]
即：//父层定位/子层定位（以单斜杠“ / ”引出子元素）

相对位置定位（定位父层下的第N个子层）：

 - xpath定位：tr[@class="el-table__row"]/td[position()=1]	（第一个子层）
		  或：tr[@class="el-table__row"]/td[2]	（第二个子层）

#隔层定位（祖孙层或者更多跨层）：

 - css定位：div.el-table__body-wrapper.is-scrolling-none tr.el-table__row
即：祖先层 子孙层（中间空格隔开即可）

 - xpath定位：//div[@class="el-table__body-wrapper is-scrolling-none"]//tr[@class="el-table__row"]
即：//祖先层//子孙层（双斜杠隔开即可）