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

news2024/11/19 21:15:47

【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>

页面展示

拖拽代码

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

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")

drag_and_drop()方法中的source和target参数可以是元素的选择器字符串，也可以是使用Playwright中的定位器（Locator）对象。
在执行拖拽之前，请确保要拖动的元素和目标元素都已经加载完成。

元素坐标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()

区别

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()
    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("=============================")