Web自动化 - 选择操作元素 1

Posted 和白月黑羽学Python

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web自动化 - 选择操作元素 1相关的知识,希望对你有一定的参考价值。

文章转自 白月黑羽教Python

 

所有的 UI (用户界面)操作 的自动化,都需要选择界面元素。

选择界面元素就是:先让程序能找到你要操作的界面元素。

先找到元素,才能操作元素。

 

 

选择元素的方法

程序 怎么才能找到 要操作的 web 界面元素?

方法就是要根据这个 web 元素的 特征 去选择。

元素的特征怎么查看?

可以使用浏览器的开发者工具栏帮我们查看、选择web 元素。

请大家安装最新版的Chrome浏览器(可以百度搜索下载)。

用chrome浏览器访问百度,按F12后,点击下图箭头处的Elements标签,即可查看页面对应的html 元素

 

 

然后,再点击 最左边的图标,如下所示

 

 

之后,鼠标在界面上点击哪个元素,就可以查看该元素对应的html标签内容了。

比如,前面的图的高亮处,就是百度搜索输入框对应的input元素。

 

 

根据 元素的id 属性选择元素

大家仔细看上面的 input元素 内容,会发现它有一个属性叫id。

 

 

我们可以把 id 想象成元素的编号, 是用来在html中标记该元素的。 根据规范, 如果元素有id ,这个id 必须是当前html中唯一的。

所以如果元素有id, 根据id选择元素是最简单高效的方式。

下面的代码,就是用selenium 访问百度,并且在输入框中搜索 黑羽魔巫宗

大家可以运行一下看看。

from selenium import webdriver

# 创建 WebDriver 实例对象,指明使用chrome浏览器驱动
driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

