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

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

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

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

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

元素基本操作

常用操作

关键代码🔻：

点击：ele.click()
输入内容：ele.send_keys("内容")
清空内容：ele.clear()
获取文本内容：ele.text
获取属性值：ele.get_attribute("属性名称")
获取元素的宽高：ele.size，size和location一样都是实例属性，返回都是字典格式
获取元素的坐标：ele.location，元素坐标值是通过元素的最左上角相对浏览器内容区域的左上角来定位的

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#b18eb1"><em># 定位元素</em></span>
input_ele = driver.find_element_by_id(<span style="color:#98c379">"kw"</span>)
su_ele = driver.find_element_by_id(<span style="color:#98c379">"su"</span>)

<span style="color:#b18eb1"><em># 获取元素的文本内容</em></span>
input_ele.text

<span style="color:#b18eb1"><em># 获取元素的某个属性</em></span>
input_ele.get_attribute(<span style="color:#98c379">"属性名称"</span>)

<span style="color:#b18eb1"><em># 输入内容</em></span>
input_ele.send_keys(<span style="color:#98c379">"selenium"</span>)

<span style="color:#b18eb1"><em># 点击操作</em></span>
su_ele.click()

<span style="color:#b18eb1"><em># 清空内容</em></span>
input_ele.clear()

<span style="color:#b18eb1"><em># 获取元素的宽高</em></span>
<span style="color:#e6c07b">print</span>(<span style="color:#98c379">"【百度一下】按钮的宽高：{}"</span>.<span style="color:#e6c07b">format</span>(su_ele.size))
      
<span style="color:#b18eb1"><em># 获取元素的x、y坐标值</em></span>
<span style="color:#e6c07b">print</span>(<span style="color:#98c379">"【百度一下】按钮的坐标：{}"</span>.<span style="color:#e6c07b">format</span>(su_ele.location))</span></span>

表单提交

关键代码🔻：

表单提交：ele.submit()，用于表单的提交；也可以定位到具体提交按钮做一个点击的动作

python

<span style="background-color:#282c34"><span style="color:#abb2bf">input_ele = driver.find_element_by_id(<span style="color:#98c379">"kw"</span>)
input_ele.submit()	<span style="color:#b18eb1"><em># 也可以实现回车</em></span></span></span>

检查元素

关键代码🔻：

是否可见：ele.is_displayed()，返回True可见，反之不可见
是否可点击：ele.is_enabled()，返回True可点击，反之不可点击
是否被选中：ele.is_selected()，返回True被选中，反之未选中

python

<span style="background-color:#282c34"><span style="color:#abb2bf">ele = driver.find_element_by_id(<span style="color:#98c379">"xxxx"</span>)
<span style="color:#e6c07b">print</span>(ele.is_displayed())
<span style="color:#e6c07b">print</span>(ele.is_enabled())
<span style="color:#e6c07b">print</span>(ele.is_selected())</span></span>

等待操作

在web自动化中，不得不提的元素等待操作，我们在做功能测试中也会经常遇到页面元素未完全加载的情况，需要等到元素出现后再进行操作。现在是代码代替人工去做这件事，那自然也需要先等到元素加载完成才进行操作。

当我们打开浏览器，进入一个网页driver.get(网址)，除了get()会自主强制等待网页加载完再进入下一个操作，其他元素操作都不会自己等待页面加载完成，因此在get()之后只要我们做的动作会让页面产生变化就要做一个等待动作，以防元素未加载完成导致元素找不到报错，因为代码运行的速度是非常快的。

有三种等待方式，一种强制等待，两种智能等待：隐性和显性。

强制等待

time.sleep(秒):表示让程序强制死等x秒，无论发生什么，都会在x秒之后再执行后续的代码

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#f92672">import</span> time
time.sleep(<span style="color:#d19a66">2</span>)	<span style="color:#b18eb1"><em># 强制等待10s</em></span></span></span>

隐性等待

