Selenium 简明教程

Selenium WebDriver - WebElement Commands

Selenium Webdriver 可用于提取网页上特定元素的多种信息。例如，我们可以验证网页上的元素是否可用/不可用、已启用/已禁用或已选择/未选择。

Selenium Webdriver can be used to extract multiple information about a particular element on a web page. For example, we can validate if an element is available/unavailable, enabled/disabled or selected/unselected on a web page.

Basic WebElement Commands in Selenium Webdriver

To verify if an element is available on a web page, we can take the help of the isDisplayed() method. If the element is available, isDisplayed() would return true, else false.
To verify if an element is selected on a web page, we can take the help of the isSelected() method. If the element is selected, isSelected() would return true, else false.
To verify if an element is enabled on a web page, we can take the help of the isEnabled() method. If the element is enabled, isEnabled() would return true, else false.
To get the tag name of an element, we can take the help of the getTagName() method.
To get the x, and y coordinates of an element, we can take the help of the getRect() method.
To get the background-color, or color of an element, we can take the help of the getCssValue() method.
To fetch runtime value of the element associated with DOM we can take the help of the getAttribute() method and pass value as a parameter to that method.
To get the text of an element, we can take the help of the getText() method.

Identify Radio Buttons in HTML

在网页上单击鼠标右键，然后在 Chrome 浏览器中单击“检查”按钮。要检查页面上的单选按钮，单击可见 HTML 代码顶部可用的左上方箭头，如下所示。

Right click on the webpage, and then click on the Inspect button in the Chrome browser. For inspecting a radio button on a page, click on the left upward arrow, available at the top of the visible HTML code as highlighted below.

一旦我们单击并指向单选按钮（在下图中突出显示），就看到了其 HTML 代码，此代码反映了输入标签名和类型属性的值为单选按钮。

Once we had clicked and pointed the arrow to the radio button (highlighted in the below image), its HTML code was seen, reflecting both the input tagname and value of type attribute as radio.

Example 1

让我们以上述页面为例，使用 click() 方法单击其中一个单选按钮。然后，使用上述讨论过的方法验证该单选按钮是否可用、已启用且已选中。

