Selenium 简明教程
Selenium WebDriver - Color Support
Selenium Webdriver 可以使用 Color 类检测网页上网页元素的颜色。此外,若要检测颜色、背景色和边框等特性,我们将使用 getCssValue() 方法。
若要获取元素的颜色、背景色、边框颜色和颜色,我们需要将它们作为参数传递给 getCssValue() 方法。它将以 rgba 格式返回该值。我们将借助 Color 类将 rgba 值转换为十六进制。
Identify Element on a Web Page
启动 Chrome 浏览器,然后在该浏览器上打开一个应用程序。右键单击网页,然后单击“检查”按钮。之后,该页面的整个 HTML 代码将可用。若要识别页面上的元素,请单击 HTML 代码顶部可用的左上箭头,如下所示。
单击并指向该元素(高亮显示的元素)后,其 HTML 代码就会出现。同时,颜色和背景色信息将出现在 Styles 选项卡中。
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 。