首页 > 编程语言 >python+playwright 学习-57 svg 元素拖拽

python+playwright 学习-57 svg 元素拖拽

时间:2023-04-26 21:44:30浏览次数:48  
标签:box playwright python svg circle mouse page

前言

SVG英文全称为Scalable vector Graphics,意思为可缩放的矢量图,这种元素比较特殊,需要通过 ​name​() 函数来进行定位。
本篇讲下关于svg元素的拖拽相关操作。

拖拽 svg 元素

如图所示,svg下的circle元素是可以拖动的

比如往右拖动 100 个像素, 那么cx的值由原来的cx="100"变成 cx="200"

通过鼠标是可以实现拖拽操作的

playwright 拖拽 svg 元素

先定位目标元素,通过 mouse 鼠标事件操作

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/

with sync_playwright() as playwright:
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto('file:///C:/Users/dell/Desktop/drag/snap_events.html')

    # svg元素定位
    circle = page.locator('//*[name()="svg"]/*[name()="circle"]')
    print(circle.bounding_box())
    box = circle.bounding_box()
    # svg元素拖拽
    page.mouse.move(x=box['x']+box['width']/2, y=box['y']+box['height']/2)
    page.mouse.down()
    page.mouse.move(x=box['x']+box['width']/2+100, y=box['y']+box['height']/2)
    page.mouse.up(button="middle")

如果不确定鼠标down事件有没触发,可以加个元素的事件监听,看console日志

from playwright.sync_api import sync_playwright
# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/


with sync_playwright() as playwright:
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto('file:///C:/Users/dell/Desktop/drag/snap_events.html')

    # svg元素定位
    circle = page.locator('//*[name()="svg"]/*[name()="circle"]')
    print(circle.bounding_box())
    box = circle.bounding_box()
    # 添加事件监听
    circle.evaluate('node => node.addEventListener("mousedown", function(){console.log("目标元素被鼠标down了");});')

    # svg元素拖拽
    page.mouse.move(x=box['x']+box['width']/2, y=box['y']+box['height']/2)
    page.mouse.down()
    page.mouse.move(x=box['x']+box['width']/2+100, y=box['y']+box['height']/2)
    page.mouse.up(button="middle")

标签:box,playwright,python,svg,circle,mouse,page
From: https://www.cnblogs.com/yoyoketang/p/17357453.html

相关文章

  • python的文件路径操作(转)
    1.1绝对路径不同操作系统下绝对路径的表现形式是不一样的,以Windows系统为例,一个文件的路径可能是这样的:D:\files\data\ndvi.tif其中:D:\:表示根文件夹,是文件所在的盘符,即D盘。D:\files\data:表示文件所在的文件夹的路径,即D盘的files文件夹的子文件夹data。ndvi.tif:表示文件名......
  • python打包工具-Nuitka
    nuitka将python源码转成C++(这里得到的是二进制的pyd文件,防止了反编译),然后再编译成可执行文件。提高安全性和运行速度。github:https://github.com/2267770481/cython_test安装pipinstallnuitkapipinstallordered-set#加速编译pipinstallzstandard#onefile时压缩文件......
  • windows下mysql5.7安装,及python操作mysql
    windows下mysql5.7安装mysql5.7官方下载:https://www.mysql.com/可参考教程:https://blog.csdn.net/qq_39715000/article/details/123534326?注意:一:my.ini配置文件:如果保存目录以t开头,默认会将t转义为空格(解决方法加这个\\):[mysqld]#端口号port=3306#mysql-5.7.27-winx6......
  • 树莓派4B-Python-控制超声波模块
    树莓派4B-Python-控制超声波模块超声波模块:超声波模块为常用的HC-SR04型号,有四个引脚,分别为Vcc、Trig(控制端)、Echo(接收端)、GND,使用起来也比较简单。在树莓派最新官方系统Raspbian中都安装有一个比较好使用的GPIO库,名为“gpiozero”,它包含了许多模块的使用函数,直接调用就好。参......
  • pycharm中python测试一直‘Instantiating tests...’转圈
    问题描述:defget_formatted_name(first,last):"""生成简洁的姓名"""full_name=first+""+lastreturnfull_name.title()importunittestfromname_functionimportget_formatted_nameclassNamesTestCase(unit......
  • 如何用Python画一只狗狗——turtle基础
    这只小狗主要用了turtle库里的circle()头有些方正,比较自然。话不多说,展示代码:fromturtleimport*pensize(5)seth(0)pd()color('black')circle(20,80)circle(200,30)circle(30,60)circle(200,29.5)circle(20,60)circle(-150,22)circle(-50,10)circle(5......
  • 如何用Python画奥运五环——circle()
    奥林匹克标志(theOlympicsymbol),又称奥运五环标志,是由《奥林匹克宪章》确定的奥林匹克运动在全球范围内的视觉形象标识。它由5个奥林匹克环从左到右互相套接组成,上方是蓝色、黑色、红色三环,下方是黄色、绿色二环,亦能以单色形式使用,整体造型为一个底部小的规则梯形。1913年,现代奥......
  • python 函数是对象
    defhi(name="yasoob"):return"hi"+nameprint(hi())#output:'hiyasoob'#我们甚至可以将一个函数赋值给一个变量,比如greet=hi#我们这里没有在使用小括号,因为我们并不是在调用hi函数#而是在将它放在greet变量里头。我们尝试运行下这个print(greet())#out......
  • Python基础
    list方法len返回list长度append往list末尾追加元素insert可以通过索引号插入指定位置,如果插入的位置之前没有元素,会追加到该位置myList=[0,1,2]myList.insert(5,5)print(len(myList))print(myList)//4//[0,1,2,5]pop删除list末尾的元素,如果要删除指定......
  • python与java 对应的加密算法
    python与java对应的加密算法1.gzip加密java的gzip加密:importjava.io.ByteArrayInputStream;importjava.io.ByteArrayOutputStream;importjava.util.Arrays;importjava.util.zip.GZIPInputStream;importjava.util.zip.GZIPOutputStream;publicclassHello{......