Selenium 简明教程

Selenium WebDriver - Color Support

Selenium Webdriver 可以使用 Color 类检测网页上网页元素的颜色。此外，若要检测颜色、背景色和边框等特性，我们将使用 getCssValue() 方法。

Selenium Webdriver can be used to detect the color of a web element on a web page using the Color class. Also, to detect the features like the color, background-color, and border we would use the getCssValue() method.

若要获取元素的颜色、背景色、边框颜色和颜色，我们需要将它们作为参数传递给 getCssValue() 方法。它将以 rgba 格式返回该值。我们将借助 Color 类将 rgba 值转换为十六进制。

To get the color, background-color, border-color and color of an element, we would need to pass them as a parameter to the getCssValue() method. It would return the value in rgba format. We would take the help of the Color class to convert rgba value to Hex.

Identify Element on a Web Page

启动 Chrome 浏览器，然后在该浏览器上打开一个应用程序。右键单击网页，然后单击“检查”按钮。之后，该页面的整个 HTML 代码将可用。若要识别页面上的元素，请单击 HTML 代码顶部可用的左上箭头，如下所示。

Launch the Chrome browser, and open an application on that browser. Right click on the web page then click on the Inspect button. After which, the entire HTML code for the page would be available. To identify an element on a page, click on the left upward arrow, available to the top of the HTML code as highlighted below.

单击并指向该元素（高亮显示的元素）后，其 HTML 代码就会出现。同时，颜色和背景色信息将出现在 Styles 选项卡中。

Once, we had clicked and pointed the arrow to the element (highlighted element) its HTML code would appear. Along with that, the color, and background-color information would be available within the Styles tab.

Identify Background & Color of an Element

让我们取一个出现在上面页面上的按钮 Login 的示例。在“样式”选项卡中，我们发现其颜色值为“#fff”，背景色值为“#0d6efd”，边框色值为“#0d6efd”。让我们使用 getCssValue() 方法获取该元素的背景色和颜色。

Let us take an example of the button Login appearing on the above page. In the Style tab, we found its color value as #fff, background-color as #0d6efd and border-color as #0d6efd. Let us get the background color, and color of that element using the getCssValue() method.

Example

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 org.openqa.selenium.support.Color;
import java.util.concurrent.TimeUnit;

public class ColorSupports {
   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);

      // launching a browser and open a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

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

      // get element color in rgba format
      String s = l.getCssValue("color");
      System.out.println("rgba code for color: " + s);

      // convert rgba to hex using Color class
      String c = Color.fromString(s).asHex();
      System.out.println("Hex format for Element Color is: " + c);

      // get element background color in rgba format
      String b = l.getCssValue("background-color");
      System.out.println("rgba code for background-color: " + b);

      // convert rgba to hex using Color class
      String g = Color.fromString(b).asHex();
      System.out.println("Hex format Element Background-Color is: " + g);

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

rgba code for color: rgba(255, 255, 255, 1)
Hex format for Element Color is: #ffffff
rgba code for background-color: rgba(13, 110, 253, 1)
Hex format Element Background-Color is: #0d6efd

Process finished with exit code 0

在上面的示例中，我们以 rgba 格式捕获了按钮的颜色，并在控制台中收到了消息 - rgba code for color: rgba(255, 255, 255, 1) 。然后将 rgba 格式的颜色转换为十六进制格式并在控制台中获得了消息 - Hex format for Element Color is: #ffffff 。

In the above example, we captured the color of the button in rgba format and received the message in the console - rgba code for color: rgba(255, 255, 255, 1). Then converted the color in rgba format to Hex format and obtained the message in the console - Hex format for Element Color is: #ffffff.

接下来，我们以 rgba 格式捕获了同一按钮的背景色并在控制台中收到了消息 - rgba code for background-color: rgba(13, 110, 253, 1) 。然后将 rgba 格式的背景色转换为十六进制格式并在控制台中获得了消息 - Hex format Element Background-Color is: #0d6efd 。

Next we captured the background color of the same button in rgba format and received the message in the console - rgba code for background-color: rgba(13, 110, 253, 1). Then converted the background color in rgba format to Hex format and obtained the message in the console - Hex format Element Background-Color is: #0d6efd.

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

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

Identify Border Color of an Element

让我们再取一个之前讨论过的同一 Login 按钮的示例，并使用 getCssValue() 方法获取边框颜色。

Let us take another example of the same Login button discussed previously, and get the border color using the getCssValue() method.

Example

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 org.openqa.selenium.support.Color;
import java.util.concurrent.TimeUnit;

public class BorderColorSupports {
   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);

      // launching a browser and open a URL
      driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");

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

      // get element border color in rgba format
      String s = l.getCssValue("border-color");
      System.out.println("rgba code for border color: " + s);

      // convert rgba to hex using Color class
      String g = Color.fromString(s).asHex();
      System.out.println("Hex format for element Border-Color is: " + g);

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

在 pom.xml 文件中添加的依赖项：

Dependencies added in pom.xml file −

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>org.example</groupId>
   <artifactId>SeleniumJava</artifactId>
   <version>1.0-SNAPSHOT</version>

   <properties>
      <maven.compiler.source>16</maven.compiler.source>
      <maven.compiler.target>16</maven.compiler.target>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
   <dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>4.11.0</version>
      </dependency>
   </dependencies>
</project>

rgba code for border color: rgb(13, 110, 253)
Hex format for element Border-Color is: #0d6efd

在上面的示例中，我们以 rgba 格式捕获了按钮的边框颜色并在控制台中收到了消息 - rgba code for color: rgba(13, 110, 253) 。然后将 rgba 格式的颜色转换为十六进制格式并在控制台中获得了消息 - Hex format for element Border-Color is: #0d6efd 。

In the above example, we captured the border color of the button in rgba format and received the message in the console - rgba code for color: rgba(13, 110, 253). Then converted the color in rgba format to Hex format and obtained the message in the console - Hex format for element Border-Color is: #0d6efd.

Conclusion

这就结束了我们对 Selenium Webdriver 颜色支持教程的全面介绍。我们从描述网页上的标识元素开始，并逐步讲解了如何使用 Selenium Webdriver 识别元素的边框颜色、背景颜色和颜色。这使你对 Selenium Webdriver 颜色支持有了深入的了解。明智的做法是不断实践你所学到的知识，并探索与 Selenium 相关的其他知识以加深你的理解并拓展你的视野。

This concludes our comprehensive take on the tutorial on Selenium Webdriver Color Support. We’ve started with describing identify elements on a web page, and walked through examples on how to identify border color, background color, and color of elements with Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Color Support. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.