使用Playwright如何通过d值测试SVG图像？

在自动化测试中，要验证SVG里各个path的d值，核心思路是定位到目标元素后提取属性值，再和预期值做断言匹配，以下是几种常用测试工具的实现方式：

Selenium（Python版） #

• 先定位到SVG元素，再遍历内部的所有path标签，逐个获取d属性并验证：

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("你的目标页面URL")

# 定位SVG元素
svg_element = driver.find_element(By.CLASS_NAME, "SecretClass")
# 获取所有path子元素
path_elements = svg_element.find_elements(By.TAG_NAME, "path")

# 预期的d值列表，顺序和SVG里的path对应
expected_d_values = [
    "M460 190L460 460L615 325L460 190Z",
    "M90 356L90 283L487 283L487 356L90 356Z",
    "M162 356L162 -68L88 -68L88 356L162 356Z"
]

# 逐个验证
for index, path in enumerate(path_elements):
    actual_d = path.get_attribute("d")
    assert actual_d == expected_d_values[index], f"第{index+1}个path的d值不匹配，预期：{expected_d_values[index]}，实际：{actual_d}"

driver.quit()

Selenium（Java版） #

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

public class SVGPathValidation {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        driver.get("你的目标页面URL");

        WebElement svgElement = driver.findElement(By.className("SecretClass"));
        List<WebElement> pathElements = svgElement.findElements(By.tagName("path"));

        String[] expectedDValues = {
            "M460 190L460 460L615 325L460 190Z",
            "M90 356L90 283L487 283L487 356L90 356Z",
            "M162 356L162 -68L88 -68L88 356L162 356Z"
        };

        for (int i = 0; i < pathElements.size(); i++) {
            String actualD = pathElements.get(i).getAttribute("d");
            assert actualD.equals(expectedDValues[i]) : "第" + (i+1) + "个path的d值不匹配，预期：" + expectedDValues[i] + "，实际：" + actualD;
        }

        driver.quit();
    }
}

Cypress #

• 直接通过CSS定位SVG下的path，提取属性后做断言：

cy.visit("你的目标页面URL");

// 预期的d值数组
const expectedDValues = [
  "M460 190L460 460L615 325L460 190Z",
  "M90 356L90 283L487 283L487 356L90 356Z",
  "M162 356L162 -68L88 -68L88 356L162 356Z"
];

// 遍历每个path并验证
cy.get(".SecretClass path").each(($el, index) => {
  expect($el.attr("d")).to.equal(expectedDValues[index]);
});

注意事项 #

• 确保SVG元素已经加载完成后再执行定位操作，避免因元素未渲染导致的定位失败，可以通过显式等待（Selenium）或Cypress的内置等待机制处理。
• 如果d值存在空格、换行等格式差异，可先对实际值和预期值做格式化处理（比如去除多余空格）后再做断言。

内容的提问来源于stack exchange，提问作者Tal Angel