Selenium 简明教程

Selenium WebDriver - Locator Strategies

一旦应用程序启动，用户就会与页面上的元素进行交互，比如单击链接/按钮、在输入框中输入文本、从下拉选项中选择一个选项等等，以此创建自动测试用例。第一步是借助其属性来识别元素。可以使用定位器来进行此识别，即 id、name、class name、xpath、css、tagname、link text 和 partial link。

Id Locator

元素的 id 属性可用于识别元素。在 Java 中，方法 findElement(By.id("<value of id attribute>")) 用于使用 id 属性的值来查找元素。使用此方法，应该识别出第一个与属性 id 的值匹配的元素。如果没有值类似于 id 属性的元素，则会引发 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.id("id value”));

让我们看看在 Name 旁边输入框的 html 代码，在下图中进行了高亮显示：

上图中突出显示的编辑框有一个具有值 name 的 id 属性。让我们尝试在该编辑框中输入文本 Selenium 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorID {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // Opening the webpage where we will identify edit box enter text
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify the search box with id locator then enter text Selenium
      WebElement i = driver.findElement(By.id("name"));
      i.sendKeys("Selenium");

      // Get the value entered
      String text = i.getAttribute("value");
      System.out.println("Entered text is: " + text);

      // Close browser
      driver.quit();
   }
}

它将显示以下输出 −

Entered text is: Selenium

Process finished with exit code 0

输出显示 Process with exit code 0 消息，表示上述代码成功执行。此外，在编辑框中输入的值（从 getAttribute 方法获取） - Selenium 在控制台中收到。

Name Locator

元素的名称属性可用于识别元素。在 Java 中，方法 findElement(By.name("<value of name attribute>")) 用于使用名称属性的值来查找元素。使用此方法，应该识别出第一个与属性 name 的值匹配的元素。如果没有值类似于 name 属性的元素，则会引发 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.name("name value"));

让我们调查前面讨论的同一个输入框的 html 代码，如下图所示：

上图中突出显示的编辑框有一个具有值 name 的名称属性。让我们在该编辑框中输入文本 Selenium 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorName {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // Opening the webpage where we will identify edit box enter text
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify the search box with name locator to enter text
      WebElement i = driver.findElement(By.name("name"));
      i.sendKeys("Selenium");

      // Get the value entered
      String text = i.getAttribute("value");
      System.out.println("Entered text is: " + text);

      // Close browser
      driver.quit();
   }
}

它将显示以下输出 −

Entered text is: Selenium

在编辑框中输入的值 - Selenium 在控制台中打印出来。

Class Name Locator

元素的类名称属性可用于识别元素。在 Java 中，方法 findElement(By.className("<value of class name attribute>")) 用于使用类名称属性的值来查找元素。使用此方法，将识别出第一个与属性类名称的值匹配的元素。如果没有值类似于名称属性的元素，则会引发 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.className("class name value"));

让我们看看下图中突出显示的 Click Me 的 html 代码：

它有一个类名称属性，值为 btn-primary 。单击该元素后，我们将在该页面上获得 You have done a dynamic click 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorClassName {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // Opening the webpage where we will identify button to click
      driver.get("https://www.tutorialspoint.com/selenium/practice/buttons.php");

      // Identify button with class name to click
      WebElement i = driver.findElement(By.className("btn-primary"));
      i.click();

      // Get text after click
      WebElement e = driver.findElement(By.xpath("//*[@id='welcomeDiv']"));
      String text = e.getText();
      System.out.println("Text is: " + text);

      // Closing browser
      driver.quit();
   }
}

它将显示以下输出 −

Text is: You have done a dynamic click

我们已经通过控制台中的信息获取了单击 Click Me 按钮后的文本 - Text is: You have done a dynamic click 。

TagName Locator

元素的标签名可以用于标识元素。在 Java 中，方法 findElement(By.tagName("<tagname 的值>")) 用于定位具有 tagname 值的元素。使用此方法，可以标识出第一个具有匹配 tagname 值的元素。如果不存在具有相似 tagname 值的元素，则会抛出 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.tagName("tag name value"));

让我们获取文本 Name 旁边的输入框的 html 代码，如下面的图片所示：

上面图片中高亮的输入框具有 input 的标签名。让我们尝试在该输入框中输入文本 Java 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorTagName {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 10 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // launch a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify input box with tagname locator
      WebElement t = driver.findElement(By.tagName("input"));

      // then enter text
      t.sendKeys("Java");

      // Get the value entered
      String text = t.getAttribute("value");
      System.out.println("Entered text is: " + text);

      // Closing browser
      driver.quit();
   }
}

它将显示以下输出 −

Entered text is: Java

在编辑框 Java 中输入的值已输出到控制台中。

Link Text Locator

链接的链接文本可以用于标识该链接。在 Java 中，方法 findElement(By.linkText("<链接文本的值>")) 用于定位具有链接文本值的链接。使用此方法，可以标识出第一个具有匹配链接文本值的元素。如果不存在具有相似链接文本值的元素，则会抛出 NoSuchElementException。该方法最常用于定位网页上的链接。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.linkText("value of link text"));

让我们查看下图中高亮的 Created 链接的 html 代码：

它的链接文本值为 Created 。让我们单击它，然后我们会在页面上获取 Link has responded with status 201 and status text Created 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorLinkText {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 10 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // launch a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/links.php");

      // Identify link with tagname link text
      WebElement t = driver.findElement(By.linkText("Created"));

      // then click
      t.click();

      // Get the text
      WebElement e = driver.findElement(By.xpath("/html/body/main/div/div/div[2]/div[1]"));
      String text = e.getText();
      System.out.println("Text is: " + text);

      // Close browser
      driver.quit();
   }
}

