Python使用Selenium模拟浏览器输入内容和鼠标点击 ！

<tt-image data-tteditor-tag="tteditorTag" contenteditable="false" class="syl1557651460108 ql-align-center" data-render-status="finished" data-syl-blot="image" style="box-sizing: border-box; cursor: text; text-align: left; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;"> image

<input class="pgc-img-caption-ipt" placeholder="图片描述(最多50字)" value="" style="box-sizing: border-box; outline: 0px; color: rgb(102, 102, 102); position: absolute; left: 187.5px; transform: translateX(-50%); padding: 6px 7px; max-width: 100%; width: 375px; text-align: center; cursor: text; font-size: 12px; line-height: 1.5; background-color: rgb(255, 255, 255); background-image: none; border: 0px solid rgb(217, 217, 217); border-radius: 4px; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></tt-image>

Selenium库是一套Web自动化测试工具,有很多功能,它可以帮我们模拟在浏览器输入内容和模拟鼠标点击浏览器按钮.

本文介绍Python调用Selenium实现模拟浏览器输入和点击的步骤和方法,并给出最易出现的BUG的解决办法

<tt-image data-tteditor-tag="tteditorTag" contenteditable="false" class="syl1557651460112 ql-align-center" data-render-status="finished" data-syl-blot="image" style="box-sizing: border-box; cursor: text; text-align: left; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;"> image

<input class="pgc-img-caption-ipt" placeholder="图片描述(最多50字)" value="" style="box-sizing: border-box; outline: 0px; color: rgb(102, 102, 102); position: absolute; left: 187.5px; transform: translateX(-50%); padding: 6px 7px; max-width: 100%; width: 375px; text-align: center; cursor: text; font-size: 12px; line-height: 1.5; background-color: rgb(255, 255, 255); background-image: none; border: 0px solid rgb(217, 217, 217); border-radius: 4px; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></tt-image>

Python学习交流群：1004391443，这里有资源共享，技术解答，还有小编从最基础的Python资料到项目实战的学习资料都有整理，希望能帮助你更了解python，学习python。

一、安装Selenium

<pre spellcheck="false" style="box-sizing: border-box; margin: 5px 0px; padding: 5px 10px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: inherit; vertical-align: baseline; cursor: text; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; background-color: rgb(240, 240, 240); border-radius: 3px; white-space: pre-wrap; color: rgb(34, 34, 34); letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">pip install Selenium
</pre>

<tt-image data-tteditor-tag="tteditorTag" contenteditable="false" class="syl1557651460116 ql-align-center" data-render-status="finished" data-syl-blot="image" style="box-sizing: border-box; cursor: text; text-align: left; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;"> image

<input class="pgc-img-caption-ipt" placeholder="图片描述(最多50字)" value="" style="box-sizing: border-box; outline: 0px; color: rgb(102, 102, 102); position: absolute; left: 187.5px; transform: translateX(-50%); padding: 6px 7px; max-width: 100%; width: 375px; text-align: center; cursor: text; font-size: 12px; line-height: 1.5; background-color: rgb(255, 255, 255); background-image: none; border: 0px solid rgb(217, 217, 217); border-radius: 4px; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></tt-image>

二、下载chromedriver.exe

需要下载与浏览器版本对应的chromedriver.exe到代码所在目录下,

下载地址:

http://chromedriver.storage.googleapis.com/index.html

(注意:运行代码时如果没有下载与自己的浏览器版本匹配的 chromedriver.exe 放到代码同级目录下,

会报错: selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH. Please see https://sites.google.com/a/chromium.org/chromedriver/home)

<tt-image data-tteditor-tag="tteditorTag" contenteditable="false" class="syl1557651460121 ql-align-center" data-render-status="finished" data-syl-blot="image" style="box-sizing: border-box; cursor: text; text-align: left; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;"> image

<input class="pgc-img-caption-ipt" placeholder="图片描述(最多50字)" value="" style="box-sizing: border-box; outline: 0px; color: rgb(102, 102, 102); position: absolute; left: 187.5px; transform: translateX(-50%); padding: 6px 7px; max-width: 100%; width: 375px; text-align: center; cursor: text; font-size: 12px; line-height: 1.5; background-color: rgb(255, 255, 255); background-image: none; border: 0px solid rgb(217, 217, 217); border-radius: 4px; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></tt-image>

三、编写代码实现模拟浏览器

本文以登录淘宝网首页为例，在搜索栏输入搜索内容，点击“搜索”按钮，（网站加载需要时间，受网速等影响）,加载完成后会进入授权登录页面

在提示扫码登录的界面,点击“账号密码登录”（换了页面，还是可以继续点击和输入内容），具体代码解释见注释

<pre spellcheck="false" style="box-sizing: border-box; margin: 5px 0px; padding: 5px 10px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: inherit; vertical-align: baseline; cursor: text; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; background-color: rgb(240, 240, 240); border-radius: 3px; white-space: pre-wrap; color: rgb(34, 34, 34); letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">from selenium import webdriverimport time # 声明浏览器(这里用chrome浏览器)browser = webdriver.Chrome()try: # get打开指定的url，传入要打开的url,以淘宝网为例 browser.get('https://www.taobao.com/') # 通过find_element_by_name获取到网页标签，send_keys()输入内容,在搜索栏输入python browser.find_element_by_name('q').send_keys('python') time.sleep(1) ''' 通过find_element_by_class_name获取到网页标签，click()点击 注意class名中的空格是表示父子级的关系，如果有空格，则class_name只取最后一段，然后还要避免有同名的class，不要取错了 为了避免取错标签，优先根据id或name等其他方式取 如：淘宝网的搜索按钮class name为btn-search tb-bg,用btn-search tb-bg取时报错,用tb-bg取则成功 ''' # browser.find_element_by_class_name('btn-search tb-bg').click() # 报错 browser.find_element_by_class_name('tb-bg').click() # 成功 time.sleep(5) # 点击"密码登录"按钮 # browser.find_element_by_class_name('forget-pwd J_Quick2Static').click() # 报错 browser.find_element_by_class_name('J_Quick2Static').click() # 正常 time.sleep(10) browser.close()except Exception as e: print("模拟登录失败：{}".format(e)) browser.close()
</pre>

上面的代码声明一个Chrome浏览器,通过browser对象获取浏览器标签进行输入内容和点击,sleep()模拟浏览器加载的过程

按照上面的步骤配置webdriver和编写代码即可以实现Selenium的demo.

<tt-image data-tteditor-tag="tteditorTag" contenteditable="false" class="syl1557651460125 ql-align-center" data-render-status="finished" data-syl-blot="image" style="box-sizing: border-box; cursor: text; text-align: left; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: block;"> image

<input class="pgc-img-caption-ipt" placeholder="图片描述(最多50字)" value="" style="box-sizing: border-box; outline: 0px; color: rgb(102, 102, 102); position: absolute; left: 187.5px; transform: translateX(-50%); padding: 6px 7px; max-width: 100%; width: 375px; text-align: center; cursor: text; font-size: 12px; line-height: 1.5; background-color: rgb(255, 255, 255); background-image: none; border: 0px solid rgb(217, 217, 217); border-radius: 4px; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;"></tt-image>

BUG描述:

使用webdriver声明浏览器后,打开网页,然后使用find_element_by_class_name('class_name')选择html标签时,报错:

Message: invalid selector: Compound class names not permitted

消息:无效选择器:不允许使用复合类名

原因分析:

我们通过F12从浏览器获取到的html元素的class name中间有空格,所以提示我们:类名不合法,不允许的类名

解决方法:

方法1.html元素的class name中间的空格是表示父级和子级的关系,我们调用以上方法时,使用类名的最后一段就可以了

如选择html标签: <button type="submit" class="btn-search tb-bg">

我们通过find_element_by_class_name('btn-search tb-bg') 选择button标签,就会报错

改成find_element_by_class_name('tb-bg')就可以选择到需要的button标签(btn-search和tb-bg中间有空格)

但是要确认tb-bg不是被很多个标签重复使用的类名,能确保选择到自己要选的那个标签

方法2.webdriver有很多方法,使用其他方法:

find_element_by_id(), find_element_by_name(), find_element_by_css_selector()等,如果需要选择的html标签有id属性,优先通过id选择,或者通过name属性,除非这个标签只有class属性时,再使用class的方法(换种思路),就可以避免以上问题了.