Web 自动化实战经验硬核总结

旧城等待， 2023-09-24 18:44 15阅读 0赞

## 一、元素定位常用方法 ##

1. xpath规则说明

"/" : 表示从根节点选取

"//" : 从匹配选择的当前节点选择

"@" : 选取属性

"\*" : 匹配任何元素节点

"@\*" : 匹配任何属性节点

1.1 属性使用说明

@placeholder

用法："//input\[@placeholder='请输入应用名称'\]"

@class

用法："//button\[@class='ant-btn ng-star-inserted'\]"

@id

用法："//textarea\[@id='description'\]"

@title

用法："//li\[@title='目录'\]"

@type

用法："//input\[@type='text'\]"

@name

用法："//input\[@name='wd'\]"

@value

按钮的文字是 submit；

用法：//button\[@value='submit'\]

PS: 注意是单引号！

1.2 函数使用说明

**text()函数**

"//ul//li\[text()='2003年度'\]" '//a\[contains(text(),"出")\]'

含义：文本部分匹配

**last()函数**

//input\[last()\]

含义：定位最后一个

input标签 //input\[last()-1\]

含义：倒数第二个input标签

**not()函数**

//input\[not(@id)\]

含义：input标签中不包含id属性值

**start-with()函数**

"//input\[start-with(@id,'开头')\]"

**ends-with()函数**

"//input\[ends-with(@id,'结尾')\]"

**contains()函数**

"//input\[contains(@id,'包含')\]"

**postion()函数**

这里 position() 代表元素的位置，这种写法也是 xpath 中的一部分

//div\[@id='food'\]/\*\[position()=2\]

**高级用法：**

含义：表示最后1个元素

//div\[@id='food'\]/\*\[position()=last()\]

含义：表示倒数第3个元素

//div\[@id='food'\]/\*\[position()=last()-2\]

含义：表示最后3个元素

//div\[@id='food'\]/\*\[position()>=last()-2\]

**position()索引函数使用：**

可以这样写(以下是循环处理方式)：

for i in range(1,13):
          pos="//div[@class='month-container']/div[position()="+str(i)+"]//button"

2. CSS选择器（css selector）

作用：用于定位页面上的标签元素，找到符合选择器的标签元素，然后应用样式。

**css定位语法**

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>表达示例</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id选择器（id用 #表示）</td> 
   <td>#abc</td> 
   <td>匹配id为abc的标签</td> 
  </tr> 
  <tr> 
   <td>class选择器（class用 .表示）</td> 
   <td>.abc</td> 
   <td>匹配class为abc的标签</td> 
  </tr> 
  <tr> 
   <td>标签选择器 p</td> 
   <td></td> 
   <td>匹配p标签</td> 
  </tr> 
  <tr> 
   <td>分组选择器 a,span</td> 
   <td></td> 
   <td>匹配a标签和span标签</td> 
  </tr> 
  <tr> 
   <td>属性选择器—指定值 [class=“li”]</td> 
   <td></td> 
   <td>匹配class为li的标签</td> 
  </tr> 
 </tbody> 
</table>

**实例**

<table> 
 <thead> 
  <tr> 
   <th>html</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[value="登录"]</td> 
   <td>选择标签上有value="登录"属性的标签</td> 
  </tr> 
  <tr> 
   <td>[type="submit"]</td> 
   <td>选择标签上有type="submit"属性的标签</td> 
  </tr> 
  <tr> 
   <td>属性选择器—不指定值 [title]</td> 
   <td>匹配属性有title的标签</td> 
  </tr> 
  <tr> 
   <td>属性选择器—指定标签 a[title]</td> 
   <td>匹配属性有title的a标签</td> 
  </tr> 
  <tr> 
   <td>属性选择器—匹配单词边界 a[title~=“hello”]</td> 
   <td>匹配title包含hello的a标签</td> 
  </tr> 
 </tbody> 
</table>

**后代选择器(空格表示)，可选取当前层级下的任意层级元素**

**例如**：\#ab p

**含义**：匹配id为ab的下一/多级p标签

**实例**：

"f-workingset-selector > div:nth-child(2) p-treenode:nth-child(2) div[title='我的文件']"

nth-child(2)表示取div的第二个

**子元素选择器(>)，表示只能选择下一级的元素**

**例如**：\#ab>p

**含义**：匹配id为ab的下一级中的p标签

**实例**（f-data-copy-detail标签下一级连续查找）：

"f-data-copy-detail > div > div.right-content > div > app-fone-splitter > app-fone-splitter-panel:nth-child(2) > div > div.from-tree > p-tree > div"

