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

时间:2021-12-03 22:57:35

文章转自 白月黑羽教Python

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

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

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

选择元素的方法

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

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

元素的特征怎么查看?

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

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

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

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

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

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

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

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

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

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

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

我们可以把 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 属性选择元素。

大家请访问这个网址 http://www.python3.vip/doc/tutorial/python/code/sample1.html

这个网址对应的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 。。。

如下

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

Web自动化 - 选择操作元素 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')

# 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的更多相关文章

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

    文章转自 白月黑羽教Python 前面我们看到了根据 id.class属性.tag名 选择元素. 如果我们要选择的 元素 没有id.class 属性, 这时候我们通常可以通过 CSS selector ...

  2. Appium之选择&sol;操作元素

    Appium是如何选择.操作元素的呢? appium自动化  ------  选择界面 元素 操作元素  ------- ① 点击 ② 输入字符 ③ 拖拽 ④ 获取页面元素的各种属性 根据appium ...

  3. Selenium Web 自动化 - 如何找到元素

    Selenium Web 自动化 - 如何找到元素 2016-07-29 1. 什么是元素? 元素:http://www.w3school.com.cn/html/html_elements.asp ...

  4. web自动化 -- js操作(滑动屏幕、修改页面)

    一.selenium对  js  的操作方法 1.先定义  js 操作   或者  定义  目标元素 2.执行  js  操作:  driver.execute_script(js操作)    或者  ...

  5. Selenium Web 自动化

    1 Selenium Web 自动化 - Selenium(Java)环境搭建 2 Selenium Web 自动化 - 如何找到元素 3 Selenium Web 自动化 - Selenium常用A ...

  6. 【Selenium01篇】python&plus;selenium实现Web自动化:搭建环境,Selenium原理,定位元素以及浏览器常规操作!

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 二.话不多说,直接开干,开始搭建自动化测试环境 这里以前在 ...

  7. Web自动化必会知识:「Web基础、元素定位、元素操作、Selenium运行原理、项目实战&plus;框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

  8. 【Selenium03篇】python&plus;selenium实现Web自动化:元素三类等待,多窗口切换,警告框处理,下拉框选择

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第三篇博 ...

  9. 【python&plus;selenium的web自动化】- 元素的常用操作详解&lpar;一&rpar;

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html ​ 本篇主要内容:1.元素 ...

随机推荐

  1. 黄聪: 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  2. Configure Puppet Master with Passenger and Apache on Centos

    What is Passenger? Passenger (AKA mod_rails or mod_rack) is an Apache 2.x module which lets you run ...

  3. &lbrack;SQL&rsqb;sql介绍

    SQL语言概述 结构化查询语言(Structured Query Language,简称SQL)是一种介于关系代数与关系演算之间的语言,是一种用来与关系数据库管理系统通信的标准计算机语言.其功能包括数 ...

  4. Unity3D之UGUI学习笔记(一):UGUI介绍以及Canvas

    UGUI是Unity3D4.6官方提供的UI系统,支持2D和3D UI的开发. Unity3D UI史 OnGUI 在Unity4.6之前,官方提供的是OnGUI函数来开发UI界面,当然问题也比较多, ...

  5. Cookie管理

    1,判断来访者是否第一次 public class VistorTest extends HttpServlet { @Override protected void doGet(HttpServle ...

  6. 小兴趣:修改Hosts文件,禁止访问指定网页

    不知道Hosts文件什么鬼的朋友可以在网上搜索一下(大牛勿喷- -) 访问网址时,先查询本地的Hosts文件,那么如果我们将Hosts文件中的网址与IP的映射修改之后,将访问错误的IP. 如在文件尾追 ...

  7. Hive基础知识

    一.产生背景 1.MapReudce编程繁琐,需要编写大量的代码 2.HDFS中存放的都是文件,在HDFS中没有Scheme的概念,无法用SQL进行快速的查询. 二.Hive的概念 Hive是基于Ha ...

  8. JavaScript 面向对象之原型对象

    原型的概述 我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype 通过调用构 ...

  9. 23&period; Merge k Sorted Lists &lpar;JAVA&rpar;

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  10. Python Signal 信号

    https://blog.csdn.net/kongxx/article/details/50976802 http://blog.itpub.net/7728585/viewspace-214206 ...