Selenium 等待元素、frame切换、

3.5.0 等待元素

我们大家有没有这种经历，点击了一个链接或者按钮。Web界面会经过或长或短的一段时间，才显示出一个新的界面。我们做 web自动化的时候，脚本的执行是非常快的，我们脚本里面的代码，点击一个链接后，立即想去新的界面里面获取某个元素，往往会出现该元素没有找到的错误，因为浏览器的界面还没有更新，让这个元素显示出来。下面我们以以前讲的一个小案例来讲解这个问题。

#从selenium里面导入webdriver
from selenium import webdriver

#指定chrom的驱动
#执行到这里的时候Selenium会到指定的路径将chrome driver程序运行起来
driver = webdriver.Chrome('E:\ChromDriver\chromedriver.exe')
#driver = webdriver.Firefox()#这里是火狐的浏览器运行方法

#get 方法 打开指定网址
driver.get('http://www.baidu.com')

#选择网页元素
element_keyword = driver.find_element_by_id('kw')

#输入字符
element_keyword.send_keys('宋曲')

#找到搜索按钮
element_search_button = driver.find_element_by_id('su')

import time

#注意这里必须要等待时间，因为代码运行过快，代码运行完的时候页面还没加载出来就会找不到元素

time.sleep(2)

ret = driver.find_element_by_id('1')
print(ret.text)

if ret.text.startswith('宋曲'):#是不是已宋曲开头
    print('测试通过')
else:
    print('不通过')
#最后，driver.quit()让浏览器和驱动进程一起退出，不然桌面会有好多窗口
driver.quit()

我们输入宋曲之后不是要检查搜索结果吗，我们要检查id为1的元素，如果没有import time.sleep()的时候，大家会发现id为1的元素找不到，大家知道原因吗？因为我们输入完“宋曲”点击“百度一下”时候，网页的内容不是一下出来的，他要去百度服务器获取内容，等百度的服务器返回给我们的浏览器，我们才能呈现出来，中间是有一定时间差的，浏览器与服务器之间的交互没有我们代码运行的快，假如没有sleep我们点击click，python解释器立刻执行下一段代码，下一段代码立刻去寻找id为1的元素了，由于我们的程序和浏览器之间是在本地，他们之间的网络是很快的，肯定要比百度服务器速度要快，所以我们的程序请求很快就发给浏览器了，浏览器到页面去查，我们刚点击“百度一下”的时候，我们的浏览器还没来及把结果返回回来，所以他查不到就报错了，我们这里sleep两秒钟就解决了这个问题。

大家在加这个2秒钟的时候时候有没有疑问，这里为什么要写2秒，写2秒好不好？会不会不够用？那我写3秒钟够不够呢，4秒或者5秒会不会更好些？这里就存在一个问题，我到底写多少合适，写短了心里很虚，写长呢又不好比如好20秒，但是20秒大家想想这个地方不管有没有刷出来，他都强行的等待20秒，这只是一个动作假如再点击另外一个按钮，又去服务器上获取信息了还需要再等待20秒吗？？这样的话你一个自动化脚本执行下来，比如有七八次操作，就要2分钟才能执行一个自动化脚本，是不是太浪费时间，可能百分之九十九的时间不会花那么多时间，百度请求数据几乎1秒都用不到，但是写短了又怕确实有些操作需要1.5秒，这个问题我们该怎么解决呢？Selenium 早就想到了这个问题，已经贴心的为我们提供了两种方法。如下：

Selenium的解决方案：
选择一个元素的时候代码的设定一个最大的等待时长，周期性(每隔半秒钟)重新寻找该元素，直到该元素找到(返回)或者超出指定最大等待时长(返回空列表或者抛出异常)。