**相邻兄弟选择器(+)，表示只能选择同级的下一个元素**

**例如**：\#ab+.ab

**含义**：匹配id为ab的同级下一元素且该元素的class为ab才能匹配到

**后续兄弟选择器(~表示)，选取指定元素后的所有同级指定元素**

**例如**：.ab~li

**含义**：匹配class为ab的标签后的所有同级li标签

**css 伪类用法**

<table> 
 <thead> 
  <tr> 
   <th>表达式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nth-child(n)</td> 
   <td>匹配第 n 个子元素</td> 
  </tr> 
  <tr> 
   <td>nth-last-child(n)</td> 
   <td>匹配倒数第n个子元素</td> 
  </tr> 
  <tr> 
   <td>nth-of-type(n)</td> 
   <td>匹配第 n 个指定类型的标签</td> 
  </tr> 
  <tr> 
   <td>first-child</td> 
   <td>匹配第一个标签</td> 
  </tr> 
  <tr> 
   <td>last-child</td> 
   <td>匹配最后一个标签</td> 
  </tr> 
 </tbody> 
</table>

3. xpath 与 css 的对比

![6fc59f4e6a9fe9ab37dec158f048a9f2.png][]

4. xpath 与 css 更详细示例对比

直接子元素

XPATH 中的直接子元素是使用“/”定义的，而在 CSS 上，它是使用“>”定义的

XPATH：//div/input
    CSS: div>input

后代元素

如果一个元素在另一个元素的内部（子元素或者孙元素），则它在 XPATH 中使用“//”定义，而在 CSS 中仅使用空格定义。

XPATH：//div//input
    CSS: div input

ID定位

XPATH 中的元素 id 使用以下内容定义："\[@id=‘kw’\]"，而在CSS中使用："\#kw"。

XPATH：//input[@id='kw']
    CSS: input#kw

CLASS定位

对于 class 属性，XPATH 类似 id，而 CSS 中用一个点表示。

XPATH：//input[@class="s_ipt"]
    CSS: input.s_ipt

弟弟元素：after-sibling 继兄弟

这对于表单元素非常有用，即页面中位于同一父节点内的下一个相邻元素

XPATH：//input[@class="s_ipt"]/after-sibling::a
    CSS：input[class="s_ipt"]+a

哥哥元素：berfore-sibling 前兄弟

页面中位于同一父节点内的上一个相邻元素

XPATH：//a[@name='tj_baike']/berfore-sibling::a
    CSS：无法实现

父节点元素

页面中位于一个节点的上级元素

XPATH: //input/parent
    CSS: 无法实现

属性值

可以根据任何属性值定位元素

XPATH: //input[@name='username']
    CSS: input[name='username']

多个属性值

可以通过多个属性来定位元素

XPATH: //input[@name='rsv_spt' and @value="1"]
    CSS: input[name='login'][type='submit']

第一个子元素

XPATH: //div[@id='u1']/a[1]
    CSS: div#u1 a:first-child

最后一个子元素

XPATH: //div[@id='u1']/a[last()]
    CSS: div#u1 a:last-child

第二个子元素

XPATH: //div[@id='u1']/a[2]
    CSS: div #u1 a:nth-child(2)

模糊匹配

selenium中允许使用 ^=，$= 或\*=进行部分字符串匹配。^=匹配前缀

XPATH: input[starts-with(@id,'user')]
    CSS: input[id^='user']

$=匹配后缀

XPATH: input[ends-with(@id,'name')]
    CSS: input[id$='name']

\*=匹配包含

XPATH: input[contains(@id,'sernam')]
    CSS: input[id*=sernam]

## 二、selenium 常用事件说明 ##

