【python+selenium的web自动化】- 元素的常用操作详解(二)

 🔥 交流讨论：欢迎加入我们一起学习！

🔥 资源分享：耗时200+小时精选的「软件测试」资料包

🔥 教程推荐：火遍全网的《软件测试》教程  

📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

鼠标操作

​ selenium的ActionChains类提供了一系列模拟鼠标操作的方法，主要操作流程：1、存储鼠标操作；2、调用perform()执行鼠标操作，支持的操作部分列举如下：

• 🍇 double_click(ele)：双击
• 🍑 context_click(ele)：右键
• 🍊 drag_and_drop(source, target)：从某个元素拖拽到某个元素然后松开
• 🍇 drag_and_drop_by_offset(source, xoffset, yoffset)：拖拽元素到某个坐标然后松开
• 🍓 move_to_element(ele)：鼠标悬停在某个元素

​ 下面以百度首页的搜索设置为例，鼠标悬停在【设置】，然后点击显示出来的【搜索设置】：

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#f92672">import</span> time
<span style="color:#f92672">from</span> selenium <span style="color:#f92672">import</span> webdriver
<span style="color:#f92672">from</span> selenium.webdriver.common.action_chains <span style="color:#f92672">import</span> ActionChains
<span style="color:#f92672">from</span> selenium.webdriver.support.wait <span style="color:#f92672">import</span> WebDriverWait
<span style="color:#f92672">from</span> selenium.webdriver.support <span style="color:#f92672">import</span> expected_conditions <span style="color:#f92672">as</span> EC
<span style="color:#f92672">from</span> selenium.webdriver.common.by <span style="color:#f92672">import</span> By

<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(<span style="color:#98c379">"http://www.baidu.com"</span>)

<span style="color:#b18eb1"><em># 第一步：实例化ActionChains</em></span>
ac = ActionChains(driver)
<span style="color:#b18eb1"><em># 第二步：定位要操作的元素</em></span>
ele = driver.find_element_by_xpath(<span style="color:#98c379">'//span[@id="s-usersetting-top"]'</span>)
<span style="color:#b18eb1"><em># 第三步：执行对应的操作</em></span>
ac.move_to_element(ele)		<span style="color:#b18eb1"><em># 悬浮操作</em></span>
<span style="color:#b18eb1"><em># 第四步，释放鼠标动作</em></span>
ac.perform()

<span style="color:#b18eb1"><em># 点击悬停出来的页面上的元素</em></span>
wait = WebDriverWait(driver, <span style="color:#d19a66">10</span>)
loc = (By.XPATH, <span style="color:#98c379">'//a[@class="setpref"]'</span>)
wait.until(EC.visibility_of_element_located(loc))
driver.find_element(*loc).click()

time.sleep(<span style="color:#d19a66">2</span>)
driver.quit()</span></span>

​ 这里科普一个知识点，就是链式调用：它可以在一个方法后面接着调用另外的方法，只要它的方法都是返回对象本身即可，如上述的actionchains 用法可以这样写: ActionChains(driver).move_to_element(ele).perform()。

​ 小知识：查看源码，按住键盘ctrl键，然后鼠标点击一下函数就会跳转到源码。

​ 用一个简单例子来演示一下ActionChains工作流程的原理：

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#61aeee"><span style="color:#f92672">def</span> <span style="color:#61aeee">move_to</span>():</span>
    <span style="color:#e6c07b">print</span>(<span style="color:#98c379">"正在移动"</span>)

<span style="color:#61aeee"><span style="color:#f92672">def</span> <span style="color:#61aeee">click</span>():</span>
    <span style="color:#e6c07b">print</span>(<span style="color:#98c379">'点击'</span>)

actions = []
actions.append(move_to)
actions.append(click)

<span style="color:#f92672">for</span> action <span style="color:#f92672">in</span> actions:	<span style="color:#b18eb1"><em># perform</em></span>
    <span style="color:#b18eb1"><em># action = move_to</em></span>
    action()</span></span>

键盘操作

​ selenium提供了比较完整的键盘操作，在使用键盘按键方法前需要先导入keys类：from selenium.webdriver.common.keys import Keys，它定义了非常多的按键操作，具体的可以问度娘。

​ 常见的一些组合键和非组合键如下：

