经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Python » 查看文章
《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇 - 北京-宏哥
来源:cnblogs  作者:北京-宏哥  时间:2023/10/11 16:10:34  对本文有异议

1.简介

本文主要介绍两个在测试过程中可能会用到的功能:在selenium中宏哥介绍了Actions类中的拖拽操作和Actions类中的划取字段操作。例如:需要在一堆log字符中随机划取一段文字,然后右键选择摘取功能。playwright同样可以实现元素的拖拽和释放的操作。

2.拖拽操作

鼠标拖拽操作,顾名思义就是:就是鼠标按住将一个元素拖拽到另一个元素上。拖拽是指将某个元素从一个位置拖动到另一个位置。为了模拟这种操作,Playwright 提供了 DragToAsync 方法,它可以帮助我们轻松地完成拖拽功能。

2.1基础知识

1.按住元素从页面的一个位置拖动到另外一个位置,有2种方式可以实现:

  • locator.drag_to(target: locator) 先定位元素,调用drag_to方法到目标元素
  • page.drag_and_drop(source: str, target: str) page对象直接调用

2.拖动和释放操作

page.drag_and_drop可以实现通过page对象调用drag_and_drop ,部分源码如下:

  1. def drag_and_drop(
  2. self,
  3. source: str,
  4. target: str,
  5. *,
  6. source_position: typing.Optional[Position] = None,
  7. target_position: typing.Optional[Position] = None,
  8. force: typing.Optional[bool] = None,
  9. no_wait_after: typing.Optional[bool] = None,
  10. timeout: typing.Optional[float] = None,
  11. strict: typing.Optional[bool] = None,
  12. trial: typing.Optional[bool] = None
  13. ) -> None:
  14. """Page.drag_and_drop
  15. This method drags the source element to the target element. It will first move to the source element, perform a
  16. `mousedown`, then move to the target element and perform a `mouseup`.
  17. **Usage**
  18. ```py
  19. await page.drag_and_drop(\"#source\", \"#target\")
  20. # or specify exact positions relative to the top-left corners of the elements:
  21. await page.drag_and_drop(
  22. \"#source\",
  23. \"#target\",
  24. source_position={\"x\": 34, \"y\": 7},
  25. target_position={\"x\": 10, \"y\": 20}
  26. )
  27. ```
  28. ```py
  29. page.drag_and_drop(\"#source\", \"#target\")
  30. # or specify exact positions relative to the top-left corners of the elements:
  31. page.drag_and_drop(
  32. \"#source\",
  33. \"#target\",
  34. source_position={\"x\": 34, \"y\": 7},
  35. target_position={\"x\": 10, \"y\": 20}
  36. )
  37. ```

注:source 和 target 是字符串格式,也就是传selector 选择器的方法

3.拖拽操作

locator.drag_to()可以实现拖放操作,该操作将:

  • 将鼠标悬停在要拖动的元素上
  • 按鼠标左键
  • 将鼠标移动到将接收放置的元素
  • 松开鼠标左键

语法示例:

  1. page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))

手工拖拽:

  • locator.hover()、mouse.down()、mouse.move()、mouse.up()

语法示例:

  1. page.locator("#item-to-be-dragged").hover()
  2. page.mouse.down()
  3. page.locator("#item-to-drop-at").hover()
  4. page.mouse.up()

3.牛刀小试

学习过Playwright的拖拽基础知识后,我们趁热打铁将其实践一下,以为我们更好的理解和记忆。宏哥这里JqueryUI网站的一个拖拽demo实战一下。

3.1拖拽操作

使用locator.drag_to()执行拖放操作,实现自动化测试。

3.1.1代码设计

3.1.2参考代码
  1. # coding=utf-8??
  2.  
  3. # 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行
  4.  
  5. # 2.注释:包括记录创建时间,创建人,项目名称。
  6. '''
  7. Created on 2023-07-19
  8. @author: 北京-宏哥 QQ交流群:705269076
  9. 公众号:北京宏哥
  10. Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-17-处理鼠标拖拽-上篇
  11. '''
  12.  
  13. # 3.导入模块
  14. from playwright.sync_api import Playwright, sync_playwright, expect
  15. def run(playwright: Playwright) -> None:
  16. browser = playwright.chromium.launch(headless=False)
  17. context = browser.new_context()
  18. page = context.new_page()
  19. page.goto("https://jqueryui.com/resources/demos/droppable/default.html")
  20. page.wait_for_timeout(1000)
  21. page.locator("#draggable").drag_to(page.locator("#droppable"))
  22. page.wait_for_timeout(3000)
  23. # page.pause()
  24. # page.drag_and_drop('#dragger', 'text=Item 2')
  25. context.close()
  26. browser.close()
  27. with sync_playwright() as playwright:
  28. run(playwright)
3.1.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

3.2拖动和释放操作

使用page.drag_and_drop(locator, loacator),实现自动化测试。

3.2.1代码设计

3.2.2参考代码
  1. # coding=utf-8??
  2.  
  3. # 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行
  4.  
  5. # 2.注释:包括记录创建时间,创建人,项目名称。
  6. '''
  7. Created on 2023-07-19
  8. @author: 北京-宏哥 QQ交流群:705269076
  9. 公众号:北京宏哥
  10. Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-17-处理鼠标拖拽-上篇
  11. '''
  12.  
  13. # 3.导入模块
  14. from playwright.sync_api import Playwright, sync_playwright, expect
  15. def run(playwright: Playwright) -> None:
  16. browser = playwright.chromium.launch(headless=False)
  17. context = browser.new_context()
  18. page = context.new_page()
  19. page.goto("https://jqueryui.com/resources/demos/droppable/default.html")
  20. page.wait_for_timeout(1000)
  21. # page.locator("#draggable").drag_to(page.locator("#droppable"))
  22. page.drag_and_drop('#draggable', '#droppable')
  23. page.wait_for_timeout(3000)
  24. # page.pause()
  25. context.close()
  26. browser.close()
  27. with sync_playwright() as playwright:
  28. run(playwright)
3.2.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

3.3手工拖拽

想精确控制拖动操作,可以使用较低级别的手工方法,如locator.hover()、mouse.down()、mouse.move()和mouse.up()。来实现自动化测试。

3.1代码设计

3.2参考代码
  1. # coding=utf-8??
  2.  
  3. # 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行
  4.  
  5. # 2.注释:包括记录创建时间,创建人,项目名称。
  6. '''
  7. Created on 2023-07-19
  8. @author: 北京-宏哥 QQ交流群:705269076
  9. 公众号:北京宏哥
  10. Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-17-处理鼠标拖拽-上篇
  11. '''
  12.  
  13. # 3.导入模块
  14. from playwright.sync_api import Playwright, sync_playwright, expect
  15. def run(playwright: Playwright) -> None:
  16. browser = playwright.chromium.launch(headless=False)
  17. context = browser.new_context()
  18. page = context.new_page()
  19. page.goto("https://jqueryui.com/resources/demos/droppable/default.html")
  20. page.wait_for_timeout(1000)
  21. page.locator('#draggable').hover()
  22. page.mouse.down()
  23. page.locator('#droppable').hover()
  24. page.mouse.up()
  25. page.wait_for_timeout(3000)
  26. # page.pause()
  27. context.close()
  28. browser.close()
  29. with sync_playwright() as playwright:
  30. run(playwright)
3.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

2.运行代码后电脑端的浏览器的动作。如下图所示:

4.小结

宏哥由于网络的原因,有时可以访问到jquery UI的网页的demo,有时又不可以,在网上找了半天给小伙伴们或者童鞋们又找到一个网址:https://sahitest.com/demo 里边有很多在线免费的demo供大家学习使用。有兴趣的同学可以找到里边的拖拽demo来巩固一下今天学习的知识。其实你会发现是很简单的。

原文链接:https://www.cnblogs.com/du-hong/p/17559838.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号