它将显示以下输出 −

Text is: Link has responded with status 201 and status text Created

我们已通过单击 Created 链接并伴有控制台中的消息 - Link has responded with status 201 and status text Created ，来获取文本。

Partial Link Text Locator

链接的部分链接文本可以用于标识链接。在 Java 中，方法 findElement(By.partialLinkText(“<部分链接文本的值>”)) 用于定位具有部分链接文本值的链接。使用此方法，可以标识出第一个具有匹配部分链接文本值的元素。如果不存在具有相似部分链接文本值的元素，则会抛出 NoSuchElementException。该方法最常用于定位网页上的链接。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.partialLinkText("partial link text value"));

让我们研究下图中高亮的 Bad Request 链接的 html 代码：

它的链接文本值为 Bad Request 。单击 IT，然后我们将在页面上获取文本 Link has responded with status 400 and status text Bad Request 。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class LocatorPartialLinkText {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 10 secs
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

      // launch a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/links.php");

      // Identify link with tagname partial link text
      WebElement t = driver.findElement(By.partialLinkText("Bad"));

      // then click
      t.click();

      // Get the text
      WebElement e = driver.findElement(By.xpath("/html/body/main/div/div/div[2]/div[4]"));
      String text = e.getText();
      System.out.println("Text is: " + text);

      // Closing browser
      driver.quit();
   }
}

它将显示以下输出 −

Text is: Link has responded with status 400 and status text Bad Request

我们已通过单击 Bad Request 链接并伴有控制台中的消息 - Link has responded with status 400 and status text Bad Request ，来获取文本。

CSS Locator

元素的 css 定位器值可以用于标识该元素。在 Java 中，方法 findElement(By.cssSelector("<css 选择器的值>")) 用于定位具有 css 选择器值的元素。使用此方法，可以标识出第一个具有匹配 css 选择器值的元素。如果不存在具有相似 css 选择器值的元素，则会抛出 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("value of css selector"));

创建 css 表达式的规则在下面讨论 −

要使用 css 标识元素，表达式应为 tagname[attribute='value']。
我们还可以专门使用 id 属性来创建 css 表达式。使用 id 时，css 表达式的格式应为 tagname#id。例如，input#txt [其中 input 是标签名，txt 是 id 属性的值]。
使用 class 时，css 表达式的格式应为 tagname.class。例如，input.cls-txt [其中 input 是标签名，cls-txt 是 class 属性的值]。
如果父元素有 n 个子元素，并且我们要标识第 n 个子元素，则 css 表达式应具有 nth-of –type(n)。类似地，要标识最后一个子元素，css 表达式应为 ul.reading li:last-child。

对于其值动态变化的属性，我们可以使用 ^= 来查找其属性值以特定文本开头的元素。例如，input[name^='qa'] 其中，input 是标签名，name 属性的值以 qa 开头。

对于其值动态变化的属性，我们可以使用 $ = 来查找其属性值以特定文本结尾的元素。例如，input[class $ ='txt'] 其中，input 是标签名，class 属性的值以 txt 结尾。

对于值动态变化的属性，我们可以使用 = to locate an element whose attribute value contains a specific sub-text. For example, input[name ='nam']。此处，input 是标签名称，而 name 属性的值包含子文本 nam。

让我们获取 Name 标签侧面的输入框的 html 代码，如下所示：

上图中突出显示的编辑框有一个 name 属性，其值为 name ，css 表达式应为 input[name='name'] 。

Xpath Locator

元素的 xpath 定位器值可用于其标识。在 Java 中，方法 findElement(By.xpath("<xpath 值>")) 用于使用 xpath 值定位元素。使用此方法，将识别具有匹配 xpath 值的第一个元素。如果没有任何具有类似 xpath 值的元素，则将抛出 NoSuchElementException。

Syntax

Webdriver driver = new ChromeDriver();
driver.findElement(By.xpath("value of xpath”));

要使用 xpath 定位元素，表达式应为 //tagname[@attribute='value']。xpath 有两种类型，分别是相对的和绝对的。绝对 xpath 以 / 符号开头，并从根节点开始到要定位的元素。

For example −

/html/body/div[1]/div[2]/div[1]/input

相对 xpath 以 // 符号开头，不从根节点开始。

For example −

//img[@alt='TutorialsPoint']

让我们从根开始深入了解突出显示的链接的 html 代码 - Home 。

该元素的绝对 xpath 为：

/html/body/main/div/div/div[2]/p[1]/a

元素 Home 的相对 xpath 为：

//a[@href='https://www.tutorialspoint.com/index.htm']

Xpath Functions

还提供有帮助构建相对 xpath 表达式的函数。

text()

它用于定位网页上可见文本的元素。 Home 链接的 xpath 表达式为：

//*[text()='Home']

starts-with()

它用于 identification 其属性值以特定文本开头的元素。此函数通常用于在每个页面加载时其值都会发生变化的属性。

让我们调查链接 Moved 的 html：

xpath 表达式为：

//a[starts-with(@id, 'mov')].

Conclusion

这结束了我们对 Selenium WebDriver 定位器策略教程的全面介绍。我们从描述 Id 定位器、名称定位器、类名定位器、标签名定位器、链接文本定位器、部分链接文本定位器、CSS 定位器、XPath 定位器以及阐述如何将它们与 Selenium 一起使用的示例开始。这使你具备对 Selenium WebDriver 定位器策略的深入了解。明智之举是继续实践你所学到的内容，并探索与 Selenium 相关的其他内容，以加深你的理解并拓宽你的视野。