《最新出炉》系列初窥篇-Python+Playwright自动化测试-63 - Canvas和SVG元素定位

已于 2024-08-07 08:55:32 修改
阅读量898 收藏 15
点赞数 16
分类专栏： python+playwright自动化测试 文章标签： python 开发语言 自动化 运维 测试工具 测试覆盖率
于 2024-08-01 08:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23827149/article/details/140837827
版权

1.简介

今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。

2.SVG简介

svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图，这种元素比较特殊，需要通过 ​name​() 函数来进行定位。

3.svg的基本使用

svg是在html和css里面操作的，不是在js里面。

<body>
　　<svg width="500" height="500"> </svg>
</body>
3.1 绘制直线

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
    </style>
</head>
<body>
　　<svg width="500" height="500">
        <!-- line（直线）前面两个值是起始点坐标，后面两个值是终点坐标 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

3.2 绘制矩形

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
    </style>
</head>
<body>
　　<svg width="500" height="500">
        <!-- rect（矩形）前面两个值是位置，中间两个值是圆角，后面两个值是设置宽高 -->
        <rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

3.我们来看看加上css样式，空心矩形

        rect{
            fill:transparent;  //设置为透明色
            stroke: red;　　　　//描边为红色
        }

3.3 绘制圆弧

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
    </style>
</head>
<body>
　　<svg width="500" height="500">
        <!-- cirle（圆弧）前面第一个值是设置圆的半径，后面值是位置。实心圆-->
         <!-- 可以在css设置为透明再设置描边，就会成空心圆 -->
         <circle r="50" cx="200" cy="100"></circle>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

3.4 绘制椭圆

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
    </style>
</head>
<body>
　　<svg width="500" height="500">
        <!-- ellipse(椭圆) 第一个值为圆的宽度，第二个为圆的高度，后两值为圆的位置-->
          <!-- 可以在css设置为透明再设置描边，就会成空心 -->
          <ellipse rx="60" ry="30" cx="100" cy="100"></ellipse>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

3.5 绘制折线

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
     polygon,polyline{
         fill:transparent;  //设置为透明色
          
       }
       .bi{
            fill: transparent;
             stroke: red;　　　　//描边为红色
            stroke-width: 3px;
        }
    </style>
</head>
<body>
　　<svg width="500" height="500">
       <!-- polugon(折线) 起点会跟终点相连接 -->
        <!-- 可以在css设置为透明再设置描边，就会成空心 -->
        <polygon class="bi" points="100 100, 200 50, 300 100, 400 50"  stroke-width="3"></polygon>

        <!-- poluline(折线) 起点会跟终点相连接 -->
        <!-- 可以在css设置为透明再设置描边，就会成空心 -->
        <polyline class="bi" points="100 200, 200 150, 300 200, 400 150"  stroke-width="3"></polyline>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

3.6 绘制文本

1.参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
       
    </style>
</head>
<body>
　　<svg width="500" height="500">
            <!-- text（文本）跟绝对定位一个道理 -->
            <text x="400" y="150">123</text>
      </svg>
</body>
</html>

2.浏览器打开如下图所示：

4.样式属性

4.1fill: 填充色 （默认为黑色）

4.2stroke: 线条的颜色（默认为黑色）

4.3stroke-width: 线条的宽度

4.4stroke-linecap

stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ，round和square会影响线条的长度

默认的样式就不设置了，设置跟设置没上面两样

round(圆角)

　　　　

　　　　

square（方形）

　　　　

　　　　

 stroke-linejoin：可使用的值是:miter, round, bevel, inherit 笔划连 接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继 承

round

bevel

opacity: 不透明度 0~1（可以设置填充的，也可以描边的）

　　

　　

用上面所学的知识来做个小demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black;
        }
        rect{
            fill: transparent;
            stroke: black;
            stroke-width: 5px;
        }
        polygon{
            fill: black;
        }
        circle{
            fill: transparent;
            stroke: black;
            stroke-width: 4px;
        }
        .yan{
            fill: black;
        }
        .bi{
            fill: transparent;
            stroke: black;
            stroke-width: 3px;
        }
        ellipse{
            fill: transparent;
            stroke: black;
            stroke-width: 3px;
        }
        text{
            stroke: red;
        }
    </style>