implicitly_wait(秒):设置最长等待时间，在这个时间内只要有个时间点加载完成，则执行下一步代码，如果在这个时间内仍未完成，就会抛出一个异常，在这整个driver的会话周期内，设置一次即可，全局都可用。

缺点🔶：程序会一直等待整个页面加载完成，也就是一般情况下你看到浏览器标签栏那个小圈不再转,才会执行下一步，但有时候页面想要的元素早就加载完成了，但是因为个别js、图片之类的东西特别慢，仍得等到页面全部完成才能执行下一步，就会增加不必要的加载时间。

python

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

<span style="color:#b18eb1"><em># 实例化chrome类</em></span>
<span style="color:#b18eb1"><em># 启动了Chromedriver，并与Chromedriver开启了会话</em></span>
driver = webdriver.Chrome()
driver.implicitly_wait(<span style="color:#d19a66">10</span>)

driver.get(<span style="color:#98c379">"https://www.baidu.com"</span>)</span></span>

显性等待

关键代码：WebDriverWait(driver, 等待时长, 轮循周期).until/until_not(判断条件)。

使用WebDriverWait类和expected_conditions模块，它会明确等到某个条件满足后，再去执行下一步操作。它的等待机制是程序会每隔xx秒去寻找一遍，如果条件成立则执行下一步，否则以轮循的方式继续去寻找，直到超过设置的最长时间，然后抛出一个TimeoutException异常。

WebDriverWait类：显性等待类

expected_conditions模块，提供了一系列期望发生的条件，如下：

🍊 title_is(title)：判断当前页面的title是否等于预期，
🍊 title_contains(title)：判断当前页面的title是否包含预期字符串
🍊 presence_of_element_located(locator)：判断某个元素是否存在dom树
🍊 visiblilty_of_element_located(locator)：判断某个元素是否可见
🍊 visiblilty_of(element)：跟上面的方法一样，判断某个元素是否可见，只是前者要传locator(定位器)，后者直接传定位到的element就好了
🍊 element_to_be_clickable(locator)：判断某个元素是否可点击
🍊 frame_to_be_available_and_switch_to_it(frame下标/name属性/webelement对象)：判断该frame是否可以swtich进去，可以则返回True并swtich进去，否则返回False。
🍊 alert_is_present()：判断页面上是否存在alert

以上是列举的部分条件类，还有更多的方法有兴趣可以自行扩展。下面是其中一个方法示例：

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 <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># By模块封装了8大定位方法名</em></span>

driver = webdriver.Chrome()
<span style="color:#b18eb1"><em># driver.implicitly_wait(10)   # 智能等待10秒</em></span>

driver.get(<span style="color:#98c379">"http://www.baidu.com"</span>)
driver.find_element_by_xpath(<span style="color:#98c379">'//div[@id="u1"]//a[@name="tj_login"]'</span>).click()

<span style="color:#b18eb1"><em># 定位表达式</em></span>
loc = (By.ID, <span style="color:#98c379">"TANGRAM__PSP_10__footerULoginBtn"</span>)	<span style="color:#b18eb1"><em># 实际是11，这里改成10找不到会弹出报错</em></span>
<span style="color:#b18eb1"><em># 等待元素可见：等待时间10秒，轮循周期默认0.5秒一次</em></span>
WebDriverWait(driver, <span style="color:#d19a66">10</span>).until(EC.visibility_of_element_located(loc))

<span style="color:#b18eb1"><em># 操作满足条件之后的元素</em></span>
driver.find_element(*loc).click()

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

运行结果：

shell

<span style="background-color:#282c34"><span style="color:#abb2bf">C:\software\python\python.exe D:/learn/test.py
Traceback (most recent call last):
  File "D:/learn/test.py", line 25, in <module>
    WebDriverWait(driver, 10).until(EC.visibility_of_element_located(loc))
  File "C:\software\python\lib\site-packages\selenium\webdriver\support\wait.py", line 80, in until
    raise TimeoutException(message, screen, stacktrace)
selenium.common.exceptions.TimeoutException: Message: 


Process finished with exit code 1</span></span>

知识点🔻：

