游览器自动化如果用WebDriver+Selenium实现

lsekfe

前言
　　Selenium是一款可以自动化操作浏览器的开源项目，最初的目的是浏览器功能的自动化测试，但是随着项目的发展，人们根据它的特性也用来做一些更多的有意思的功能而不仅仅是UI的自动化测试工具。就像Selenium官方网站上描述的那样，Selenium可以自动化操纵浏览器。完了！你想用它的能力做什么事情完全取决于你。
　　使用场景
　　针对浏览器的自动化测试有三个场景：
　　Selenium WebDriver：如果您想创建健壮的、基于浏览器的回归自动化套件和测试、在许多环境中扩展和分发脚本，那么您需要使用 Selenium WebDriver，它是一组特定于语言的绑定来驱动浏览器——这就是它的本意驱动的。
　　Selenium IDE：如果您想创建快速的错误重现脚本，创建脚本以帮助自动化辅助探索性测试，那么您想使用 Selenium IDE； Chrome、Firefox 和 Edge 插件，可以对与浏览器的交互进行简单的记录和回放。
　　Selenium Grid：如果您想通过在多台机器上分发和运行测试来扩展并从一个中心点管理多个环境，从而可以轻松地针对大量浏览器/操作系统组合运行测试，那么您需要使用 Selenium Grid。
　　原理
　　早期的Selenium目的是实现web应用的UI自动化测试，实现方式是通过三方的服务器注入js达到控制浏览器行为的目的，核心的组件叫Selenium-RC（Remote Control）
　　包含两个部分：
　　·客户端侧的编写控制浏览器逻辑的库
　　· 实现控制浏览器启动和关闭的服务器
　　架构如下：

这种架构被证明是复杂的，而且有诸多限制，比如：
　　·复杂的架构
　　· 执行测试脚本非常耗时，因为 Selenium RC 使用 JavaScript 命令作为浏览器的指令。这会导致性能下降
　　· API不太面向对象
　　· 不支持 Headless HTMLUnit 浏览器（不可见的浏览器）
　　Selenium RC 的局限性导致了新的自动化框架 Selenium WebDriver 的开发。在 2006 年引入 WebDriver 后，RC 中出现的复杂问题可以得到解决和解决。
　　Selenium 结合WebDriver简化了浏览器的控制行为，将中间环节的服务器去掉，直接在系统层级本地化控制浏览器，优化后的架构如下：

环境准备
　　如果你不想在编码层实现你的功能，可以下载Selenium IDE插件，支持录制回放，过程脚本导出。

如果需要通过代码实现更多灵活自定义功能，建议使用python，环境准备。
　　· python3、pip3

1. 　brew install python3

复制代码

　· selenium

1. 　pip3 install selenium

复制代码

install browser drivers
　　设置您的系统以允许浏览器自动化。
　　通过 WebDriver，Selenium 支持市场上所有主流浏览器，例如 Chrome/Chromium、Firefox、Internet Explorer、Edge、Opera 和 Safari。在可能的情况下，WebDriver 使用浏览器的内置自动化支持来驱动浏览器。

开发
　　First Script
　　通过webdriver实现控制浏览器自动访问功能：

1. 　def test_eight_components():
   
2. 　　    driver = webdriver.Chrome()
   
3. 　　   
   
4. 　　    driver.get("https://google.com")
   
5. 　　   
   
6. 　　    title = driver.title
   
7. 　　    assert title == "Google"
   
8. 　　   
   
9. 　　    driver.implicitly_wait(0.5)
   
10. 　　   
    
11. 　　    search_box = driver.find_element(by=By.NAME, value="q")
    
12. 　　    search_button = driver.find_element(by=By.NAME, value="btnK")
    
13. 　　   
    
14. 　　    search_box.send_keys("Selenium")
    
15. 　　    search_button.click()
    
16. 　　   
    
17. 　　    search_box = driver.find_element(by=By.NAME, value="q")
    
18. 　　    value = search_box.get_attribute("value")
    
19. 　　    assert value == "Selenium"
    
20. 　　   
    
21. 　　    driver.quit()

复制代码

WebDriver API
　　webDriver操纵浏览器的API大致可以分为两个部分，控制浏览器行为的比如，打开、关闭、前进、后退、刷新等和控制页面元素的如，点击、输入、获取元素内容等。
　　浏览器
　　获取浏览器信息

// title
　　driver.getTitle();
　　// url
　　driver.getCurrentUrl();

导航

//打开
　　driver.get("https://selenium.dev");
　　//跳转
　　driver.navigate().to("https://selenium.dev");
　　// 后退
　　driver.navigate().back();
　　// 前进
　　driver.navigate().forward();
　　// 刷新
　　driver.navigate().refresh();

弹框

　//根据条件找到页面中的弹框并点击
　　driver.findElement(By.linkText("See an example alert")).click();
　　//等待弹框展示并保存到变量中
　　Alert alert = wait.until(ExpectedConditions.alertIsPresent());
　　//获得弹框内容文本
　　String text = alert.getText();
　　//点击确定按钮
　　alert.accept();