</head>
<body>
    <svg width="500" height="500">
        <rect x="100" y="100" rx="15" ry="15" width="300" height="300"></rect>
        <polygon points="110 100, 130 60, 190 95, 250 60, 310 95,370 60, 390 100"></polygon>
        <circle r="20" cx="190" cy="200"></circle>
        <circle r="20" cx="320" cy="200"></circle>
        <circle class="yan" r="5" cx="198" cy="208"></circle>
        <circle class="yan" r="5" cx="328" cy="208"></circle>
        <polygon class="bi" points="240 300, 250 260, 270 300"></polygon>
        <ellipse rx="30" ry="10" cx="260" cy="330"></ellipse>
        <text x="200" y="440">屏幕前的你很帅</text>
    </svg>
</body>
</html>

好了，宏哥就是觉得好玩就简单的了解和介绍了一下SVG。下边就正式进入今天的主题。

5.SVG元素定位

 根据前边的介绍宏哥自己写了一个demo，包含svg标签，如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北京-宏哥</title>
  <style>
      svg {
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid black
        }
       
    </style>
</head>
<body>
    <div id="app1">
    　　<svg width="500" height="200">
                <!-- text（文本）跟绝对定位一个道理 -->
                <text x="400" y="150">123</text>
          </svg>
     </div>
     <div id="app2">
    　　<svg width="500" height="200">
                <!-- text（文本）跟绝对定位一个道理 -->
                <text x="400" y="150">456</text>
          </svg>
     </div>
</body>
</html>
5.1普通定位

1.按键盘的F2或者打开浏览器的开发者模式，我们开始在控制台利用js代码进行定位。如下图所示：

2.回车后，返回结果，我们可以清楚地看到是空的，没有定位到元素。说明此法不通。

5.2name函数定位

1.按键盘的F2或者打开浏览器的开发者模式，我们开始在控制台利用js代码进行定位。如下图所示：

 2.回车后，返回结果，我们可以清楚地看到是2个svg，定位到元素。说明此法可行。

6.页面上用多个svg元素

1.如果页面上用多个svg元素，通过//*[name()="svg"] 会定位全部的svg元素，为了区分定位具体的哪个，可以通过父元素的区分。

//*[@id="box1"]//*[name()="svg"]

2.除了用父元素区分，也可以用其它属性组合，svg属性加其它属性，用 and 组合。

//*[name()="svg" and @width="500"]

7.定位svg 上的子元素

1.如果需要定位svg 下的子元素，如下图的text属性。

 2.跟前面定位方式一样，还是通过name() 函数来定位子元素的标签。

//*[@id="app1"]//*[name()="svg"]/*[name()="text"]

8.Canvas定位

Canvas定位和SVG的方法类似，宏哥就不在这里赘述了，而且一般Canvas标签中都会有id的属性，这样一来的话，定位就通过id更加方便了。

9.小结

 今天主要讲解和分享了一些Canvas和SVG的基础知识和应用，然后进入主题SVG的定位相关知识的讲解。有一种会者不难，难者不会的感觉。好了，今天时间也不早了，关于Canvas和SVG元素定位就介绍到这里，仅供小伙伴或者童鞋们参考学习。感谢您耐心的阅读！！！

 每天学习一点，今后必成大神-

往期推荐（由于跳转参数丢失了，所有建议选中要访问的右键，在新标签页中打开链接即可访问）或者微信搜索: 北京宏哥  公众号提前解锁更多干货。

Appium自动化系列，耗时80天打造的从搭建环境到实际应用精品教程测试

Python接口自动化测试教程，熬夜87天整理出这一份上万字的超全学习指南

Python+Selenium自动化系列，通宵700天从无到有搭建一个自动化测试框架

Java+Selenium自动化系列，仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架

Jmeter工具从基础->进阶->高级，费时2年多整理出这一份全网超详细的入门到精通教程

Fiddler工具从基础->进阶->高级，费时100多天吐血整理出这一份全网超详细的入门到精通教程

Pycharm工具基础使用教程

