2019-11-13 爬网页3-seleniumm模块学习（同时了解面包屑）

工作中有个需求，要在程序中模拟用户操作网页。网上找了一下，发现selenium这个模块不错，值得学习。

官网参见 https://www.seleniumhq.org/docs/cn/01_introducing_selenium.jsp

我用它模拟操作一下查询浦发的营业网点，
网址 https://www.spdb.com.cn/web_query/

模拟的操作非常简单就是选择省份，选择城市，然后点击查询。
相关的页面代码

<div class="ss_table">
							<table class="table01">
								<tr>
									<td class="text01">关键词：</td>
									<td class="text02"><input type="text" class="input_text" value="请输入网点名称或地址，支持模糊查询" onblur="if(this.value=='') this.value='请输入网点名称或地址，支持模糊查询';this.style.color='#dfdfdf';" onfocus="if(this.value=='请输入网点名称或地址，支持模糊查询') this.value=''; this.style.color='#323232';" style="color: rgb(223, 223, 223);" /></td>
								</tr>
								<tr>
									<td class="text01">选择省份：</td>
									<td class="text02">
										<select id="province" >
											<option value="%">所有省份</option>
											<option value="上海">上海</option>
										</select>
									</td>
								</tr>
								<tr>
									<td class="text01">选择城市：</td>
									<td class="text02">
										<select id="city" >
											<option value="%">所有城市</option>
											<option value="上海">上海</option>
										</select>
									</td>
								</tr>
							
								<tr>
									<td class="text01">网点类型：</td>
									<td class="text02">
										<input type="radio" name="branch" checked="checked" value="营业网点" />&nbsp;营业网点&nbsp;&nbsp;
										<input type="radio" name="branch" value="自助银行" />&nbsp;自助银行&nbsp;&nbsp;
                                                                          <!--       <input type="radio" name="branch" value="社区银行" />&nbsp;社区银行 -->
									</td>
								</tr>
							</table>
							<div class="ss_btn">
								<a href="javascript:;" id="querybutton1">查询</a>
							</div>

下面正式开始使用seleniumm
开发环境win10+python2.7+火狐浏览器

step1.先安装seleniumm

C:\>pip install selenium
Collecting selenium
  Downloading https://files.pythonhosted.org/packages/80/d6/4294f0b4bce4de0abf13e17190289f9d0613b0a44e5dd6a7f5ca98459853/selenium-3.141.0-py2.py3-none-any.whl (904kB)
    100% |████████████████████████████████| 911kB 31kB/s
Requirement already satisfied: urllib3 in c:\python27\lib\site-packages (from selenium)
Installing collected packages: selenium
Successfully installed selenium-3.141.0
You are using pip version 9.0.3, however version 19.3.1 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.

step2.GeckoDriver设置

先说Gecko，它是网页浏览器的排版引擎，负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入CSS等），以及计算网页的显示方式然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。

Gecko是最流行的排版引擎之一，能在Microsoft Windows、Linux和Mac OS X等主要操作系统上运行。

再说geckodriver，它使用W3C WebDriver兼容客户端与基于Gecko的浏览器进行交互的代理。该程序提供由WebDriver协议描述的HTTP API 与Gecko浏览器（例如火狐）进行通信的功能。

geckodriver是一个单独的HTTP服务器，它是完整的WebDriver远程实现。通过符合W3C WebDriver标准的客户端库（或客户端），您可以与geckodriver HTTP服务器进行交互。

如果使用之前没有配置，那会报错

selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.

selenium3.x的配置步骤如下：
1.下载geckodriver https://github.com/mozilla/geckodriver/releases
2.解压后拷贝到火狐的目录中
3.将火狐目录添加到环境变量path中
4.重启动Win10

3.模拟查询操作

实现代码

from selenium import webdriver
from selenium.common.exceptions import NoSuchElementException
import selenium.webdriver.support.ui as ui
from selenium.webdriver.support.select import Select
import re
import time
import os
 
print "start"
#打开Firefox浏览器 设定等待加载时间
driver = webdriver.Firefox()
 
url = 'https://www.spdb.com.cn/web_query/'

wait = ui.WebDriverWait(driver,10)
driver.get(url)

wait.until(lambda driver: driver.find_element('id','querybutton1'))

#获得查询按钮
try:
    elem_search=driver.find_element('id','querybutton1')
except NoSuchElementException as msg:
    print 'reason: ',msg

time.sleep(5)

S=Select(driver.find_element_by_id('province')).select_by_value('上海市') #省
Select(driver.find_element_by_id('city')).select_by_value('上海市') #城市

elem_search.click() #模拟按下查询按钮

#driver.quit()

几点说明
1.最先开始运行代码时候，没有任何效果，所以加了try，捕捉详细出错信息
2.后来发现我的代码执行太快，按钮还没有载入，就触发click事件会出错（见下面），所以引入了wait

selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element:

3.但是在选择省和城市时候还是出错，虽然控件加载了，但是内容没有加载全。所以再来一个sleep，等一会儿再模拟下拉选择。

这里还有个小插曲，我开始是按照源代码中选择’上海’，但是执行后一直没有效果。我还以为是我代码不对，最后研究了半天才发现，浦发html中就是错的，应该是’上海市‘，不是’上海‘。

4.后记-面包屑导航

在浦发html中还发现了以下代码

<!-- 面包屑  START   在main_content下-->
				<div class="common_position"><div class="c_dress">当前位置：<a href="../" title="首页">首页</a>&gt;<span>网点查询</span></div></div>
				<!-- 面包屑 END -->

说实话，以前也不知道‘面包屑’是什么。
查了网上https://baike.baidu.com/item/%E9%9D%A2%E5%8C%85%E5%B1%91%E5%AF%BC%E8%88%AA/358283?fr=aladdin，才知道这是UI设计中的一种导航方式的专门叫法。