上面提到的定位器其实就是一个元组(定位方式, 定位表达式)，By模块里封装了8大定位方法名，跟我们之前的定位方式是一样的。

不过要注意的是，在使用find_element() 定位元素时，不是传入一个元组，定位方式和表达式是直接作为参数传入的，因此上面的例子中会用到*解包。而find_element_by_id(属性值)之类的定位，底层代码用的其实就是find_element()，后者只要传对应定位方式的值，前者则需要传定位方式、定位表达式。

iframe切换

iframe：iframe就是一个网页里面嵌套了另外一个框架/页面，即一个html页面中，还内嵌了另一个html页面，这个内嵌的html页面放在<iframe></iframe>标签对中。iframe也是html中的某一个元素，里面放的是html页面。

切换到iframe

如果我们要操作的元素，在内嵌的iframe页面中，那么必须要从当前页面切换到iframe中，然后再去iframe中的页面去操作元素。切换到iframe，主要有以下两种方式：

🍅 方式一：swtich_to.iframe()

参数：iframe的index（下标）/ iframe的name属性 / iframe的webelement对象

python

<span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#b18eb1"><em># 切换到iframe   下标/name属性/webelement对象</em></span>
driver.switch_to.iframe(<span style="color:#98c379">"login_frame_qq"</span>)
driver.switch_to.iframe(<span style="color:#d19a66">0</span>)
driver.switch_to.iframe(dirver.find_element_by_tag_name(<span style="color:#98c379">'iframe'</span>))</span></span>

🍅 方式二：EC.frame_to_be_available_and_switch_to_it()（强烈推荐，等待和切换一次到位）

参数：iframe的index（下标）/ iframe的name属性 / iframe的webelement对象，等待条件：此方法会判断iframe是否可用，并且会自动切换到iframe中

python

<span style="background-color:#282c34"><span style="color:#abb2bf">wait = WebDriverWait(driver, <span style="color:#d19a66">10</span>)  <span style="color:#b18eb1"><em># 设置显性等待时间</em></span>
<span style="color:#b18eb1"><em># 设置等待条件，此方法会判断iframe是否可用，并且会自动切换到iframe中</em></span>
wait.until(EC.frame_to_be_available_and_switch_to_it(<span style="color:#98c379">'login_frame_qq'</span>))
driver.find_element_by_id(<span style="color:#98c379">'switcher_plogin'</span>).click()</span></span>

切换到上层iframe

关键代码：driver.iframe_to.parent_frame()

如果iframe中又内嵌了一个iframe，那就只能在主html中一层一层地切进去。如果想返回上一层时也是一层一层地返回去。一般很少会返回去。

切换到主html

关键代码：driver.swtich_to.default_content()

切换到iframe之后，本身在主html就变成了在切换后的内嵌html，这时可以操作内嵌html的元素了，如果想重新操作主html的元素，就要先从iframe中回到主html。

这里要注意，不管你是在第几层的iframe中，想切回到主html中，都只需执行一次。例子：

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 <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># 主html、内嵌html</em></span>
<span style="color:#b18eb1"><em># 确定要操作的元素是否在iframe内？</em></span>
<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(<span style="color:#98c379">"http://xxxx.com/"</span>)
driver.find_element_by_id(<span style="color:#98c379">'js_login'</span>).click()

wait = WebDriverWait(driver, <span style="color:#d19a66">10</span>)  <span style="color:#b18eb1"><em># 设置显性等待时间</em></span>
qq_l = (By.XPATH, <span style="color:#98c379">'//div[@class="content-btns"]//a'</span>)
wait.until(EC.visibility_of_element_located(qq_l))  <span style="color:#b18eb1"><em># 设置显性等待条件</em></span>
driver.find_element(*qq_l).click()

