19. 通过 xpath 定位

注意：

如果到目前为止，您从未接触过 XPath，请在继续进行操作之前先了解 XPath 术语。 特别是，节点和这些节点之间的关系即父级，子级，同级，祖先，后代。

1. 捷径
2. 绝对 XPath 和相对 XPath
3. 使用标签和属性
4. 使用两个条件
5. 使用contains()
6. 查找多个元素

1. 点击 Firebug 图标或按“F12”。
2. 检查其 XPath 是必需的元素。
3. 相应的代码将在 Firebug 面板的“HTML”部分中突出显示。
4. 右键点击突出显示的代码，然后选择“复制 XPath”
5. 瞧！ 您已将准备好的烘焙 XPath 复制到剪贴板！

• 语法 ：driver.findElement(By.xpath("//tag_name[@attribute='value']"));
• 解释 ：标识 XPath 指向的元素。 “//”标识指定的节点，“@”符号用于选择与给定值匹配的指定属性。

• 右键点击“名字”文本框，然后选择检查元素，以获取相应的 HTML 代码，如下所示：

  <input value="" name="FirstName" id="FirstName" spellcheck="false" 
  class="form-error" aria-invalid="true" type="text">
  

• 我们可以看到“input”标签具有一个“name”属性，其值为“FirstName”。
• 代码： （可以使用以下任一选项）

  driver.findElement(By.xpath("//input[@name='FirstName']"));
  driver.findElement(By.xpath("//input[@id='FirstName']"));
  driver.findElement(By.xpath("//input[@class='form-error']"));
  

• 如果您希望使用绝对路径

  driver.findElement(By.xpath("/html/body/div[1]/div[2]/div/div[1]/div/form/div[1]/fieldset/label[1]/input"));
  

• 语法 ：driver.findElement(By.xpath("//tag_name[@attribute1='value1'][@attribute2='value2']"))
• 说明 ：标识具有指定tag_name的元素，这些元素的属性与给定值匹配。

• 右键点击“创建密码”和“确认密码”文本框，然后选择检查元素以获取相应的 HTML 代码，如下所示：

  <input name="Passwd" id="Passwd" type="password">
  <input name="PasswdAgain" id="PasswdAgain" type="password">
  

• 请注意，两个文本框的“class”属性值均相同，但“id”和“name”的值均不同。 因此，为了找到“确认密码”文本框，让我们同时提及其“class”和“id”值。
• 代码：

  driver.findElement(By.xpath("//input[@type='password'][@id='PasswdAgain']"));
  

• 语法 ：driver.findElement(By.xpath("//tag_name[contains(@attribute, 'value')]]"))
• 说明 ：标识具有指定tag_name的元素，该元素的属性与给定的部分值相匹配。

• 右键单击按钮并检查元素以获取相应的 HTML 代码，如下所示：

  driver.findElement(By.xpath("//div[contains(@class,'button')]/input"));
  

• 注意，该 XPath 标识div元素，该div元素包含带有部分值button的class属性（<div class="form-element nextstep-button">），然后找到其子“input”标签（即“提交”按钮）。

• driver.findElements(By.xpath("//*[contains(@class,'goog-inline-block')]"));
  

• 这将找到在其“class”属性中包含值“goog-inline-block”的所有标签。
• 明确指出要使用“findElements”，以便将所有已标识的 Web 元素添加到列表中。 如果使用“findElement”，它将仅返回所标识的第一个元素。

1. 打开 Firefox 浏览器。
2. 导航到 Google 帐户创建页面
3. 使用绝对 XPath 找到“名字”文本框
4. 输入“testFirst”作为名字
5. 使用标签和“id”属性找到“姓氏”文本框（当然是相对的 XPath！）
6. 输入“testLast”作为姓氏
7. 使用两个条件（类型和 ID 属性）找到“确认密码”文本框
8. 输入“Pass1234!”作为确认密码
9. 使用星号将所有包含在其“class”属性中值“goog-inline-block”的元素定位
10. 将找到的元素总数打印到控制台
11. 将第一个标识的元素的标题值打印到控制台
12. 使用contains()找到“下一步”按钮
13. 将其“name”属性的值打印到控制台
14. 验证 Eclipse IDE 控制台的输出屏幕和 JUnit 窗格是否成功