Let us take an example of the above page, where we would click one of the radio buttons with the help of the click() method. Then we would verify if the radio button is available, enabled and selected using the above discussed methods.

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 ValidatingRadioButtons {
   public static void main(String[] args) throws InterruptedException {

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

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

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

      // identify radio button then click
      WebElement radiobtn = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/form/div[1]/input"));
      radiobtn.click();

      // verify if radio button is selected
      boolean result = radiobtn.isSelected();
      System.out.println("Checking if a radio button is selected: " + result);

      // verify if radio button is displayed
      boolean result1 = radiobtn.isDisplayed();
      System.out.println("Checking if a radio button is displayed: " + result1);

      // verify if radio button is enabled
      boolean result2 = radiobtn.isEnabled();
      System.out.println("Checking if a radio button is enabled: " + result2);

      // identify another radio button
      WebElement radiobtn1 = driver.
         findElement(By.xpath("/html/body/main/div/div/div[2]/form/div[5]/input"));

      // verify if radio button is disabled
      boolean result3 = radiobtn1.isEnabled();
      System.out.println("Checking if the other radio button is disabled: " + result3);

      // verify if radio button is unselected
      boolean result4 = radiobtn1.isEnabled();
      System.out.println("Checking if the other radio button is unselected: " + result4);

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

Checking if a radio button is selected: true
Checking if a radio button is displayed: true
Checking if a radio button is enabled: true
Checking if the other radio button is disabled: false
Checking if the other radio button is unselected: false

Process finished with exit code 0

在上面的示例中，我们首先单击了一个单选按钮，然后使用消息 - Checking if a radio button is selected: true, Checking if a radio button is displayed: true, Checking if a radio button is enabled: true 验证该单选按钮在控制台中是否可用、选中和启用。

In the above example, we had first clicked on a radio button, and then verified if the radio button was available, selected, and enabled in the console with the message - Checking if a radio button is selected: true, Checking if a radio button is displayed: true, Checking if a radio button is enabled: true.

然后，我们针对另一个单选按钮验证其是否禁用且未选中，并在控制台中显示消息 - Checking if the other radio button is disabled: false, and Checking if the other radio button is unselected: false 。

Then we had validated for another radio button if it is disabled and unselected with the message in the console - Checking if the other radio button is disabled: false, and Checking if the other radio button is unselected: false.

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

Example 2

我们可以使用 getTagName() 方法获取单选按钮的标签名。

We can get the tag name of a radio button using the getTagName() method.

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 RadioButtonTagNames {
   public static void main(String[] args) throws InterruptedException {

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

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

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

      // identify radio button then click
      WebElement radiobtn = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/form/div[1]/input"));

      String text = radiobtn.getTagName();
      System.out.println("Get the radio button tagname: " + text);

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

Get the radio button tagname: input

Process finished with exit code 0

在上面的示例中，我们使用消息 - Get the radio button tagname: input 在控制台中获取了单选按钮的标签名。

In the above example, we had obtained the tagname of the radio button in the console with the message - Get the radio button tagname: input.

Example 3

让我们来看下图的另一个示例，我们使用 getRect() 方法获取页面上文本 Selenium - Automation Practice Form 的高度、宽度、x 和 y 坐标。

Let us take another example in the below image, where we would get the height, width, x, and y coordinates of the text Selenium - Automation Practice Form on the page using the getRect() method.

代码实现

Code Implementation

package org.example;

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

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

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

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

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/radio-button.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement(By.xpath("/html/body/div/header/div[2]/h1"));

      Rectangle res = e.getRect();

      // Getting height, width, x, and y coordinates of element
      System.out.println("Getting height: " + res.getHeight());
      System.out.println("Getting width: " + res.getWidth());
      System.out.println("Getting x-cordinates: " + res.getX());
      System.out.println("Getting y-cordinates: " + res.getY());

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

Getting height: 29
Getting width: 395
Getting x-cordinates: 453
Getting y-cordinates: 18

Process finished with exit code 0

在上面的示例中，我们使用消息 - Getting height: 29, Getting width: 395, Getting x-cordinates: 453, and Getting y-cordinates: 18 在控制台中获取了文本的高度、宽度、x 和 y 坐标。

In the above example, we had obtained the height, width, x and y coordinates of the text in the console with the message - Getting height: 29, Getting width: 395, Getting x-cordinates: 453, and Getting y-cordinates: 18.

Example 4

让我们来看下图的另一个示例，我们将在突出显示的元素 Login （在“样式”部分中描绘）上设置背景颜色。我们将使用 getCssValue() 方法，并将背景颜色作为参数传入该方法。

Let us take another example in the below image, where we would background color the highlighted element Login (depicted in Styles section). We would take the help of the getCssValue() method and pass background-color as a parameter to that method.

代码实现

Code Implementation

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 ElementsCSSProperty {
   public static void main(String[] args) throws InterruptedException {

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

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

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement(By.xpath("//*[@id='practiceForm']/div[11]/input"));

      // Getting background color of the element
      System.out.println ("Getting background color of element: " + e.getCssValue("background-color"));

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

Getting background color of element: rgba(13, 110, 253, 1)

Process finished with exit code 0

在上面的示例中，我们使用消息 - Getting background color of element: rgba(13, 110, 253, 1) 在控制台中以 rgb 格式获取了页面上某个元素的背景。

In the above example, we had obtained the background of an element on the page in rgb format in the console with the message - Getting background color of element: rgba(13, 110, 253, 1).

Example 5

让我们来看一下下面页面的示例，我们首先使用 sendKeys() 方法在输入框中输入文本 Selenium 。然后，我们使用 getAttribute() 方法获取与 DOM 关联的元素的运行时值，并将值作为参数传入。

Let us take an example of the below page, where we would first enter the text Selenium in the input box with the help of the sendKeys() method. Then we would fetch the runtime value of the element associated with DOM using the getAttribute() method and pass value as a parameter.

代码实现

Code Implementation

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 InputBoxs {
   public static void main(String[] args) throws InterruptedException {

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

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

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement em = driver.findElement
         (By.xpath("//*[@id='name']"));

      // enter text in input box
      em.sendKeys("Selenium");

      // Get the value entered
      String t = em.getAttribute("value");
      System.out.println("Text entered: " + t);

      // clear the text entered
      em.clear();

      // Get no text after clearing text
      String t1 = e.getAttribute("value");
      System.out.println("Get text after clearing: " + t1);

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

Entered text is: Selenium
Get text after clearing:

Process finished with exit code 0

在上面的示例中，我们首先在输入框中输入文本 Selenium ，还使用消息 - Text entered: Selenium 来检索在控制台中输入的值。然后清除输入的值，输入框中没有值。因此，我们还在控制台中收到了消息： Get text after clearing: 。

In the above example, we had first entered the text Selenium in the input box, and also retrieved the value entered in the console with the message- Text entered: Selenium. Then cleared the value entered and there was no value in the input box. Hence, we had also received the message in the console: Get text after clearing:.

Example 6

我们以下面的页面为例，我们将在 getText() 方法的帮助下获得高亮元素的文本 - Selenium - Automation Practice Form 。

Let us take an example of the below page, where we would obtain the text of the highlighted element - Selenium - Automation Practice Form with the help of the getText() method.

代码实现

Code Implementation

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 ElementsText {
   public static void main(String[] args) throws InterruptedException {

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

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

      // Opening the webpage
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

      // Identify the element with xpath locator
      WebElement e = driver.findElement
         (By.xpath("/html/body/div/header/div[2]/h1"));

      // Getting text of the element
      System.out.println
         ("Getting element text: " + e.getText());

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

Getting element text: Selenium - Automation Practice Form

Process finished with exit code 0

在上面的示例中，我们通过消息 - Getting element text: Selenium - Automation Practice Form 在控制台获得了某个元素的文本。

In the above example, we obtained the text of an element in the console with the message - Getting element text: Selenium - Automation Practice Form.

Conclusion

这结束了我们对 Selenium WebDriver WebElement 命令教程的全面讲解。我们首先描述了识别 HTML 中的单选按钮，Selenium Webdriver 中的基本 Web 元素命令，以及说明如何在 Selenium Webdriver 中使用它们的示例。这使您对 WebDriver WebElement 命令有了深入的了解。明智的做法是坚持实践您学到的知识并探索与 Selenium 相关的其他内容，以加深您的理解并拓展视野。

This concludes our comprehensive take on the tutorial on Selenium WebDriver WebElement Commands. We’ve started with describing identify radio buttons in HTML, basic web element commands in Selenium Webdriver, and examples to illustrate how to use them in Selenium Webdriver. This equips you with in-depth knowledge of the WebDriver WebElement Commands. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.