Selenium 简明教程

Selenium WebDriver - Color Support

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

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

Identify Element on a Web Page

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

selenium color support 1

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

selenium color support 2

Identify Background & Color of an Element

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

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

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

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

Identify Border Color of an Element

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

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 文件中添加的依赖项:

<?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

Conclusion

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