👏🏼 👐🏻 🦏 硒中的相对定位器4 👩🏼‍✈️ 🏇🏾 📶

敬礼，哈布罗夫斯克。期待Java QA工程师课程的开始，我们已为您准备了一些有趣的材料的翻译。

相对定位器

硒4为我们带来了相对定位器-相对定位器（最初称为友好定位器）。已添加此功能以帮助您查找其他项目旁边的项目。

可用选项：

above（）：搜索项目在指定项目之上
below（）：搜索的项目在指定项目的下方
toLeftOf（）：搜索项位于指定项的左侧
toRightOf（）：搜索项位于指定项的右侧
near（）：您要寻找的项目距离指定项目不超过50像素。还有一种重载方法来指定距离。

所有这些方法都被重载以接受By或WebElement。

使用相对定位器

以这个书店应用程序为例，我们想验证Java中Advanced Selenium左边的书是Java For Testers。相对定位器使我们能够做到这一点。

这是

DOM中用标识符pid6表示的“ Java中的高级硒” 书籍和pid5表示的“ Java for Testers” 的DOM片段。

方法WebDriver::findElement可以采用withTagName()返回对象RelativeLocator.RelativeBy（By的后代）的方法。

driver.findElement(withTagName("li")

在这里，我已经可以指定相对定位符。我知道“ Java for Testers”位于“ Java中的高级Selenium”（pid6）的左侧，并且位于“现实世界中的测试自动化”（pid1）的下方。因此，我可以从两个方面指出：

driver.findElement(withTagName("li")
                .toLeftOf(By.id("pid6"))
                .below(By.id("pid1")));

我得到了Java for Testers（pid5）。

@Test
public void test_book5_is_left_of_book6_and_below_book1(){
    String id = driver.findElement(withTagName("li")
            .toLeftOf(By.id("pid6"))
            .below(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid5");
}

我们可以使用above()和方法toRightOf()来查找测试自动化的经验（pid2）：

@Test
public void test_book2_is_above_book6_and_right_of_book1(){
    String id = driver.findElement(withTagName("li")
                    .above(By.id("pid6"))
                    .toRightOf(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid2");
}

怎么运行的？

我仅通过调用toLeftOf（By.id（“ pid6”））找不到“面向测试人员的Java ”。他将独自返回真实世界中的测试自动化（pid1）。这是因为它driver.findElement()从DOM的根开始搜索，而<li>Java中Advanced Selenium左侧的第一项是Real World中的Test Automation。

Selenium使用JavaScript函数getBoundingClientRect()搜索相对元素。此函数返回元素属性，例如，右，左，下和上。

通过查看这三本书的属性，我们可以看到真实世界中的测试自动化（pid1）和Java For Testers（pid5）都具有相同的x轴位置。

因此，它们都位于Java For Testers的左侧，其中第一个是Real World（pid1）中的Test Automation。

要记住的另一点是更改应用程序视口。如果我在移动视图中的应用程序上运行了上面提到的测试，那么自然会失败，因为这些书不再位于其他书的左/右：

当我尝试使用时，我也遇到了友好定位器的问题他们在这个ToDo应用中。

我尝试使用该方法toLeftOf()在“再见世界”元素旁边找到输入开关。外观上，此输入开关位于“再见世界”标签的左侧。这是DOM中的这个div：

<div class="view" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0">
    <input class="toggle" type="checkbox" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.0">
    <label data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.1">goodbye world</label>
    <button class="destroy" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.2"></button>
</div>

这是我用来在标签左侧找到输入元素的代码：

driver.findElement(withTagName("input")
      .toLeftOf(By.xpath("//label[text()='goodbye world']")))
      .click();

但是，我遇到了一个例外：似乎尽管该视图在视觉视图的左侧，但实际上并非如此。我为这两个元素调用了一个函数，它们实际上是重叠的。请注意，它们都具有x 838的位置，因此从技术上讲不在的左侧。当我选择元素时，我现在看到它确实与元素重叠。 <img src =“ habrastorage.org/webt/hj/aa/46/hjaa46ps-of5_hhlplqaldclc7s.png ” /

org.openqa.selenium.NoSuchElementException: Cannot locate an element using [unknown locator]

<input><label>getBoundingClientRect()<input><label>

<label><input>

注意：这是Selenium WebDriver的Alpha版本。我与Selenium项目经理Simon Stewart进行了交谈，发现实施可能会根据反馈进行更改。

就这样。在课程中见！

硒中的相对定位器4

相对定位器

使用相对定位器

怎么运行的？

More articles: