【python自动化】Playwright基础教程（十）元素拖拽元素坐标获取网页源码元素内文本

news2024/10/7 18:26:58

【python自动化】Playwright基础教程（十）元素拖拽&元素坐标&获取网页源码&元素内文本

本文目录

文章目录

  • 【python自动化】Playwright基础教程（十）元素拖拽&元素坐标&获取网页源码&元素内文本
    • playwright系列回顾
    • 前文代码
    • 元素拖拽drag-and-drop
    • 元素坐标bounding_box
    • 获取网页源码
    • 获取元素内文本

playwright系列回顾

playwright连接已有浏览器操作

selenium&playwright获取网站Authorization鉴权实现伪装requests请求

【python自动化】playwright长截图&切换标签页&JS注入实战

【python自动化】Playwright基础教程(二)快速入门

【python自动化】Playwright基础教程(三)定位操作

【python自动化】Playwright基础教程(四)事件操作①元素高亮&元素匹配器

【python自动化】Playwright基础教程(五)事件操作②悬停&输入&清除精讲

前文代码

直接定位指定浏览器

class Demo05:
    def __init__(self):
        """
        使用playwright连接谷歌浏览器
        :return:
        """
        self.playwright = sync_playwright().start()
        # 连接已经打开的浏览器，找好端口
        browser = self.playwright.chromium.connect_over_cdp("http://127.0.0.1:9223")
        self.default_context = browser.contexts[0]
        self.page = self.default_context.pages[0]

启动新的浏览器

class Demo06:
    def __init__(self, url):
        playwright = sync_playwright().start()
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        self.page = context.new_page()
        self.page.goto(url)
       
        
if __name__ == '__main__':
    mwj = Demo05(url="指定的url")
    mwj.Locator_testid()

元素拖拽drag-and-drop

官方文档：https://playwright.dev/python/docs/api/class-page#page-drag-and-drop

此方法将指定元素拖拽到目标元素，它将首先移动到源元素，执行mousedown，再移动到目标元素执行mouseup

使用方法

page.drag_and_drop("#source", "#target")
# 或者指定相对于元素左上角的精确位置:
page.drag_and_drop(
  "#source",
  "#target",
  source_position={"x": 34, "y": 7},
  target_position={"x": 10, "y": 20}
)

测试网址:https://www.w3school.com.cn/html/html5_draganddrop.asp

我这里自己写了一个HTML进行测试。命名为draganddrop.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop</title>
    <style>
        #dragElement {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }

        #dropElement {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="bigdiv">
    <div id="dragElement"></div>
    <div id="dropElement"></div>
    <div><span>大家好，这里是梦无矶的测试开发之路playwright教程</span></div>
    <div id="mytext"><span>这个页面是用来测试拖拽，读取元素坐标，网页文本的</span></div>
</div>

<script>
    const dragElement = document.getElementById('dragElement');
    let isDragging = false;
    let startOffset = {x: 0, y: 0};

    function startDrag(e) {
        isDragging = true;
        startOffset.x = e.clientX - dragElement.offsetLeft;
        startOffset.y = e.clientY - dragElement.offsetTop;
    }

    function endDrag() {
        isDragging = false;
    }

    function drag(e) {
        if (!isDragging) return;
        dragElement.style.left = e.clientX - startOffset.x + 'px';
        dragElement.style.top = e.clientY - startOffset.y + 'px';
    }

    dragElement.addEventListener('mousedown', startDrag);
    document.addEventListener('mouseup', endDrag);
    document.addEventListener('mousemove', drag);
</script>
</body>
</html>

页面展示

image-20230920154440303

拖拽代码

把红色的框拖拽到绿色的框里面。

from playwright.sync_api import sync_playwright
url = r"file:///D:/L_Learning/MyLearningCode/learn_playwright/playwright_demo/draganddrop"
class Demo06:
    def __init__(self, url):
        playwright = sync_playwright().start()
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        self.page = context.new_page()
        self.page.goto(url)
        
    def drag_and_drop_operate(self):
        self.page.drag_and_drop(source="#dragElement", target="#dropElement")
  1. drag_and_drop()方法中的source和target参数可以是元素的选择器字符串，也可以是使用Playwright中的定位器（Locator）对象。
  2. 在执行拖拽之前，请确保要拖动的元素和目标元素都已经加载完成。

元素坐标bounding_box

官方文档：https://playwright.dev/python/docs/api/class-locator#locator-bounding-box

使用方法

def bouding_box_operate(self):
    bounding = self.page.locator("#dragElement").bounding_box()
    print(bounding)  # {'x': 0, 'y': 0, 'width': 100, 'height': 100}

这里我们使用的还是前面拖拽使用的网页代码。

可以看到，他的返回值是有四个，xy的值表示该元素左上角的坐标，width和height分别表示这个元素的宽高。

定位该元素的中心点可以通过如下方式计算获得。

x,y = box["x"] + box["width"] / 2, box["y"] + box["height"] / 2

获取网页源码

playwright获取网页源代码和selenium获取源代码的方式类似。

# selenium获取网页源码
page_source = self.driver.page_source

# playwright获取网页源码
page_source = self.page.content()

使用这个方法，如果接触过爬虫的同学应该就知道了，网页上的所有信息都可以拿出来，使用正则进行提取相关数据。

获取元素内文本

比如在一些表格，样式比较规范，内容比较统一的页面，我们需要把文本进行输出或存储，可以直接使用playwright提取相关元素下面的文本。

playwright提供了挺多方法进行提取文本的，常用的有如下这些。

使用方法

locator.all_inner_texts()
locator.all_text_contents()
locator.inner_text()
locator.text_content()
locator.inner_html()

使用前文的html进行测试

def element_text(self):
    mytext1 = self.page.locator("#bigdiv").all_inner_texts()
    mytext2= self.page.locator("#bigdiv").all_text_contents()
    mytext3 = self.page.locator("#bigdiv").inner_text()
    mytext4 = self.page.locator("#bigdiv").text_content()
    mytext5 = self.page.locator("#bigdiv").inner_html()

区别

  1. locator.all_inner_texts()：返回值为列表，返回匹配定位器的所有元素的内部文本内容，并可以包含子元素的文本内容。返回的是包含所有元素内部文本的数组。
  2. locator.all_text_contents()：返回值为列表，返回匹配定位器的所有元素的全文本内容，包括所有子元素的文本内容。返回的是包含所有元素全文本内容的数组。
  3. locator.inner_text()：返回值为字符串，返回匹配定位器的第一个元素的内部文本内容，并可以包含子元素的文本内容。
  4. locator.text_content()：返回值为字符串，返回匹配定位器的第一个元素及其所有子元素的全文本内容。
  5. locator.inner_html()：返回值为字符串，返回匹配定位器的第一个元素的内部HTML代码，包括所有子元素。

效果展示

image-20230920163208320

完整代码

def element_text(self):
    mytext1 = self.page.locator("#bigdiv").all_inner_texts()
    print(type(mytext1), "all_inner_texts:\n", mytext1)
    print("=============================")
    mytext2 = self.page.locator("#bigdiv").all_text_contents()
    print(type(mytext2), "all_text_contents:\n", mytext2)
    print("=============================")
    mytext3 = self.page.locator("#bigdiv").inner_text()
    print(type(mytext3), "inner_text:\n", mytext3)
    print("=============================")
    mytext4 = self.page.locator("#bigdiv").text_content()
    print(type(mytext4), "text_content:\n", mytext4)
    print("=============================")
    mytext5 = self.page.locator("#bigdiv").inner_html()
    print(type(mytext5), "inner_html:\n", mytext5)
    print("=============================")

playwright不想写了，累了！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1204291.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

链表题（3）

链表题（3）

链表题 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 本篇内容继续给大家带来链表的一些练习题 链表分割 知识点&#xff1a; 编程基础 链表…
阅读更多...
Rust语言基础：从Hello World开始

Rust语言基础：从Hello World开始

大家好&#xff0c;我是[lincyang]。 我们将一起探索Rust语言的基础&#xff0c;从最经典的程序入手——“Hello, World!”。 Rust简介 Rust是一种系统编程语言&#xff0c;由Mozilla赞助开发&#xff0c;旨在提供内存安全、并发性和实用性。它的设计思想强调安全性和性能&…
阅读更多...
（11.13 知识总结（路由层）

（11.13 知识总结（路由层）

一、路由层 1.1路由匹配 1.1.1 什么是路由&#xff1f; 路由可以看成是跟在 ip 和 port 之后的地址 1.1.2 url( ) 方法 # 示例 urlpatterns [ url(r^admin/, admin.site.urls), url(r^login/, views.login_func), url(r^register/$, views.register_func), ] url…
阅读更多...
计算机毕业设计选题推荐-课程学习微信小程序/安卓APP-项目实战

计算机毕业设计选题推荐-课程学习微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
Jmeter 性能 —— 负载阶梯场景！

Jmeter 性能 —— 负载阶梯场景！

1、安装阶梯测试的第三方插件->搜jpgc 选项-JMeter Plugins Manager -搜jpgc 空格&#xff0c;然后安装 2、脚本-线程组选jpgc Stepping Thread Group 最终并发数为100&#xff0c;并发数从0开始&#xff0c;5秒内增加10个并发数&#xff0c;增加10个后持续30s&#xff0c;…
阅读更多...
基于RK3399的室内健身魔镜方案

基于RK3399的室内健身魔镜方案

I 方案背景 一、健身魔镜的兴起 2020年疫情席卷全球&#xff0c;宅家是防疫的措施之一&#xff0c;因而宅家运动火爆&#xff0c;随之而来的宅家运动器材也风靡起来&#xff0c;其中包含既有颜值又具有多种功能的健身魔镜。 Ⅱ 方案介绍 一、健身魔镜的方案介绍 …
阅读更多...
文件上传 [SUCTF 2019]CheckIn1

文件上传 [SUCTF 2019]CheckIn1

打开题目 我们用cmd curl --head url 查看网站使用的是什么服务器 此题用的是openresty&#xff0c;OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台 我们上传php&#xff0c;phtml的一句话木马都显示不合法 那我们试试传a.jpg的一句话木马 显示我们一句话木马内容里面…
阅读更多...
[C++ 从入门到精通] 12.拷贝构造函数

[C++ 从入门到精通] 12.拷贝构造函数

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…
阅读更多...
22.能被7整除，并且求和。

22.能被7整除，并且求和。

#include<stdio.h>int main(){int i ,sum0;printf("1-1000能被7整除的数字有&#xff1a;\n");for(i1;i<1000;i){if(i%70){printf("%d ",i);sumsumi;} }printf("\n");printf("能被7整除的数字的和是&#xff1a;%d ",sum);re…
阅读更多...
stm32 WIFI模块_8266使用

stm32 WIFI模块_8266使用

使用以上配置可以正常回应&#xff0c;其中无论勾选或者不勾选DTR/RTS都可以得到正常回应 ATCWMODE?表示查询当前WiFi状态是处于热点模式&#xff08;AP模式&#xff09;或者是连接其他WiFi的那个模式。通过图片看出这个符号不能省略。 设置AP热点命令格式&#xff1a;ATCWSAP…
阅读更多...
手写线性表C++ vector

手写线性表C++ vector

目录 一、vector基本概念 1.1、构造函数 1.2、析构函数 1.3、插入元素 1.4、删除元素 1.5、重载运算符 二、完整代码 一、vector基本概念 C中的vector是一种动态数组&#xff0c;它可以根据需要自动调整大小。vector是C标准模板库&#xff08;STL&#xff09;中的一个容…
阅读更多...
通信原理板块——线性分组码之汉明码

通信原理板块——线性分组码之汉明码

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、汉明码 (1)常见概念 代数码&…
阅读更多...
2756基于微信小程序的图书商城系统

2756基于微信小程序的图书商城系统

摘要 本文将详细介绍基于微信小程序的图书商城系统的设计和实现。该系统包括服务器端和客户端两部分&#xff0c;能够满足管理员和普通用户的需求。通过对用户需求和功能的分析&#xff0c;本文将详细阐述系统设计的关键环节&#xff0c;包括数据库设计和界面设计。最后&#…
阅读更多...
C语言ZZULIOJ1148:组合三位数之一

C语言ZZULIOJ1148:组合三位数之一

题目描述 把1、2、3、4、5、6、7、8、9组合成3个3位数&#xff0c;要求每个数字仅使用一次&#xff0c;使每个3位数均为完全平方数。按从小到大的顺序输出这三个三位数。 输入:无 输出:按从小到大的顺序输出这三个三位数&#xff0c;由空格隔开。输出占一行。 提示 若一个数能表…
阅读更多...
select在标准输出和套接字上进行监控

select在标准输出和套接字上进行监控

selectServerInTCPIPbook.c的内容如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h> #include <sys/time.h> #include <sys/…
阅读更多...
教育局档案室智慧档案库房建设方案

教育局档案室智慧档案库房建设方案

教育局档案室智慧档案库房建设是指教育局为了更好地保存和管理学校、教师、学生等相关档案资料&#xff0c;以及保证这些档案资料的安全性、可靠性和完整性&#xff0c;而建设的一个专门的存储、管理和保护档案资料的场所。 专久智能提供的教育局档案库房建设方案从以下几个方面…
阅读更多...
高密度统一存储在影视后期剪辑媒资应用中的优势

高密度统一存储在影视后期剪辑媒资应用中的优势

影视媒体行业是存储技术发展的重要推动力。Infortrend一直专注于存储的研发&#xff0c; EonStor GS 横向扩展统一存储是适合影视应用的解决方案&#xff0c;高密度机型性能卓越&#xff0c;扩展性高&#xff0c;数据保护技术安全可靠。非常具有性价比&#xff0c;在保证性能和…
阅读更多...
msvcp71.dll,msvcr71.dll丢失的最简单的解决方法

msvcp71.dll,msvcr71.dll丢失的最简单的解决方法

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是MSVCR71.dll缺失。这个问题可能会导致某些应用程序无法正常运行&#xff0c;给用户带来困扰。本文将介绍5个修复MSVCR71.dll缺失的方案&#xff0c;帮助用户解决这一问题。 一、重新安装相关…
阅读更多...
U盘怎么加密？U盘数据该怎么加密？

U盘怎么加密？U盘数据该怎么加密？

在使用U盘的过程中&#xff0c;我们会将很多重要数据存放在电脑中&#xff0c;但为了保护文件的安全性&#xff0c;我们需要使用加密来进行保护。那么&#xff0c;U盘数据该怎么加密呢&#xff1f; U盘数据加密方法 想要将普通U盘变成加密U盘&#xff0c;我们需要使用专业的U盘…
阅读更多...
如何防止听力下降？

如何防止听力下降？

听力受损是不可逆的&#xff0c;一旦听力下降了是无法恢复的&#xff0c;所以当我们出现听力障碍的时候&#xff0c;我们更应该注意我们的耳朵&#xff0c;想想如何能保护我们的残余听力&#xff01; 今天来告诉大家&#xff0c;哪些事是有易于听力的&#xff0c;一起来看看吧…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023