Selenium WebDriver 网页操作

爱被打了一巴掌 2023-01-16 11:13 186阅读 0赞

### 文章目录 ###

*   *  （一）基础操作
     *   *  （1）网页导航
         *  （2）获取页面标题
         *  （3）关闭浏览器窗口
     *  （二）隐式等待和显示等待
     *   *  （1）问题背景
         *  （2）隐式等待
         *  （3）显式等待
         *  （4）流利的等待
         *  （5）总结
     *  （三）定位元素
     *   *  （1）基本定位方式
         *  （2）超链接定位方式
         *  （3）通过cssSelector定位
         *  （4）通过 xpath

## （一）基础操作 ##

### （1）网页导航 ###

【方式一】

driver.get(baseUrl);

【方式二】

driver.navigate().to(baseUrl)

### （2）获取页面标题 ###

pageTitle = driver.getTitle();

页面标题的实际值可以使用getTitle()方法获得。 然后将标题保存到变量pageTitle中，以供进一步声明。

### （3）关闭浏览器窗口 ###

driver.quit();

quit()方法关闭所有浏览器窗口，并完全结束 WebDriver 会话。 这样可以避免在未正确清除任何相关文件的情况下可能发生的内存泄漏。  
driver.close()  
driver.close()也可以使用。 不同之处在于，它将关闭当前关注的浏览器窗口

## （二）隐式等待和显示等待 ##

### （1）问题背景 ###

当我们使用driver.get（“url\_we\_wish\_to\_access”)，driver.navigate().to(“url”)或单击超链接等时，这些调用将在该加载活动完成之前加载启动页面并返回。 因此，如果页面的加载线程尚未填充 Web 元素，而您尝试使用driver.findElement(“locating\_strategy”)找到它，则得到的只是异常即NoSuchElementException，ElementNotVisibleException等。

所有这些意味着我们必须找到一种告诉 Selenium 的方法，我们希望它等待一定的时间，或者直到 Web 元素变得可访问/可单击/显示为止

### （2）隐式等待 ###

当尝试在页面上查找特定的 Web 元素时，如果该 Web 元素不是立即可用的，则隐式等待告诉 WebDriver 在指定的时间内轮询 DOM。 万一在指定的等待时间内找到该元素，测试将继续执行。 如果不是，则抛出NoSuchElementException。

WebDriver driver = new ChromeDriver();
            String baseUrl = "https://www.baidu.com";
            driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);
            //打开URL
            driver.get(baseUrl);
            driver.findElement(By.id("XXXX"));
            driver.close();

上面代码中首先访问百度地址，设置了隐式等待3秒，然后访问了一个不存在的元素，之后再遍历DOM元素查找该元素时会等待3秒，如果找不到再抛出NoSuchElementException。

【隐式等待的语法是：】  
driver.manage().timeouts().implicitlyWait(3, TimeUnit.SECONDS);

隐式等待有两个参数。 在此示例中，我们的第一个参数为 3 ，这是它必须等待的时间，第二个参数为TimeUnit.SECONDS。 这是时间测量。 可以指定为DAYS，HOURS，MINUTES，SECONDS，MILLISECONDS，MICROSECONDS，NANOSECONDS等。

【隐式等待注意事项】

1：隐式等待只需要初始化一次。 设置后，它将适用于WebDriver对象实例的寿命。 换句话说，它将在浏览器打开的整个过程中就位。 因此，WebDriver 将等待该额外时间，然后对所有findElement)和findElements)抛出异常  
2：默认时间设置为 0。  
3：隐式等待仅影响finddElement(s)，它不影响其他WebDriver方法，例如driver.getCurrentUrl()等。  
4：在大多数情况下，尤其是在调试时，仅“NoSuchElementException”并不是很有用。 我们可能希望使用更多信息来自定义此错误消息，例如捕获屏幕快照或添加更多详细信息等。可以通过在每次finddElement(s)调用周围使用try-catch块来实现此目的，但这不是我们使用隐式等待的目标，因为这是一个全局性的时间设置。  
5：由于有大量的 JavaScript，因此可能会出现一些奇怪的情况。 即使该元素位于 DOM 中，也可能无法立即单击或显示或启用它。 结果我们可能会看到ElementNotVisibleException，WebDriverException，StaleElementReferenceException  
6：由于不同的元素可能在不同的时间加载，因此我们可能会说服将等待时间设置为较高的值（或等效于最慢的 Web 元素的加载时间），例如 20 秒左右。 我们对此的理由是，“无论如何，所有元素的加载速度都将比此时快，并且测试将按预期进行。”  
7：在实际应用中，查找一个元素，但是无论结果如何我们都希望能够继续执行，可是隐式等待在等待特定周期后会直接抛出NoSuchElementException，并停止程序运行  
8：如果在某些时候我们对于某个元素是否存在仅仅需要做个判断，而非决定性的流程，或者我并不希望对于每一个元素查找都走20秒，但是隐式等待会强制等待20秒，这对于大型项目来说会很耗时。

### （3）显式等待 ###

显式等待需要更多的编码，但是与隐式等待相比，它具有巨大的优势。 在这里，我们可以等到某种情况发生后再进行测试。 如果在指定的超时值内未满足条件，则将引发异常。

WebDriverWait wait = new WebDriverWait(driver, 15);
    WebElement element =
     wait.until(ExpectedConditions.elementToBeClickable(By.id("element_id")));