2.1 鼠标事件

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click(on_element=None)</td> 
   <td>单击鼠标左键</td> 
  </tr> 
  <tr> 
   <td>click_and_hold(on_element=None)</td> 
   <td>点击鼠标左键，不松开</td> 
  </tr> 
  <tr> 
   <td>context_click(on_element=None)</td> 
   <td>点击鼠标右键</td> 
  </tr> 
  <tr> 
   <td>double_click(on_element=None)</td> 
   <td>双击鼠标左键</td> 
  </tr> 
  <tr> 
   <td>drag_and_drop(source, target)</td> 
   <td>拖拽到某个元素然后松开</td> 
  </tr> 
  <tr> 
   <td>drag_and_drop_by_offset(source, xoffset, yoffset)</td> 
   <td>拖拽到某个坐标然后松开</td> 
  </tr> 
  <tr> 
   <td>key_down(value, element=None)</td> 
   <td>按下某个键盘上的键</td> 
  </tr> 
  <tr> 
   <td>key_up(value, element=None)</td> 
   <td>松开某个键</td> 
  </tr> 
  <tr> 
   <td>move_by_offset(xoffset, yoffset)</td> 
   <td>鼠标从当前位置移动到某个坐标</td> 
  </tr> 
  <tr> 
   <td>move_to_element(to_element)</td> 
   <td>鼠标移动到某个元素</td> 
  </tr> 
  <tr> 
   <td>move_to_element_with_offset(to_element, xoffset, yoffset)</td> 
   <td>移动到距某个元素（左上角坐标）多少距离的位置</td> 
  </tr> 
  <tr> 
   <td>perform()</td> 
   <td>执行链中的所有动作</td> 
  </tr> 
  <tr> 
   <td>release(on_element=None)</td> 
   <td>在某个元素位置松开鼠标左键</td> 
  </tr> 
  <tr> 
   <td>send_keys(*keys_to_send)</td> 
   <td>发送某个键到当前焦点的元素</td> 
  </tr> 
  <tr> 
   <td>send_keys_to_element(element, *keys_to_send)</td> 
   <td>发送某个键到指定元素</td> 
  </tr> 
 </tbody> 
</table>

2.2 键盘事件

selenium 常用键盘事件说明：

#导入包
    from selenium.webdriver.common.keys import Keys

**键盘操作**

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>send_keys(Keys.BACK_SPACE)</td> 
   <td>删除键（BackSpace）</td> 
  </tr> 
  <tr> 
   <td>send_keys(Keys.SPACE)</td> 
   <td>空格键(Space)</td> 
  </tr> 
  <tr> 
   <td>send_keys(Keys.TAB)</td> 
   <td>制表键(Tab)</td> 
  </tr> 
  <tr> 
   <td>send_keys(Keys.ESCAPE)</td> 
   <td>回退键（Esc）</td> 
  </tr> 
  <tr> 
   <td>send_keys(Keys.ENTER)</td> 
   <td>回车键（Enter）</td> 
  </tr> 
  <tr> 
   <td>send_keys(Keys.CONTROL,‘a’)</td> 
   <td>全选（Ctrl+A）</td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

driver.find_element("id", "kw").send_keys(Keys.CONTROL, 'a')
    send_keys(Keys.CONTROL,‘c’) #复制（Ctrl+C）
    send_keys(Keys.CONTROL,‘x’) #剪切（Ctrl+X）
    send_keys(Keys.CONTROL,‘v’) #粘贴（Ctrl+V）

2.3 ActionChains模拟鼠标操作事件

#导入包 
    from selenium.webdriver.common.action_chains import ActionChains
    
    #全选（Ctrl+A）
    send_keys(Keys.CONTROL,‘a’)

链式执行示例代码：

ActionChains(driver).key_down(Keys.CONTROL).send_keys('a').key_up(Keys.CONTROL).perform()
    
    #复制（Ctrl+C）
    send_keys(Keys.CONTROL,‘c’)

链式执行示例代码：(指定了复制的区域)

ActionChains(self.driver).key_down(Keys.SHIFT).click(ele_end).key_up(Keys.SHIFT).key_down(Keys.CONTROL).send_keys("c").key_up(Keys.CONTROL).perform()
    
    #剪切（Ctrl+X）
    send_keys(Keys.CONTROL,‘x’)

链式执行示例代码：

ActionChains(self.driver).click(ele).key_down(Keys.CONTROL).send_keys("x").key_up(Keys.CONTROL).perform()
    
    #粘贴（Ctrl+V）
    send_keys(Keys.CONTROL,‘v’)

链式执行示例代码：

ActionChains(self.driver).click(ele).key_down(Keys.CONTROL).send_keys("v").key_up(Keys.CONTROL).perform()

**最后：** 下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][ed4627a964d644e285a28f9b5dd81dae.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

![910c5562579547c58dde1afc6d941f5d.gif][]

[6fc59f4e6a9fe9ab37dec158f048a9f2.png]: https://img-blog.csdnimg.cn/img_convert/6fc59f4e6a9fe9ab37dec158f048a9f2.png
[ed4627a964d644e285a28f9b5dd81dae.png_pic_center]: https://img-blog.csdnimg.cn/ed4627a964d644e285a28f9b5dd81dae.png#pic_center
[910c5562579547c58dde1afc6d941f5d.gif]: https://img-blog.csdnimg.cn/910c5562579547c58dde1afc6d941f5d.gif