package com.blog.junitTests;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ElementLocatorTest4 {
    //Declaring variables
    private WebDriver driver; 
    private String baseUrl;
    @Before
    public void setUp() throws Exception{
        // Selenium version3 beta releases require system property set up
        System.setProperty("webdriver.gecko.driver", "E:\\ Softwares\\Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe");
        // Create a new instance for the class FirefoxDriver
        // that implements WebDriver interface
        driver = new FirefoxDriver();
        // Implicit wait for 5 seconds
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        // Assign the URL to be invoked to a String variable
        baseUrl = "https://accounts.google.com/SignUp";
    }
    @Test
    public void testPageTitle() throws Exception{
        // Open baseUrl in Firefox browser window
        driver.get(baseUrl);
        // Locate 'First Name' text box by absolute XPath
        // assign it to a variable of type WebElement  
        WebElement firstName = driver.findElement(By.xpath("/html/body/div[1]/div[2]/div/div[1]"
            + "/div/form/div[1]/fieldset/label[1]/input"));
        // Clear the default placeholder or any value present
        firstName.clear();
        // Enter/type the value to the text box
        firstName.sendKeys("testFirst");
        // Locate 'Last Name' text box by relative XPath: using tag and id attribute
        WebElement lastName = driver.findElement(By.xpath("//input[@id='LastName']"));
        lastName.clear();
        lastName.sendKeys("testLast");
        // Locate 'Confirm your password' text box by XPath: using two conditions   
        WebElement confirmPwd = driver.findElement(By.xpath("//input[@type='password'][@id='PasswdAgain']"));
        confirmPwd.clear();
        confirmPwd.sendKeys("Pass1234!");
        //Locate all elements with class 'goog-inline-block' by relative XPath: using asterisk symbol
        List<WebElement> dropdowns = driver.findElements(By.xpath("//*[contains(@class,'goog-inline-block')]"));
        // Prints to the console, the total number of elements located 
        System.out.println("Total elements containing the class 'goog-inline-block' are= " + dropdowns.size());  
        // Prints first identified element's title value to console
        System.out.println("Value of the dropdown's 'title' attribute = " + dropdowns.get(0).getAttribute("title"));
        // Locate 'Next step' button by XPath: contains() and child element
        WebElement submitBtn = driver.findElement(By.xpath("//div[contains(@class,'button')]/input"));
        // Prints submitBtn's 'name' attribute's value to the console 
        System.out.println("Value of the button's 'name' attribute = " + submitBtn.getAttribute("name"));
    }
     @After
      public void tearDown() throws Exception{
        // Close the Firefox browser
        driver.close();
    }
}

注意：

当心！ 即使错误地包含空格，您也可能遇到“ElementNotFound”异常。 在代码中提供的文本必须与可见文本完全匹配，这一点非常重要，我的意思是从字面上看！

• 右键点击“忘记帐户？”链接，然后选择检查元素以获取相应的 HTML 代码，如下所示：

  <a href="https://www.facebook.com/recover/initiate?lwv=111" 
  data-testid="forgot_account_link">Forgot account?</a>
  

• 让我们通过提供出现在 Facebook 页面上的文本来找到此链接。

  driver.findElement(By.xpath("//a[text()='Forgot account?']"));
  

• 如果要查找包含部分文本的所有元素，可以将contains()和text()技术结合使用。 可以使用findElements方法在列表中获取所有元素。
• 让我们尝试在同一示例中同时实现contains()和text()。 由于我们只有一个链接与该文本，因此将使用findElement方法。

  driver.findElement(By.xpath("//*[contains(text(),'Forgot')]"));
  

