前端学习-selenium python自动化测试（Shadow 处理）
1、selenium 安装
在安装python 和pip版本的基础上,
直接可以pip安装
pip install Selenium
安装浏览器驱动
推荐使用firefox，因为FireFox更加适合直接启动和前端代码，相比较于chrome,firefox的支持特性就好一些，首推Chrome和FireFox，不推荐其他浏览器。
安装浏览器器驱动
使用WebDriver在Chrome浏览器上进行测试时，需要从 http:// chromedriver.storage.googleapis.com /index.html 网址中下载与本机chrome浏览器对应的驱动程序，驱动程序名为chromedriver；
chromedriver的版本需要和本机的chrome浏览器对应，才能正常使用；
第一步： 下载对应版本的chromedriver驱动文件，具体版本请对照文章底部的对应关系表：
如本机的chrome浏览器版本为:版本 61.0.3163.100（正式版本） （64 位），对应的chromedriver版本为2.33.
第二步： 下载后把文件解压，然后放到本机chrome浏览器文件路径里，如：
C:\Program Files (x86)\Google\Chrome\Application
第三步： 操作完后，就可以使用以下代码直接调起浏览器了：
| 1 | driver = new ChromeDriver(); |
注意：；两个版本相互对应就OK
如何对各种元素进行操作呢，这里有一篇文章讲的特别好，贴出来
再了解上述内容之后，需要进行相关实验，这篇文章介绍的十分详尽。
在这里补充以下 shadow DOM，因为之前从来没有接触过前端，所以在这里着重强调下Shadow DOM，因为存在shadow DOM，以前的网页元素就像是一个仓库，里面直接放置着各种东西，现在的话有了Shadow ，就必须一个一个的打开容器，可以理解为
抖音上，之前送礼物都是直接送了，很直观。
有了Shadow 之后，送礼物就要讲究包装，外面有封口，牛皮纸袋，牛皮盒，里面还有各种各种的小盒子，纸做的，塑料做，金属做的，就像洋葱一样。
必须一层一层的拆解这些盒子
def expand_shadow_element(element):
shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
#driver.implicitly_wait(10)
driver.implicitly_wait(0.5)
return shadow_root这个函数可以将Shadow DOM一层一层的拆解开
以下就是我的代码
import selenium
from selenium import webdriver
import pytest
import time
import json
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from time import sleep
#该函数用于解决前端界面解析过程中的shadow DOM 问题，将隐藏界面进行解析
def expand_shadow_element(element):
shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
#driver.implicitly_wait(10)
driver.implicitly_wait(0.5)
return shadow_root
#设置界面初始参数
driver = webdriver.Chrome()
#driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.get("http://192.168.31.204:8123/config/users")
driver.implicitly_wait(5)
#取出home-assistant DOM
root1 = driver.find_element_by_tag_name('home-assistant')
shadow_root1 = expand_shadow_element(root1)
#以下代码解决了初始条件下的状态登陆弹窗
root2 = shadow_root1.find_element_by_css_selector('ha-store-auth-card')
shadow_root2 = expand_shadow_element(root2)
#print(shadow_root2,"shadow_root2","\n",root2,"root2")
root3 = shadow_root2.find_element_by_css_selector('paper-card')
root31=root3.find_element_by_css_selector("div.card-actions")
shadow_root3 = expand_shadow_element(root31)
#print(shadow_root3,"shadow_root3","\n",root3,"root3","\n",root31,"root31")
#该方法可以实现对于相同元素操作
root4 = root31.find_elements_by_css_selector("mwc-button")
#root4[0].click()
root4[1].click()
#print(root4,"root4")
#root4.click()
#shadow_root4 = expand_shadow_element(root4)
#root4 = shadow_root3.find_element_by_class_name("card-actions")
#root4.click()
#该段代码定位添加用户的按钮
add2 = shadow_root1.find_element_by_css_selector('home-assistant-main')
shadow_add2 = expand_shadow_element(add2)
add3 = shadow_add2.find_element_by_css_selector('app-drawer-layout > partial-panel-resolver > ha-panel-config > ha-config-users')
shadow_add3 = expand_shadow_element(add3)
add4 = shadow_add3.find_element_by_css_selector('hass-tabs-subpage-data-table > ha-fab')
shadow_add4 = expand_shadow_element(add4)
add5 = shadow_add4.find_element_by_css_selector('button.mdc-fab')
add5.click()
#shadow_add5 = expand_shadow_element(add5)
#该段代码定位添加用户的各个表单按钮
form2 = shadow_root1.find_element_by_css_selector('dialog-add-user')
shadow_form2 = expand_shadow_element(form2)
form3 = shadow_form2.find_element_by_css_selector('ha-dialog')
#shadow_form3 = expand_shadow_element(form3)
formname = form3.find_element_by_css_selector('div > paper-input.name')
#formname.send_keys("MoondyLi")
#shadow_form4 = expand_shadow_element(form4)
formusername = form3.find_element_by_css_selector('div > paper-input.username')
#formusername.send_keys("MoondyLi")
formpassword = form3.find_element_by_name('password')
#formpassword.send_keys("MoondyLi")
formpasswordConfirm = form3.find_element_by_name('passwordConfirm')
#formpasswordConfirm.send_keys("MoondyLi")
formbutton = form3.find_elements_by_css_selector('mwc-button')
#formname.click()
formname.send_keys(king)
#formusername.click()
formusername.send_keys(king)
#formpassword.click()
formpassword.send_keys(king)
#formpasswordConfirm.click()
formpasswordConfirm.send_keys(king)
formbutton[1].click()
driver.implicitly_wait(10)
#sleep(2)
add5.click()
except Exception as i:
print("wait",i)
sleep(10)
add5.click()
continue
这里再放一个原界面的Shadow 树
1.Selenium简介
Selenium是一个用于测试网站的自动化测试工具，支持各种浏览器包括Chrome、Firefox、Safari等主流界面浏览器，同时也支持phantomJS无界面浏览器。
2.支持多种操作系统
如Windows、Linux、IOS、Android等。
3.安装Selenium
pip install Selenium
1
4.安装浏览器驱动
Selenium3.x调用浏览器必须有一个webdriver驱动文件
Chrome驱动文件下载：点击下载chromedrive
Firefox驱动文件下载:点解下载geckodriver
5.配置环境变量
设置浏览器的地址非常简单。 我们可以手动创建一个存放浏览器驱动的目录，如： F:\GeckoDriver , 将下载的浏览器驱动文件（例如：chromedriver、geckodriver）丢到该目录下。
我的电脑–>属性–>系统设置–>高级–>环境变量–>系统变量–>Path，将“F:\GeckoDriver”目录添加到Path的值中。比如：Path字段;F:\GeckoDriver
参考浏览器驱动环境配置
(二)Selenium 快速入门
入门参考文献：Selenium入门
1.Selenium提供了8种定位方式:
id
name
class name
tag name
link text
partial link text
xpath
css selector
2.定位元素的8种方式
参考：selenium元素定位
定位一个元素 定位多个元素 含义
find_element_by_id find_elements_by_id 通过元素id定位
find_element_by_name find_elements_by_name 通过元素name定位
find_element_by_xpath find_elements_by_xpath 通过xpath表达式定位
find_element_by_link_text find_elements_by_link_tex 通过完整超链接定位
find_element_by_partial_link_text find_elements_by_partial_link_text 通过部分链接定位
find_element_by_tag_name find_elements_by_tag_name 通过标签定位
find_element_by_class_name find_elements_by_class_name 通过类名进行定位
find_elements_by_css_selector find_elements_by_css_selector 通过css选择器进行定位
3.实例演示
假如我们有一个Web页面，通过前端工具（如，Firebug）查看到一个元素的属性是这样的。
<html>
<head>
<body link="#0000cc">
<a id="result_logo" href="/" onmousedown="return c({'fm':'tab','tab':'logo'})">
<form id="form" class="fm" name="f" action="/s">
<span class="soutu-btn"></span>
<input id="kw" class="s_ipt" name="wd" value="" maxlength="255" autocomplete="off">
通过id定位:
dr.find_element_by_id("kw")
通过name定位:
dr.find_element_by_name("wd")
通过class name定位:
dr.find_element_by_class_name("s_ipt")
通过tag name定位:
dr.find_element_by_tag_name("input")
通过xpath定位，xpath定位有N种写法，这里列几个常用写法:
dr.find_element_by_xpath("//*[@id='kw']")
dr.find_element_by_xpath("//*[@name='wd']")
dr.find_element_by_xpath("//input[@class='s_ipt']")
dr.find_element_by_xpath("/html/body/form/span/input")
dr.find_element_by_xpath("//span[@class='soutu-btn']/input")
dr.find_element_by_xpath("//form[@id='form']/span/input")