• 🍊 send_keys(Keys.BACK_SPACE) 删除键
• 🍇 send_keys(Keys.SPACE) 空格键
• 🍋 send_keys(Keys.TAB) 制表tab键
• 🍉 send_keys(Keys.ESCAPE) 回退键
• 🍑 send_keys(Keys.ENTER) 回车键
• 🍓 send_keys(Keys.F5) 刷新键
• 🍅 send_keys(Keys.CONTROL,'a') 全选
• 🍏 send_keys(Keys.CONTROL,'c') 复制
• 🍆 send_keys(Keys.CONTROL,'x') 剪切
• 🍎 send_keys(Keys.CONTROL,'v') 粘贴

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#f92672">import</span> time
<span style="color:#f92672">from</span> selenium <span style="color:#f92672">import</span> webdriver
<span style="color:#f92672">from</span> selenium.webdriver.common.keys <span style="color:#f92672">import</span> Keys

<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(<span style="color:#98c379">"http://www.baidu.com"</span>)
driver.find_element_by_id(<span style="color:#98c379">'kw'</span>).send_keys(<span style="color:#98c379">"selenium"</span>)  <span style="color:#b18eb1"><em># 没有点击百度一下也没有回车不会出现搜索结果</em></span>
time.sleep(<span style="color:#d19a66">2</span>)
driver.find_element_by_id(<span style="color:#98c379">'kw'</span>).send_keys(Keys.CONTROL,<span style="color:#98c379">'a'</span>)	 <span style="color:#b18eb1"><em># 全选然后输入新内容python</em></span>
driver.find_element_by_id(<span style="color:#98c379">'kw'</span>).send_keys(<span style="color:#98c379">'python'</span>, Keys.ENTER)	  <span style="color:#b18eb1"><em># 用回车代替点击搜索按钮</em></span>
time.sleep(<span style="color:#d19a66">2</span>)
<span style="color:#b18eb1"><em># driver.find_element_by_id('kw').send_keys('python')  # 也可以单独先输内容</em></span>
<span style="color:#b18eb1"><em># driver.find_element_by_id('kw').send_keys(Keys.ENTER) # 再回车</em></span>
time.sleep(<span style="color:#d19a66">2</span>)
driver.quit()</span></span>

​ 之前在浏览器操作的那篇文章中，提到过除了点击浏览器窗口上方的“+”号可以打开新标签页，现在有了键盘操作，那是不是也可以通过快捷键来打开一个新标签页呢？一般是ctrl+t，赶紧去试一下看看效果吧！

下拉框操作

​ 对select/option类型的下拉列表的操作，我们可以通过点击select标签进行选择选项，另外selenium也提供了Select类来处理select/option去选择下拉列表值：

• 🍦 通过下标选择：select_by_index(index) index从0开始
• 🍦 通过value属性：select_by_value(value值)
• 🍦 通过文本内容：select_by_visible_text(文本内容)

​ 取消选中则是deselect_by...，下面以举例的html为例，需要先把该代码保存成html文件，后续直接访问这个本地html文件：

html

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#0000ff"><<span style="color:#e06c75">html</span>></span>
<span style="color:#0000ff"><<span style="color:#e06c75">head</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">meta</span> <span style="color:#d19a66">charset</span>=<span style="color:#98c379">"UTF-8"</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">title</span>></span>下拉框演示<span style="color:#0000ff"></<span style="color:#e06c75">title</span>></span>
<span style="color:#0000ff"></<span style="color:#e06c75">head</span>></span>
<span style="color:#0000ff"><<span style="color:#e06c75">body</span>></span>
<span style="color:#0000ff"><<span style="color:#e06c75">select</span> <span style="color:#d19a66">id</span>=<span style="color:#98c379">"province"</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"sj"</span>></span>深圳<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"gd"</span>></span>广东<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"sh"</span>></span>上海<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"bj"</span>></span>北京<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
<span style="color:#0000ff"></<span style="color:#e06c75">select</span>></span>
<span style="color:#0000ff"><<span style="color:#e06c75">select</span> <span style="color:#d19a66">id</span>=<span style="color:#98c379">"city"</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"sj"</span>></span>深圳<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"gz"</span>></span>广州<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"sh"</span>></span>上海<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
    <span style="color:#0000ff"><<span style="color:#e06c75">option</span> <span style="color:#d19a66">value</span>=<span style="color:#98c379">"bj"</span>></span>北京<span style="color:#0000ff"></<span style="color:#e06c75">option</span>></span>
<span style="color:#0000ff"></<span style="color:#e06c75">select</span>></span>
<span style="color:#0000ff"></<span style="color:#e06c75">body</span>></span>
<span style="color:#0000ff"></<span style="color:#e06c75">html</span>></span></span></span>

​ 演示代码如下：

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#f92672">import</span> time
<span style="color:#f92672">from</span> selenium <span style="color:#f92672">import</span> webdriver
<span style="color:#f92672">from</span> selenium.webdriver.support.wait <span style="color:#f92672">import</span> WebDriverWait
<span style="color:#f92672">from</span> selenium.webdriver.support.ui <span style="color:#f92672">import</span> Select

