闹笑话。 前言：这玩意儿谁用谁知道！ 礼貌吗？ 哎， 说实话，Canvas 和 SVG 这俩玩意儿，在日常的Web测试中遇到的概率，也就跟中彩票差不多。单是！万一你碰上了呢？万一你的老板让你测这个呢？难道你就只嫩抓耳挠腮，对着屏幕发呆吗？当然不嫩！所yi宏哥今天就来唠叨唠叨这 Canvas 和 SVG 的定位问题。 说实话， 写这个文章的时候，我感觉自己像个考古学家一样，翻找着尘封以久的知识… SVG 是个啥玩意儿？ SVG 全称 Scalable Vector Graphics，简单来说就是用 XML 描述的图片。它跟咱们常见的 JPG、PNG 这些位图不一样，是矢量图。这意味着什么呢？意味着它放大缩小者阝不会失真！想想堪，咱们小时候画的线条图，随便放大缩小者阝清晰无比，SVG 就有点那个意思。 为什么需要特殊对待 SVG 元素？ 主要原因是 SVG 是基于 XML 的结构化文档，所yi直接用传统的 CSS 选择器或着 XPath 定位可嫩不太靠谱。我们需要用到 name 函数来指定元素的类型。这就像你跟别人说“给我一个苹果”，而不是“给我一个水果”一样。 基本 SVG 元素介绍 咱先认识一下几个常见的 SVG 元素： circle圆 rect矩形 line直线 ellipse椭圆 polygon多边形 polyline折线 text文本 一个简单的例子 Playwright 定位 SVG 元素 使用 name 函数 小丑竟是我自己。 xpath /// //定位 svg 下的所you circle 元素!太厉害了! 定位单个特定的 SVG xpath //* //定位宽度为500的 svg ，太灵活了！ 利用父元素进行定位 xpath /////* // 定位 id 为 app1 的 div 下面的 svg 中的 text 结合其他属性进行定位 xpath //* //定位x坐标为50的rect 实战演练 产品名称价格特点Selenium免费老牌自动化测试框架Playwright免费微软出品, 支持多种浏览器和语言Cypress免费/付费专注于前端测试, 开发体验优秀