因此，WebDriverWait类用于指定最大超时值，在这种情况下为 15 秒。 ExpectedCondition类的方法涵盖了我们希望在测试中出现之前要等待的大多数条件。 这些条件与WebDriverWait一起使用。

上面的代码一直等到元素变为可点击（即显示并启用）并返回结果。 默认情况下，WebDriverWait每 500 毫秒调用ExpectedCondition，直到成功返回。 在这种情况下，它会在抛出TimeoutException之前尝试长达 15 秒。 成功的返回值是布尔值true或非null对象。

【ExpectedCondition预定义方法的一些示例是】

elementToBeClickable(By locator) – 用于检查元素的期望是可见的并已启用，以便您可以单击它。
    elementToBeSelected(WebElement element) - 检查是否选择了给定元素。
    presenceOfElementLocated(Bylocator) – 检查页面的 DOM 上是否存在元素。
    urlToBe(java.lang.String url) – 检查当前页面的 URL 是一个特定的 URL。
    visibilityOf(WebElement element) - 用于检查存在于页面的 DOM 上的已知元素的是可见的。

### （4）流利的等待 ###

public static WebElement fluentWait(final By locator) { 
            return new FluentWait<>(driver)
                    .withTimeout(Duration.ofSeconds(20))
                    .pollingEvery(Duration.ofSeconds(2))
                    .ignoring(NoSuchElementException.class)
                    .until(driver -> driver.findElement(locator));
        }

在这里，我们声明超时值为 20 秒的流畅等待，每 2 秒（频率）轮询 DOM 直到找到元素为止，并在此时间间隔内忽略NoSuchElementException。 我们在上面的代码片段中创建了一个新函数，以在.until()中标识此 Web 元素。

![在这里插入图片描述][20210425162255455.png]

### （5）总结 ###

1：隐式等待会在每一次findElements时设置超时时间，会一直等待到特定的超时时间，如果找到则返回，没有则抛出异常

2：显示等待只会对设置具体条件的情况才会设置最大超时等待时间

3：相对于隐式等待会对所有的查询操作等待，显示等待有更多的自定义操作性

4：不要混合使用隐式和显式等待，因为这可能会导致不可预测的等待时间

5：我们可以实现自己的条件，也可以使用ExpectedConditions类中的预定义条件之一

6：使用FluentWait，我们可以忽略某些异常并改为指定自定义错误消息。 这将我们的调试经验提升到一个全新的水平。

7：通过忽略特定的异常直到满足我们的条件，流利的等待比隐式等待更可靠

8：不要使用Thread.sleep()，因为它会使整个测试脚本无条件进入休眠状态。 在大多数情况下，指定的睡眠时间不够长（导致异常），或者变得太长，导致即使元素加载速度更快，测试也要等待。

9：虽然显式等待涉及更多的编程部分，但由于它能够解决很多问题，使我们的生活变得更加轻松，我宁愿选择此方法，而不是隐式等待（基于测试自动化的需求和复杂性涉及眨眼）。

## （三）定位元素 ##

### （1）基本定位方式 ###

通过 ID 定位
    driver.findElement(By.id("FirstName"));
    按名称定位
    driver.findElement(By.name("LastName"));
    通过标签名定位
    List<WebElement> buttons = driver.findElements(By.tagName("a"));
    按类名称定位
    driver.findElement(By.className("className"));

以上几种使用方式比较简单常见，不在详述

### （2）超链接定位方式 ###

通过linkText定位  
driver.findElement(By.linkText(“hyperlink\_text”)  
找到具有匹配链接文本的第一个超链接

通过partialLinkText定位  
PartialLinkText也用于与超链接进行交互，与linkText定位策略非常相似。 此方法不提供部分完整链接，而是提供链接显示的完整文本。 因此，可以将链接文本的一部分作为匹配条件。

driver.findElement(By.partialLinkText("ss");
    说明：找到第一个超链接，其中包含指定的部分链接文本。

### （3）通过cssSelector定位 ###

选择器是使用 HTML 标记，属性及其值构造的模式。 然后将它们用于匹配所需的 Web 元素。使用cssSelector定位器优于 XPath 定位器的优点，速度更快，尤其是在 Internet Explorer 中，更简单，更具可读性，首选使用方式。

【举例】

driver.findElement(By.cssSelector("input#Email"));

![在这里插入图片描述][20210425162357873.png]

driver.findElement(By.cssSelector("input.Email"));
    <input class=Email>

driver.findElement(By.cssSelector("input[name='FirstName']"));

![在这里插入图片描述][20210425162410172.png]

### （4）通过 xpath ###

这也是一种先进且有效的定位策略（cssSelectors也是！）。 虽然有效，但有时可能会造成混淆。  
当所有希望都丧失了时，最直接简单的方式就是转向 XPath 策略。 因为在大多数情况下，我们将测试现有的东西并且无法修改。 我们并不总是能够控制页面以添加一些 ID，从而使自动化成为一项更简单的任务。

XPath （XML 路径语言）：根据 w3schools 的说法，XPath 是一种“路径式”语言，用于标识和浏览 XML 文档中的各种元素和属性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]

[20210425162255455.png]: /images/20221022/3243cd7a5f2240ab8e26e85500cb54aa.png
[20210425162357873.png]: /images/20221022/32efa8afdff74039bf9cd0ca62bd0f3d.png
[20210425162410172.png]: /images/20221022/68349cd4e34043fc8eca13de35775033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/335093feff894b1989ced44329c5de68.png