北京-宏哥
关注
专栏目录
使用Python的pygal库创建SVG矢量图形
PixelLoom的博客
09-26 424
本文介绍了在Ubuntu操作系统下使用Python的pygal库创建SVG矢量图形的方法。通过安装Python和pygal库，并使用相应的源代码示例，我们可以轻松地创建各种类型的图表。在Ubuntu操作系统下，我们可以使用Python的pygal库来创建SVG（Scalable Vector Graphics）矢量图形。运行成功后，将在当前目录下生成一个名为"bar_chart.svg"的SVG文件，其中包含了我们创建的柱状图。在上面的代码中，我们首先导入了pygal库，然后创建了一个柱状图对象。
《Playwright+Python 自动化测试 》第一章 环境准备与快速开始-上海悠悠.pdf
01-04
【Playwright+Python 自动化测试】环境准备与快速开始 在自动化测试领域，Selenium 曾经是主流选择，但随着技术的发展，其他框架如 Cypress、Puppeteer 和 TestCafe 也逐渐崭露头角。然而，Playwright 作为新兴的...
svg标签内元素的xpath定位方式
weixin_45314192的博客
05-22 3525
<svg data-v-f9f7fefc="" aria-hidden="true" class="el-tooltip svgIcon-style svg-icon" aria-describedby="el-tooltip-701" tabindex="0"> <use data-v-f9f7fefc="" xlink:href="#icon-编辑"> </use> </svg> 由于svg属性的特殊性，所.
svg标签元素的XPATH定位
joker_zsl的博客
06-22 6506
项目中会遇到svg标签的元素，这时如果想要用XPATH定位元素，用一般元素的XPATH写法是定位不到的。 尝试了诸如：//svg[@id='iconadd-people']、//use[@xlink:href='#iconadd-people']等都无法定位这个元素或附件的其他元素。 其实svg标签支持name属性去定位，写法是：//*[name()='svg']。 能定位到svg标签后，再添加svg标签附件的元素的其他属性，来确保想要定位元素的唯一性即可。 //div[@id='MsWJ7E.
svg元素介绍
风如也的博客
04-24 2674
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
Python 中可以用来生成 SVG 图的库
SUMPLUSS的博客
03-20 689
cairosvg: CairoSVG 是一个用于将 SVG 图形渲染为其他格式（如 PNG、PDF）的库，但它也可以用来将 SVG 图形渲染为 SVG 格式。通过调用 savefig() 函数并将文件名设置为以 .svg 结尾的文件，您可以保存 Matplotlib 图形为 SVG 格式。通过调用 output_file() 函数并将文件名设置为以 .svg 结尾的文件，您可以将 Bokeh 图形保存为 SVG 格式。plotly: Plotly 是一个交互式图表库，可以生成各种类型的图形，包括 SVG。
深入探索Python Playwright自动化UI测试框架源码
03-25
项目概述：深入探索基于Python的Playwright UI自动化测试框架 本项目致力于深入研究Playwright这一前沿的自动化UI测试框架，采用Python语言进行深入剖析与实践。项目包含35个文件，其中主要包括： - Python脚本...
playwright-python：Playwright测试和自动化库的Python版本
02-24
:performing_arts: 适用于Python的| Playwright是一个Python库，可通过单个API自动执行 ， 和浏览器。 Playwright提供的自动化技术是绿色，功能强大，可靠且快速的。 。 Linux 苹果系统视窗Chrome90.0.4421.0 :check...
python自动化之-项目测试用例设计+读取Excel测试用例-代码
03-04
在Python自动化领域，测试用例的设计与管理是关键步骤，特别是在大型项目中。本文将深入探讨如何使用Python进行项目测试用例设计，并介绍如何利用Python读取Excel文件作为测试数据来源，以提升测试效率和准确性。 ...
Playwright+Python自动化测试
05-20
微软开源自动化测试工具Playwright，支持主流浏览器，包括：Chrome、Firefox、Safari 等，同时支持以无头模式、有头模式运行，并提供了同步、异步的 API，可以结合主流测试框架使用，并且支持浏览器端的自动化脚本...
python 绘制svg
u012730092的专栏
07-01 8241
SVG(可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。使用pygal和notebook绘制svgimport pygal bar_chart = pygal.Bar() bar_chart.add('Fibonacci',[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55
python 读取矢量图svg
最新发布
东方佑
07-14 376
在Python中读取矢量图，通常指的是读取如SVG（可缩放矢量图形）或PDF等格式的文件。对于这些格式的处理，Python有几个库可以做到，如。请注意，处理矢量图形时可能需要遵守相关的版权和使用条款。在使用这些工具和代码之前，请确保你有权使用相关的图形文件。提供了丰富的接口来分析、操作和转换SVG路径，非常适合需要精细操作矢量图形的场景。如果你需要操作矢量图形的路径和对象，可以使用。的Python接口等。
Python 生成 svg 图片，一篇博客带你掌握 Python 与 svg 之间的操作
热门推荐
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
01-17 1万+
是一个 Python 库，用于生成简单的 SVG 图片。它提供了一组类似于绘图的 API，使用者可以在 SVG 画布上画线、矩形、圆等图形。在后续的反爬实战中，我们需要动态渲染手机号码，因此这里需要用到 svg 生成手机号效果，代码示例如下。为了便于我们进行数字加密，还可以使用 svgwrite 库随机生成 1-10 之间的数字。运行之后的效果如下所示，这里一定要掌握，后期咱们有大用。在接下来的几篇博客中，我们将为你逐步解析上述库。运行代码，会在红色矩形上生成一个黑色的手机号码。
推荐文章：探索svg.py——纯Python打造的SVG图形生成器
gitblog_00050的博客
06-08 678
推荐文章：探索svg.py——纯Python打造的SVG图形生成器 项目地址:https://gitcode.com/gh_mirrors/sv/svg.py 在数字艺术和网页设计领域，SVG（Scalable Vector Graphics）因其高清晰度、可缩放性和轻量级特性而备受青睐。今天，我们为您带来了一个宝藏级别的开源工具——svg.py，这是一款专为Python爱好者设计的SVG文件生成...
你知道吗？python lxml 库也能用于操作 svg 图片
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
01-18 4383
在大多数场景中，我们都用 lxml 库解析网页源码，但你是否知道，lxml 库也是可以操作 svg 图片的。我们可以使用 lxml 中的 etree 模块来解析 SVG 文件，然后使用 SVG 中的各种元素和属性来进行操作。
关于一些xpath定位小技巧(svg,img,g等元素的定位问题)
weixin_42636075的博客
04-13 1318
xpath定位小技巧，持续更新中 xpath定位svg,g,img等元素
如何使用Python实现LateX数学表达式编辑，绘制SVG，生成JPEG图片
唤醒手腕
02-18 6984
说起LateX就是比较热门的公式编辑器，LaTeX工具分为在线工具和本地工具，本地工具又分为前台和后台。在线工具推荐Overleaf，本地工具推荐前台使用TeXStudio，后台推荐使用TeXLive（后台工具有TeXLive，MikTeX，CTeX等）。
python实现SVG文件解析
ai2robot
10-08 1万+
svg文件简介
探索SVGWrite：一个强大的Python SVG图形生成库
gitblog_00094的博客
04-17 1706
探索SVGWrite：一个强大的Python SVG图形生成库 svgwrite Python Package to write SVG files (UNMAINTAINED) 项目地址: https://gitcode.com/gh_mirrors/sv/sv...
使用docker 打包python +playwright 自动化测试代码
05-09
可以使用以下步骤来打包Python和Playwright自动化测试代码： 1. 首先，创建一个文件夹，并在其中创建一个名为Dockerfile的文件。 2. 在Dockerfile中，使用以下代码来安装Python和Playwright依赖项： ``` FROM python:3.8-slim-buster RUN apt-get update && apt-get install -y curl && \ curl -sL https://deb.nodesource.com/setup_14.x | bash - && \ apt-get install -y nodejs WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt && \ npm install -g playwright ``` 此代码使用Python 3.8和Debian 10作为基础映像，并安装了Node.js和curl。然后，在/app目录中安装Python和Playwright依赖项。 3. 接下来，在相同的目录中创建一个名为requirements.txt的文件，并在其中添加Python依赖项。例如： ``` selenium==3.141.0 pytest==6.2.2 playwright==1.10.0 ``` 4. 然后，将自动化测试代码复制到/app目录中。例如： ``` COPY test.py . ``` 5. 最后，使用以下命令来构建Docker映像： ``` docker build -t mytest . ``` 6. 运行Docker映像并执行自动化测试： ``` docker run --rm mytest python test.py ``` 这将在Docker容器中运行自动化测试，并将输出结果打印到控制台。 注意：在Docker容器中运行自动化测试时，请确保设置正确的浏览器路径和浏览器选项。例如，使用Playwright时，请确保在代码中设置正确的浏览器路径和选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值