<span style="color:#b18eb1"><em># 设置等待条件，此方法会判断iframe是否可用，并且会自动切换到iframe中</em></span>
wait.until(EC.frame_to_be_available_and_switch_to_it(<span style="color:#98c379">'login_frame_qq'</span>))
driver.find_element_by_id(<span style="color:#98c379">'switcher_plogin'</span>).click()
driver.find_element_by_id(<span style="color:#98c379">'u'</span>).send_keys(<span style="color:#98c379">'test'</span>)
driver.find_element_by_id(<span style="color:#98c379">'p'</span>).send_keys(<span style="color:#98c379">'test'</span>)
driver.find_element_by_id(<span style="color:#98c379">'login_button'</span>).click()

time.sleep(<span style="color:#d19a66">2</span>)
driver.quit()  <span style="color:#b18eb1"><em># 关闭浏览器，kill掉chromedriver进程</em></span></span></span>

alert弹出框操作

网页上的弹出框分两种，一种是页面弹出框，这是一个html页面元素，可见时是能定位到并进行操作的；另一种则是alert弹出框，这是是js里的alert弹框，而selenium只能定位到html元素，那么像这种alert弹出框如何处理呢？既然是js那么我们就用js来处理。

页面弹出框

它是一个html页面元素，只是需要由用户在页面的操作中触发弹出，因此处理这种类型的弹出框，一般分为两步：

🍊 第一步：执行触发操作之后，等待弹出框出现
🍊 第二步：定位弹出框中的元素并操作

如百度登录的弹出框：

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 <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># By模块封装了8大定位方法名</em></span>

driver = webdriver.Chrome()

driver.get(<span style="color:#98c379">"http://www.baidu.com"</span>)
driver.find_element_by_xpath(<span style="color:#98c379">'//div[@id="u1"]//a[@name="tj_login"]'</span>).click()

<span style="color:#b18eb1"><em># 用户名登陆定位表达式</em></span>
loc = (By.ID, <span style="color:#98c379">"TANGRAM__PSP_11__footerULoginBtn"</span>)
<span style="color:#b18eb1"><em># 等待时间10秒，轮循周期默认0.5秒一次</em></span>
WebDriverWait(driver, <span style="color:#d19a66">10</span>).until(EC.visibility_of_element_located(loc))

<span style="color:#b18eb1"><em># 操作满足条件之后的元素</em></span>
driver.find_element(*loc).click()

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

alert弹出框

alert弹出框的处理方式：

🍰 第一步：使用swtich_to.alert切换到弹出框，建议先使用显性等待EC.alert_is_present()判断弹出框是否可见，或者强制等待0.5s：time.sleep(0.5)
🍰 第二步：使用Alert类提供的一系列操作方法对弹窗进行操作：
- accept() 是
- dismiss() 否
- Send_keys() 往弹出框里输入文本
- text() 获取弹框里的内容

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 <span style="color:#f92672">import</span> expected_conditions <span style="color:#f92672">as</span> EC

<span style="color:#b18eb1"><em># 启动Chromedriver，并与Chromedriver开启会话</em></span>
driver = webdriver.Chrome()
driver.maximize_window()
driver.get(<span style="color:#98c379">"https://www.w3school.com.cn/tiy/t.asp?f=js_alert"</span>)

wait = WebDriverWait(driver, <span style="color:#d19a66">10</span>)
wait.until(EC.frame_to_be_available_and_switch_to_it(<span style="color:#98c379">'iframeResult'</span>))
<span style="color:#b18eb1"><em># 触发alert弹框</em></span>
driver.find_element_by_xpath(<span style="color:#98c379">'//button[text()="试一试"]'</span>).click()
wait.until(EC.alert_is_present())

time.sleep(<span style="color:#d19a66">3</span>)   <span style="color:#b18eb1"><em># 这里是为了看下效果</em></span>
alert = driver.switch_to.alert  <span style="color:#b18eb1"><em># Alert类的实例化，切换到alert</em></span>
alert.accept()   <span style="color:#b18eb1"><em># 是</em></span>
<span style="color:#b18eb1"><em># dismiss()     否</em></span>
<span style="color:#b18eb1"><em># text()	    获取弹框里的内容</em></span>
<span style="color:#b18eb1"><em># Send_keys()   往弹出框里输入文本</em></span>

driver.quit()</span></span>