<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(<span style="color:#98c379">r"D:\learn\test.html"</span>)

wait = WebDriverWait(driver, <span style="color:#d19a66">10</span>)

<span style="color:#b18eb1"><em># 找到select元素</em></span>
ele = driver.find_element_by_id(<span style="color:#98c379">'province'</span>)
<span style="color:#b18eb1"><em># 实例化Select类</em></span>
s = Select(ele)
time.sleep(<span style="color:#d19a66">1</span>)
s.select_by_value(<span style="color:#98c379">'gd'</span>)   <span style="color:#b18eb1"><em># 通过value属性选值</em></span>
time.sleep(<span style="color:#d19a66">2</span>)
s.select_by_index(<span style="color:#d19a66">2</span>)   <span style="color:#b18eb1"><em># 通过下标index选值</em></span>
time.sleep(<span style="color:#d19a66">2</span>)
s.select_by_visible_text(<span style="color:#98c379">'北京'</span>)   <span style="color:#b18eb1"><em># 通过文本内容选值</em></span>

time.sleep(<span style="color:#d19a66">2</span>)
driver.quit()</span></span>

Js处理日历控件

​ 在web自动化的过程中，我们常常会遇到有日历控件选择日期的场景，大致分为以下两种：

​ 📆 1、可以直接输入日期（可以通过定位元素然后send_keys输入日期）

​ 📅 2、不能直接输入日期，只能选择（带有：readonly(只读)属性）

​ 对于不能直接输入日期的控件，只能通过选择实在太麻烦了。因为不能输入，就会考虑去点击其中的年份、月份、太难的数字。由于日历控件面板很小，单个元素也很小，有可能会产生操作失误的问题，并且代码写起来实在太繁琐了。

​ 那既然selenium支持执行js语句，那我们是不是可以利用js来去掉readonly（即只读）属性，然后直接通过send_keys输入时间呢，试一下吧！

​ 以12306网站买票的出发日期为例，如下图它是有只读属性的，直接代码输入是无法输入的：

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#f92672">import</span> time
<span style="color:#f92672">import</span> datetime
<span style="color:#f92672">from</span> selenium <span style="color:#f92672">import</span> webdriver
<span style="color:#f92672">from</span> selenium.webdriver.support <span style="color:#f92672">import</span> expected_conditions <span style="color:#f92672">as</span> EC
<span style="color:#f92672">from</span> selenium.webdriver.support.wait <span style="color:#f92672">import</span> WebDriverWait
<span style="color:#f92672">from</span> selenium.webdriver.common.by <span style="color:#f92672">import</span> By
<span style="color:#f92672">from</span> selenium.webdriver.common.keys <span style="color:#f92672">import</span> Keys

<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
<span style="color:#b18eb1"><em># driver.maximize_window()</em></span>
driver.get(<span style="color:#98c379">"https://www.12306.cn/"</span>)

wait = WebDriverWait(driver, <span style="color:#d19a66">30</span>)
loc = (By.XPATH, <span style="color:#98c379">'//input[@id="train_date"]'</span>)
wait.until(EC.visibility_of_element_located(loc))

js = <span style="color:#98c379">'document.getElementById("train_date").readOnly=false;'</span>  <span style="color:#b18eb1"><em># 禁用只读</em></span>
driver.execute_script(js)
time.sleep(<span style="color:#d19a66">2</span>)

<span style="color:#b18eb1"><em># 清空日历，重新输入日期</em></span>
driver.find_element(*loc).clear()
today = datetime.date.today()
tomorrow = today + datetime.timedelta(days=<span style="color:#d19a66">1</span>)
driver.find_element_by_id(<span style="color:#98c379">'train_date'</span>).send_keys(<span style="color:#e6c07b">str</span>(tomorrow))

time.sleep(<span style="color:#d19a66">2</span>)
driver.quit()</span></span>

​ 举一反三，在碰到selenium处理不了的情况时，我们就可以考虑使用js或者其他方法去实现噢~~

最后我邀请你进入我们的【软件测试学习交流群：785128166】， 大家可以一起探讨交流软件测试，共同学习软件测试技术、面试等软件测试方方面面，还会有免费直播课，收获更多测试技巧，我们一起进阶Python自动化测试/测试开发，走向高薪之路

作为一个软件测试的过来人，我想尽自己最大的努力，帮助每一个伙伴都能顺利找到工作。所以我整理了下面这份资源，现在免费分享给大家，有需要的小伙伴可以关注【公众号：程序员二黑】自提！