• 右键点击“新密码”文本框，然后选择检查元素以获取相应的 HTML 代码：

  <input class="inputtext _58mg _5dba _2ph-" data-type="text" 
  name="reg_passwd__" aria-required="1" placeholder="" id="u_0_d" 
  aria-label="New password" type="password">
  

• 让我们通过提供type属性的部分前缀值“通过”来找到此文本框。 请注意，“登录”部分中的密码字段还具有type作为password。

  <input class="inputtext" name="pass" id="pass" tabindex="2" type="password">
  

• 因此，第二个元素必须位于我们的案例中。

  driver.findElement(By.xpath("(//input[starts-with(@type,'pass')])[2]"));
  

• 示例 ：让我们找到位于 Facebook Sign Up 页面左上方的 Facebook 徽标的锚标记。
• 在检查元素后：

  <a href="https://www.facebook.com/" title="Go to Facebook Home">
     <i class="fb_logo img sp_euCDsy2vhU4 sx_af4dba">
         Facebook
     </i>
  </a>
  

• 代码：

  driver.findElement(By.xpath("//i[@class='fb_logo']/parent::a"));
  

• 将找到具有href和title属性的父节点“a”。

• 示例 ：让我们在“Facebook 注册”页面上找到文字“生日”。

  driver.findElement(By.xpath("//select[@id='month']/ancestor::div[@class='_5k_5']/preceding-sibling::div"));
  

• 带有 ID 的“select”标签，选择了“month”。 转到类“_5k_5”的祖先div标签。 然后到其前一个带有“div”标签的同级节点，其文本为“Birthday”。
• 选择该特定示例以显示可以组合多个轴以获得所需的结果。

• 示例 ：让我们找到“Facebook 注册”页面上的“登录”按钮。

   <label class="uiButton uiButtonConfirm" for="u_0_q" id="loginbutton"></label>
  

• 代码：

  driver.findElement(By.xpath("//label[@id='loginbutton']/child::input"));
  

• 标识为“loginbutton”的标签的子节点-标识为“u_0_q”的输入标签。

• 示例 ：让我们在“Facebook 注册”页面上找到“名字”文本框。

  <input id=”u_0_1″ class=”inputtext _58mg _5dba _2ph-” data-type=”text” name=”firstname” aria-required=”1″ placeholder=”” aria-label=”First name” type=”text”> </div>
  

• 代码：

  driver.findElement(By.xpath("//div[contains(@class,'uiStickyPlaceholderInput')]/descendant::input"));
  

• 类别为uiStickyPlaceholderInput的div标签的后代节点-ID 为u_o_1的输入标签已找到。

• 示例 ：让我们在“Facebook 注册”页面页脚部分中找到“登录”链接。

  <td class="_51m- hLeft plm">
     <a href="/r.php" title="Sign Up for Facebook">Sign Up</a>
  </td>
  <td class="_51m- hLeft plm">
     <a href="/login/" title="Log into Facebook">Log In</a>
  </td>
  

• 代码：

  driver.findElement(By.xpath("//td[@class='_51m- hLeft plm']/following-sibling::td/child::a"));
  

• 以下td标签的同级类_51m-hLeft plm是另一个td标签，其子对象是带有标题“登录 Facebook”的锚标签。
• 将后继同级和子级轴组合在一起，以在页脚部分中找到“登录”超链接。

• 示例 ：让我们找到“Facebook 注册”页面上的“女性”单选按钮。

  <span class="_5k_2 _5dba">
     <input id="u_0_g" name="sex" value="1" type="radio">
     <label class="_58mt" for="u_0_g">Female</label>
  </span>
  

• 代码：

  driver.findElement(By.xpath("//label[@class='_58mt']/preceding-sibling::input"));
  

• “标签”标签的前面同级是“无线电”类型的input标签。 这样就找到了所需的单选按钮。
• 这样，就涵盖了一些常用的 XPath 轴类型。

• 症状 ：没有任何东西被注册，开始浏览文章或忘记您刚刚阅读的内容。
• 诊断 ：您的大脑超负荷。
• 补救 ：休息一下！ 但是记得很快回来😉