　Alert、Confirm、Prompt功能类似，可以支持cookies的添加删除操作。

1. 　import org.openqa.selenium.*;
   
2. 　　import org.openqa.selenium.chrome.ChromeDriver;
   
3. 　　public class addCookie {
   
4. 　　    public static void main(String[] args) {
   
5. 　　        WebDriver driver = new ChromeDriver();
   
6. 　　        try {
   
7. 　　            driver.get("http://www.example.com");
   
8. 　　            // Adds the cookie into current browser context
   
9. 　　            driver.manage().addCookie(new Cookie("key", "value"));
   
10. 　　        } finally {
    
11. 　　            driver.quit();
    
12. 　　        }
    
13. 　　    }
    
14. 　　}

复制代码

Frames
　　支持针对Frames内元素的获取及操作。
Windows
　　WebDriver 不区分窗口和选项卡。如果您的站点打开一个新选项卡或窗口，Selenium 将允许您使用窗口句柄来处理它。每个窗口都有一个唯一标识符，该标识符在单个会话中保持不变。您可以使用以下方法获取当前窗口的窗口句柄：

1. 　driver.getWindowHandle();

复制代码

元素
　　识别和使用DOM中的元素，大多数人的 Selenium 代码大部分都涉及使用 Web 元素。这部分功能和写前端代码的document.getElementById作用差不多，思想比较简单，就是找到页面中的元素然后执行模拟用户行为的操作。
　　支持绝对定位和相对定位的策略，针对复杂页面ID，Tag，Class不好定位的情况可以使用xPath方式，非常灵活，其实也不用死记硬背，当某元素不好定位时，可以去官网查API的方式去实现。
　　相对定位

1. def relative():
   
2. 　　    # Above
   
3. 　　    email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
   
4. 　　    # Below
   
5. 　　    password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
   
6. 　　    # Left of
   
7. 　　    cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})
   
8. 　　    # Right of
   
9. 　　    submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})
   
10. 　　    # Near
    
11. 　　    email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
    
12. 　　    # Chaining relative locators
    
13. 　　    submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})

复制代码

传统定位

<ol id="vegetables" style="margin-top: 20px">
　　      <li class="potatoes">potatoes</li>
　　      <li class="onions">onions</li>
　　      <li class="tomatoes"><span>Tomato is a Vegetable</span></li>
　　    </ol>
　　    <ul id="fruits">
　　      <li class="bananas"></li>
　　      <li class="apples"></li>
　　      <li class="tomatoes"><span>Tomato is a Fruit</span></li>
　　     </ul>

1. def finders():
   
2. 　　    # Evaluating entire DOM
   
3. 　　    vegetable = driver.find_element(By.CLASS_NAME, "tomatoes")
   
4. 　　    print(vegetable)
   
5. 　　    # Evaluating a subset of the DOM
   
6. 　　    fruits = driver.find_element(By.ID, "fruits")
   
7. 　　    fruit = fruits.find_elements(By.CLASS_NAME, "tomatoes")
   
8. 　　    print(fruit)
   
9. 　　    # Optimized locator
   
10. 　　    fruit = driver.find_element(By.CSS_SELECTOR, "#fruits .tomatoes")
    
11. 　　    fruit2 = driver.find_element(By.CSS_SELECTOR, "ul .tomatoes")
    
12. 　　    print(fruit == fruit2) # True
    
13. 　　    # All matching elements
    
14. 　　    plants = driver.find_elements(By.TAG_NAME, "li")
    
15. 　　    print(plants)
    
16. 　　    # Get all the elements available with tag name 'p'
    
17. 　　    elements = driver.find_elements(By.TAG_NAME, 'span')
    
18. 　　    for e in elements:
    
19. 　　        print(e.text)
    
20. 　　def xPath():
    
21. 　　    ol = driver.find_element(By.XPATH, "/html/body/div/div/ol[1]")
    
22. 　　    ol2 = driver.find_element(By.XPATH, "//ol[1]")
    
23. 　　    ol3 = driver.find_element(By.XPATH, "//ol[@id='vegetables']")
    
24. 　　    print(ol == ol2) # True
    
25. 　　    print(ol == ol3) # True
    
26. 　　    onions = driver.find_element(By.XPATH, "//ol[1]/li[2]")
    
27. 　　    print(onions.text)

复制代码

交互
　　5种基本命令：
　　·click（任意元素）
　　· send keys（仅用于文本块和内容可编辑元素）
　　· clear（同上）
　　· submit （form 元素）
　　· select （选择列表元素）
　　获取元素信息

总结
　　本次分享介绍了Selenium使用场景，简单原理和一些的基础用法。并列举了一个小例子。掌握以上内容，你已经可以实现基本的UI自动化测试了。另外可以做一些爬虫和自动化操纵浏览器的工具需求就需要根据个人场景化定制了，只要你有“懒”的天性，相信一定会找到挺多有意思场景使用去使用它。