隐式等待
全局的设定后面所有的 选择元素的代码都不需要单独的指定周期性等待了driver.implicitly_wait(10) 这里面参数10的意思是，一但调用隐式等待方法之后，他就会设置一个最大的等待时间10秒，执行了driver.implicitly_wait(10) 这段代码之后，后面任何find开头方法选择元素所有的方法，根据后面的条件去找元素by_id或by_name或by_class或by_tag，如果找不到他不会立刻返回异常，而是每隔半秒钟再去查找一次，如果还没有他再去半秒钟查询一次，这个时候find_element_by_xxx这个函数一值是睡眠状态停在这里不动了，他不会去返回一直等到你找到这个元素，比如这个元素过6秒钟才呈现出来，这个调用等了6秒钟才返回，这是底层实现的，如果超出最大等待时长10秒钟，element就会抛出异常elements就会返回空列表
以后大家 一创建webdriver对象，就条件反射一样，加上implicitly_wait()，就像下面这样:

driver = webdriver.Chrome(r"d:\tools\webdrivers\chromedriver.exe")
driver.implicitly_wait(10)

显示等待
Selenium里面还有一种称之为显式等待的， 可以为一个操作专门指定等待时间,显示等待的方法运用比较少，显示等待当前这次寻找有效:

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
ele = WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.ID,'username')))

有一个用隐式等待 和它等价的方法，个人觉得更加简单一些，假如我有一个特殊的操作需要等待1分钟，我可以不向示例代码那样写，前面先用临时的隐式等待改为60秒，等操作结束之后再改为10秒。

driver.implicitly_wait(60)
try:
    ele = driver.find_element_by_id('1')
    print(ele.text)
    if ele.text.startswith('宋曲'):
        print('pass')
    else:
        print('fail')
except:
    print('exception happened')
finally:
    driver.implicitly_wait(10)

3.5.1 在 frame、iframe 里面操作

现在的网页，有很多里面会包含frame或者iframe，要对里面的元素进行操作，就必须要使用Selenium WebDriver的switch_to方法。一个例子获取网易云音乐排行榜信息。

大家打开这个url：https://music.163.com/#/discover/toplist?id=60198

打开之后发现有个Billboard排行榜，假如有个需求要把排行榜里面的歌找出来我们要怎么做呢，按照我们老的套路找到这些歌所在的区域有什么特性，我们可以我们之前介绍的两种方法进行查看。

image.png

我们发现这是第一首歌，我们往上找因为我们要找整个歌曲的列表我们不是只找一首歌。

image.png

会发现所有的td都是属于tr的，整个tr就是整个第一行代表第一首歌，我们可以看下后面的tr就是第二行第三行。

image.png

那我们就可以知道整个tbody就是整个歌如果不放心的话可以把歌拉倒最下面，然后点击tbody

image.png

就是页面上显示的所有的歌，tbody就是table里面的表thead就是表头，接下我们把表里面的内容进行处理，接下来我们怎么来找表里面的元素呢？我们可以看表上面，tbody没有id,通长我们就往上找就是找他的上层元素，上层的table没有id上面的div有id。

image.png

我们看到table是有class其实我们也可以用calss，但是class有可能跟其他元素相同，通常id是唯一的如果有id就用id，我们把光标放在有id的div元素哪里发现还是表的范围，这里有的同学可能就用id了，但是这里给大家讲个知识点，当我们通过id定位的时候要留个小心眼，看看id的名字是什么意思，看id的名字和这个表是否有种对应关系，如果没有对应关系，就看看名字他是auto-id后面一串乱七八槽的东西，通常这样的id要有警觉性，通常id名字和他的内容不产生对应关系，要怀疑他是不是随机值，那怎么验证他是不是随机值呢，你可以再打开一个网页再去查看他的id信息会发现他的id变了，这是因为有的前端他是通过框架去产生的id，他会去随机生成，这种情况就不能用这个id，这个时候我们就继续往上找，我们再往上找一层，注意有的时候HTML里面好多层包含文本的范围都是差不多的，我们在往上层找，发现上层又有一个auto-id。

image.png

他还是不能用，继续往上找：

image.png

我们发现找到这层高亮显示的部分还是这个范围，这个id没有乱七八槽的字符串了，这个不是随机产生了，我们先根据id找到这个元素然后把里面所有的文本内容打印出来，对应的代码是：

#从selenium里面导入webdriver
from selenium import webdriver

#指定chrom的驱动
#执行到这里的时候Selenium会到指定的路径将chrome driver程序运行起来
driver = webdriver.Chrome('E:\ChromDriver\chromedriver.exe')

#driver = webdriver.Firefox()#这里是火狐的浏览器运行方法

#隐式等待
driver.implicitly_wait(10)

#get 方法 打开指定网址
driver.get('https://music.163.com/#/discover/toplist?id=60198')

#通过id找到元素，并打印文本
div = driver.find_element_by_id('song-list-pre-cache')
print(div.text)

#退出
driver.quit()

运行上段代码我们会发现pychrom输出结果会停了好久没反应，接着弹出报错：

image.png

这里大家应该存在两个疑问：1.为什么停了好久没反应？2.为什么过了一段时间才抛出异常？根据报错信息我们定位报错的代码是div = driver.find_element_by_id('song-list-pre-cache')，意思是根据这个id找不到，但是为什么过了好久才报错呢，是因为隐式等待，那第二问题为什么会失败？为什么没找到呢，如果大家以后碰到这种问题明明很简单根据id没找到，大家有理由去怀疑这个元素是在一个fram里面，我们继续打开网易云，顺着这个元素往上找。

image.png

底下这个条子就是当前找的这个元素在整个html树上属于哪个节点，上一个就是他的父节点，这边用“...”三个点缩起来了，因为他的上层节点很多，点一下就可以展开，我们往上层一层层找，会找到一个body节点：

：

body是整个HTML里面的，我们再网上找发现确实有个html，一般来说html是整个HTML文本的跟节点最上层的那个节点，但是我们再网上找会发现一个iframe的节点：

image.png

然后iframe上面又有一个body，body上面又有一个html，所以说iframe在HTML里面是一个很特殊的元素，iframe内部会有另外一个HTML，如果把一个HTML文档的范围比喻成一个国家的话，iframe就像一个国中之国 ，这个地方为什么找不到就是这个原因，我们缺省用Selenium打开一个网页的时候，他的查找范围是当前的根HTML里面，如果说HTML里面有个iframe的话，iframe里面这个HTMl元素他会忽略掉的他不会去找，这就是为什么找不到的原因，假如我们现在就要找iframe里面的这个元素要怎么找呢？这个就需要另外的方法了。

常见的frame有两种：
一种是frameset： 打开http://www.w3school.com.cn/html/html_frames.asp通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每个frame 都对应了一个html文档。

image.png

另一种是iframe：inner frame的意思。打开 http://www.w3school.com.cn/html/html_iframe.asp

image.png

iframe 用于在网页内显示网页。和frameset不同的是，frameset内置好几个子html而 iframe 只内置一个子html，因为 frame 或者iframe 都是一个全新的 html 文档， 是被嵌入的另一份html文档，我们Selenium driver当前打开的是 主 html， 而我们这里要查看的是被嵌入的html，selenium 当前 的 webdriver element 对应的是主 html 不能找到 iframe 里面的 html 的元素。

• 切换到frame里面：

driver.swith_to.frame()

切换frame可以用：index(索引值从0开始）、id(注意那些会变的id)、name 、webelement(driver.find_element_by_tag_name('iframe'))任意种方式切换。

切换回主html里面:

driver.switch_to_default_content()

用这个方法就可以切入到frame里面，注意HTML中他可能不止一个frame有何能有很多，假如有多个要切换到那个frame里面的，我们看一下我们要切入的这个iframe

image.png

他有name也有id，我们先通过name，看代码：

from selenium import webdriver

#指定chrom的驱动
#执行到这里的时候Selenium会到指定的路径将chrome driver程序运行起来
driver = webdriver.Chrome('E:\ChromDriver\chromdriver2.43\chromedriver.exe')

driver.implicitly_wait(10)

#get 方法 打开指定网址
driver.get('https://music.163.com/#/discover/toplist?id=60198')

#通过name
driver.switch_to.frame("contentFrame")

#找到表并打印文本
div = driver.find_element_by_id('song-list-pre-cache')
print(div.text)

#退出
driver.quit()

也可以通过id:

driver.switch_to.frame("g_iframe")

如果没有name也没有id没有任何属性该咋办呢，我们可以通过下标:

driver.switch_to.frame(0)

这样也是可以的，如果iframe里面又嵌套了一个iframe该怎么办呢，首先我们要先切换到第一个iframe里面再切换到嵌套的iframe里面,比如我们name等于“contentFrame”iframe里面嵌套了一个id为“abc”的iframe，该怎么写呢?

driver.switch_to.frame("contentFrame")
driver.switch_to.frame("abc")

就可以了，然后在id为‘abc’的iframe里面去找元素。我们进入iframe里面操作完歌曲列表，想退出外层比如我想操作导航栏里面的内容推荐，排行榜怎么找？注意我们不能紧接着上面的代码去找，因为导航栏不在iframe里面，这个iframe就是在最外层的，需要怎么退到最外层呢，看代码：

driver.switch_to.default_content()

这就退出到最外层了。

本章完，喜欢点个赞(*￣︶￣)

下面是小练习
打开百度新歌榜， http://music.baidu.com/top/new
在排名前50的歌曲中，找出其中排名上升的歌曲和演唱者注意： 有的歌曲名里面有 "影视原声" 这样的标签， 要去掉大家打开链接看一下，那些是排行上升的歌曲，就是箭头向上的，经过我们的查找i class=“up”(i就是icon图标的意思)的就是排行上升的歌曲。

image.png

那我们就找所有元素里面icon是up的就是上升的，但是这个i class=‘up’不是我们最终要找的，我们要找的是他所属的上层的节点。

image.png

他的上层节点是div，div的上层节点是li，最后我们发现每行歌对应一个li

image.png

那我们要找的就是所有的li，这个li是属于ul的，li里面所有具有i class=‘up’的就是我们要找的歌，那我们怎么找到所有的li呢？我们能不能用find_elements_by_tag_name(),这个方法呢，这里我们是不建议的，这样找是整个页面去找的可能会找到不属于ul的li那就多找了，通长做web自动化我们先找明确包含你想找的范围里面的li，这里就是ul，你先找到他的上层节点把他的范围限定下，不要在整个范围去找li，方法就是找上层节点，但是这个上层节点没有id我们就再往上层找，这里我们就找到了div。

image.png

正好这个div也是包含这20首歌的，代码如下：

#从selenium里面导入webdriver
from selenium import webdriver

#指定chrom的驱动
#执行到这里的时候Selenium会到指定的路径将chrome driver程序运行起来
driver = webdriver.Chrome('E:\ChromDriver\chromdriver2.43\chromedriver.exe')
#driver = webdriver.Firefox()#这里是火狐的浏览器运行方法
driver.implicitly_wait(10)
#get 方法 打开指定网址
driver.get('http://music.taihe.com/top/new')

#层层往下找
#div = driver.find_element_by_id('songListWrapper')
#liList = div.find_elements_by_tag_name('li')

#上面两行可以写成这样
liList = driver.find_elements_by_css_selector('#songListWrapper li')

#这里改成0.5因为find如果找不到就会等待10秒,
# 但是不是所有的歌都是有上升箭头的，改成0.5就不用等了
driver.implicitly_wait(0.5)
for li in liList:
    #那些是有up标签的歌曲
    upTags = li.find_elements_by_class_name('up')
    if upTags:
        #由于只要歌曲名和演唱者名
        title = li.find_element_by_class_name('song-title')
        titlesStr = title.find_element_by_tag_name('a').text

        authorsStr = li.find_element_by_class_name('author_list').text
        print(f'{titlesStr:10s}:{authorsStr}')
driver.implicitly_wait(10)
driver.quit()

大家可以运行试一下，看看是不是想要的结果，这里我们用了新的知识点，我们没学习CSS、XPath之前为了找到寻找songListWrapper里面的li，我们先找到他的上层songListWrapper再找里面的li，这里面我们用一行语句就搞定了，一步到位。