1. 打开 Firefox 浏览器。
2. 导航到 www.facebook.com
3. 使用text()找到“忘记帐户？”链接
4. 将链接文本打印到控制台
5. 使用starts-with()找到“新密码”文本框
6. 输入值“test1234!”
7. 使用子轴找到“登录”按钮
8. 将值属性打印到控制台
9. 使用父轴找到 Facebook 徽标
10. 将其title属性的值打印到控制台
11. 在页脚部分的“兄弟姐妹”轴中找到“登录”链接
12. 将其title属性的值打印到控制台
13. 使用上一个同级轴找到“女性”单选按钮
14. 点击单选按钮
15. 使用祖先轴找到文本“生日”
16. 将其文本打印到控制台
17. 使用后代轴找到“名字”文本框
18. 输入值“首先测试”
19. 验证 Eclipse IDE 控制台的输出屏幕和 JUnit 窗格是否成功

package com.blog.junitTests;
import java.util.concurrent.TimeUnit;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ElementLocatorTest4b {
    // Declaring variables
    private WebDriver driver;
    private String baseUrl;
    @Before
    public void setUp() throws Exception {
        // Selenium version 3 beta releases require system property set up
        System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe");
        // Create a new instance for the class FirefoxDriver
        // that implements WebDriver interface
        driver = new FirefoxDriver();
        // Implicit wait for 5 seconds
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
        // Assign the URL to be invoked to a String variable
        baseUrl = "https://www.facebook.com/";
    }
    @Test
    public void testPageTitle() throws Exception {
        // Open baseUrl in Firefox browser window
        driver.get(baseUrl);
        // Locate 'Forgot Account' link using XPath: text()
        WebElement forgotAccLink = driver.findElement(By.xpath("//*[contains(text(),'Forgot')]"));
        // Prints the link text to the console
        System.out.println("Link text: " + forgotAccLink.getText());
        // Locate 'New password' text box by XPath: using starts-with()
        WebElement passwordNew = driver.findElement(By.xpath("(//input[starts-with(@type,'pass')])[2]"));
        // Clear the default placeholder or any value present
        passwordNew.clear();
        // Enter/type the value to the text box
        passwordNew.sendKeys("test1234!");
        // Locate 'Log In' button using XPath: child axis
        WebElement logIn = driver.findElement(By.xpath("//label[@id='loginbutton']/child::input"));
        // Prints 'value' attribute to console
        System.out.println("Child axis: " + logIn.getAttribute("value"));
        // Locate 'Facebook' logo using XPath: parent axis
        WebElement fbLogo = driver.findElement(By.xpath("//i[contains(@class,'fb_logo')]/parent::a"));
        // Prints 'title' attribute's value to console
        System.out.println("Parent axis: " + fbLogo.getAttribute("title"));
        // Locate 'Log In' link in footer section using XPath: following-sibling axis
        WebElement loginFooter = driver.findElement(By.xpath("//td[@class='_51m- hLeft plm']/following-sibling::td/child::a"));
        //Prints 'title' attribute's value to console
        System.out.println("Following-sibling: " + loginFooter.getAttribute("title"));
        // Locate 'female' radio button using XPath: preceding-sibling axis
        WebElement femaleRadioBtn = driver.findElement(By.xpath("//label[@class='_58mt']/preceding-sibling::input"));
        // Click the radio button
        femaleRadioBtn.click();
        // Locate 'Birthday' text using XPath: ancestor axis
        WebElement birthday = driver.findElement(By.xpath("//select[@id='month']/ancestor::div[@class='_5k_5']/preceding-sibling::div"));
        //Prints text to console
        System.out.println("Ancestor axis: " + birthday.getText());
        // Locate 'first name' test box using XPath: descendant axis
        WebElement firstName = driver.findElement(By.xpath("//div[contains(@class,'uiStickyPlaceholderInput')]/descendant::input"));
        firstName.clear();
        firstName.sendKeys("test first");
    }
    @After
    public void tearDown() throws Exception {
        // Close the Firefox browser
        driver.close();
    }
}