# WebDriver 实例对象的get方法 可以让浏览器打开指定网址
driver.get(\'https://www.baidu.com\')

# 根据id选择元素,返回的就是该元素对应的WebElement对象
element = driver.find_element_by_id(\'kw\')

# 通过该 WebElement对象,就可以对页面元素进行操作了
# 比如输入字符串到 这个 输入框里
element.send_keys(\'黑羽魔巫宗\\n\')

其中

driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

返回的是 WebDriver 实例对象,我们可以通过这个实例对象来操控浏览器,比如 打开网址、选择界面元素等。

下面的代码

driver.find_element_by_id(\'kw\')

就是使用 WebDriver 实例对象 的方法find_element_by_id, 这个方法就是 根据输入框元素的 id 值 ‘kw’ 来选择到元素。

选择到元素之后, find_element_by_id 方法会返回一个 WebElement, 我们通过这个对象就可以操控对应的界面元素。

比如 send_keys 方法就是在对应的元素中输入字符串,

而 click 方法就可以点击该元素。

 

根据 class属性、tag名 选择元素

除了根据元素的id ,我们还可以根据元素的class 属性选择元素。

大家请访问这个网址

这个网址对应的html内容 有如下的部分

 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>白月黑羽测试网页1</title>

        <style>
            .animal {color: red;}
        </style>
    </head>

    <body>
        
        <div class="plant"><span>土豆</span></div>
        <div class="plant"><span>洋葱</span></div>
        <div class="plant"><span>白菜</span></div>

        <div class="animal"><span>狮子</span></div>
        <div class="animal"><span>老虎</span></div>
        <div class="animal"><span>山羊</span></div>

    </body>
</html>

所有的植物元素都有个class属性 值为 plant。

所有的动物元素都有个class属性 值为 animal。

如果我们要选择所有的 动物, 就可以使用方法 find_elements_by_class_name

driver.find_elements_by_class_name(\'animal\')

注意

find_elements_by_class_name 方法返回的是找到的符合条件的所有元素 (这里有3个元素), 放在一个列表中返回。

而如果我们使用 find_element_by_class_name (注意少了一个s) 方法, 就只会返回第一个元素。

大家可以运行如下代码看看。

 

from selenium import webdriver

# 创建 WebDriver 实例对象,指明使用chrome浏览器驱动
driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

# WebDriver 实例对象的get方法 可以让浏览器打开指定网址
driver.get(\'http://www.python3.vip/doc/tutorial/python/code/sample1.html\')

# 根据 class name 选择元素,返回的是 一个列表
# 里面 都是class 属性值为 animal的元素对应的 WebElement对象
elements = driver.find_elements_by_class_name(\'animal\')

# 取出列表中的每个 WebElement对象,打印出其text属性的值
# text属性就是该 WebElement对象对应的元素在网页中的文本内容
for element in elements:
    print(element.text)

 

如果我们把

elements = driver.find_elements_by_class_name(\'animal\')

去掉一个s ,改为

element = driver.find_element_by_class_name(\'animal\') 
print(element.text)

那么返回的就是第一个class 属性为 animal的元素, 也就是这个元素

<div class="animal"><span>狮子</span></div>



类似的,我们可以通过方法 find_elements_by_tag_name ,选择所有的tag名为 div的元素,如下所示

from selenium import webdriver

# 创建 WebDriver 实例对象,指明使用chrome浏览器驱动
driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

# WebDriver 实例对象的get方法 可以让浏览器打开指定网址
driver.get(\'http://www.python3.vip/doc/tutorial/python/code/sample1.html\')

# 根据 tag name 选择元素,返回的是 一个列表
# 里面 都是 tag 名为 div 的元素对应的 WebElement对象
elements = driver.find_elements_by_tag_name(\'div\')

# 取出列表中的每个 WebElement对象,打印出其text属性的值
# text属性就是该 WebElement对象对应的元素在网页中的文本内容
for element in elements:
    print(element.text)

 

等待界面元素出现

在我们进行网页操作的时候, 有的元素内容不是可以立即出现的, 可能会等待一段时间。

比如 百度搜索一个词语, 我们点击搜索后, 浏览器需要把这个搜索请求发送给百度服务器, 百度服务器进行处理后,把搜索结果返回给我们。

只是通常百度服务器的处理比较快,我们感觉好像是立即出现了搜索结果。

百度搜索的每个结果 对应的界面元素 其ID 分别是数字 1, 2 ,3, 4 。。。

如下

 

那么我们可以试试用如下代码 来将 第一个搜索结果里面的文本内容 打印出来

from selenium import webdriver

driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

driver.get(\'https://www.baidu.com\')

element = driver.find_element_by_id(\'kw\')

element.send_keys(\'黑羽魔巫宗\\n\')

# id 为 1 的元素 就是第一个搜索结果
element = driver.find_element_by_id(\'1\')

# 打印出 第一个搜索结果的文本字符串
print (element.text)

 

如果大家去运行一下,就会发现有如下异常抛出

selenium.common.exceptions.NoSuchElementException: 
Message: no such element: 
Unable to locate element: {"method":"id","selector":"1"}

NoSuchElementException 的意思就是在当前的网页上 找不到该元素, 就是找不到 id 为 1 的元素。

为什么呢?

因为我们的代码执行的速度比 百度服务器响应的速度 快。

百度还没有来得及 返回搜索结果,我们就执行了如下代码

element = driver.find_element_by_id(\'1\')

在那短暂的瞬间, 网页上是没有用 id为1的元素的 (因为还没有搜索结果呢)。自然就会报告错误 id为1 的元素不存在了。

那么怎么解决这个问题呢?

很多聪明的读者可以想到, 点击搜索后, 用sleep 来 等待几秒钟, 等百度服务器返回结果后,再去选择 id 为1 的元素, 就像下面这样

 

from selenium import webdriver

driver = webdriver.Chrome(r\'d:\\webdrivers\\chromedriver.exe\')

driver.get(\'https://www.baidu.com\')

element = driver.find_element_by_id(\'kw\')

element.send_keys(\'黑羽魔巫宗\\n\')

# 等待 2 秒
from time import sleep
sleep(2)

# 2 秒 过后,再去搜索
element = driver.find_element_by_id(\'1\')

# 打印出 第一个搜索结果的文本字符串
print (element.text)

 

大家可以运行一下,基本是可以的,不会再报错了。

但是这样的方法 有个很大的问题,就是设置等待多长时间合适呢?

这次百度网站反应可能比较快,我们等了一秒钟就可以了。

但是谁知道下次他的反应是不是还这么快呢?百度也曾经出现过服务器瘫痪的事情。

可能有的读者说,我干脆sleep比较长的时间, 等待 20 秒, 总归可以了吧?

这样也有很大问题,假如一个自动化程序里面需要10次等待, 就要花费 200秒。 而可能大部分时间, 服务器反映都是很快的,根本不需要等20秒, 这样就造成了大量的时间浪费了。

 

Selenium提供了一个更合理的解决方案,是这样的:

当发现元素没有找到的时候, 并不 立即抛出 找不到元素的异常。

而是周期性(每隔半秒钟)重新寻找该元素,直到该元素找到,

或者超出指定最大等待时长,这时才 抛出异常(如果是 find_elements 则是返回空列表)。

Selenium 的 Webdriver 对象 有个方法叫 implicitly_wait

该方法接受一个参数 就是指定的 最大等待时长。

如果我们 加入如下代码

driver.implicitly_wait(10)

那么后续所有的 find_element 或者 find_elements 之类的方法调用 都会采用上面的策略。

就是找不到元素 每隔 半秒钟 再去界面上查看一次, 直到找到该元素, 或者 过了10秒钟 最大时长。

这样,我们的百度搜索的例子的最终代码如下

 

from selenium import webdriver

driver = webdriver.Chrome()

# 设置最大等待时长为 10秒
driver.implicitly_wait(10)

driver.get(\'https://www.baidu.com\')

element = driver.find_element_by_id(\'kw\')

element.send_keys(\'黑羽魔巫宗\\n\')

element = driver.find_element_by_id(\'1\')

print (element.text)

 

大家再运行一下,可以发现不会有错误了。

 

 

访问原文网站,看 下一篇 操作web界面 2

文章转自 白月黑羽教Python

以上是关于Web自动化 - 选择操作元素 1的主要内容,如果未能解决你的问题,请参考以下文章

Web自动化 - 选择操作元素 2

Selenium:选择元素的基本方法

在哪里以及如何使用片段填充我的标签

30 段 Python 实用代码

web自动化

Web自动化测试06:元素操作浏览器操作方法以及获取元素信息