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 ,部分源碼如下：
def drag_and_drop( self, source: str, target: str, *, source_position: typing.Optional[Position] = None, target_position: typing.Optional[Position] = None, force: typing.Optional[bool] = None, no_wait_after: typing.Optional[bool] = None, timeout: typing.Optional[float] = None, strict: typing.Optional[bool] = None, trial: typing.Optional[bool] = None ) -> None: """Page.drag_and_drop This method drags the source element to the target element. It will first move to the source element, perform a `mousedown`, then move to the target element and perform a `mouseup`. **Usage** ```py await page.drag_and_drop(\"#source\", \"#target\") # or specify exact positions relative to the top-left corners of the elements: await page.drag_and_drop( \"#source\", \"#target\", source_position={\"x\": 34, \"y\": 7}, target_position={\"x\": 10, \"y\": 20} ) ``` ```py page.drag_and_drop(\"#source\", \"#target\") # or specify exact positions relative to the top-left corners of the elements: page.drag_and_drop( \"#source\", \"#target\", source_position={\"x\": 34, \"y\": 7}, target_position={\"x\": 10, \"y\": 20} ) ```
注：source 和 target 是字符串格式，也就是傳selector 選擇器的方法
3.拖拽操作
locator.drag_to()可以實現拖放操作，該操作將：
- 將鼠標懸停在要拖動的元素上
- 按鼠標左鍵
- 將鼠標移動到將接收放置的元素
- 鬆開鼠標左鍵
語法示例：
page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))
手工拖拽：
- locator.hover()、mouse.down()、mouse.move()、mouse.up()
語法示例：
page.locator("#item-to-be-dragged").hover() page.mouse.down() page.locator("#item-to-drop-at").hover() page.mouse.up()
3.牛刀小試
學習過Playwright的拖拽基礎知識後，我們趁熱打鐵將其實踐一下，以爲我們更好的理解和記憶。宏哥這裏JqueryUI網站的一個拖拽demo實戰一下。
3.1拖拽操作
使用locator.drag_to()執行拖放操作，實現自動化測試。
3.1.1代碼設計
3.1.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-19 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-17-處理鼠標拖拽-上篇 ''' # 3.導入模塊 from playwright.sync_api import Playwright, sync_playwright, expect def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://jqueryui.com/resources/demos/droppable/default.html") page.wait_for_timeout(1000) page.locator("#draggable").drag_to(page.locator("#droppable")) page.wait_for_timeout(3000) # page.pause() # page.drag_and_drop('#dragger', 'text=Item 2') context.close() browser.close() with sync_playwright() as playwright: run(playwright)
3.1.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
3.2拖動和釋放操作
使用page.drag_and_drop(locator, loacator)，實現自動化測試。
3.2.1代碼設計
3.2.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-19 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-17-處理鼠標拖拽-上篇 ''' # 3.導入模塊 from playwright.sync_api import Playwright, sync_playwright, expect def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://jqueryui.com/resources/demos/droppable/default.html") page.wait_for_timeout(1000) # page.locator("#draggable").drag_to(page.locator("#droppable")) page.drag_and_drop('#draggable', '#droppable') page.wait_for_timeout(3000) # page.pause() context.close() browser.close() with sync_playwright() as playwright: run(playwright)
3.2.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
3.3手工拖拽
想精確控制拖動操作，可以使用較低級別的手工方法，如locator.hover()、mouse.down()、mouse.move()和mouse.up()。來實現自動化測試。
3.1代碼設計
3.2參考代碼
# coding=utf-8🔥 # 1.先設置編碼，utf-8可支持中英文，如上，一般放在第一行 # 2.註釋：包括記錄創建時間，創建人，項目名稱。 ''' Created on 2023-07-19 @author: 北京-宏哥 QQ交流羣：705269076 公衆號：北京宏哥 Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-17-處理鼠標拖拽-上篇 ''' # 3.導入模塊 from playwright.sync_api import Playwright, sync_playwright, expect def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://jqueryui.com/resources/demos/droppable/default.html") page.wait_for_timeout(1000) page.locator('#draggable').hover() page.mouse.down() page.locator('#droppable').hover() page.mouse.up() page.wait_for_timeout(3000) # page.pause() context.close() browser.close() with sync_playwright() as playwright: run(playwright)
3.3運行代碼
1.運行代碼，右鍵Run'Test'，控制檯輸出，如下圖所示：
2.運行代碼後電腦端的瀏覽器的動作。如下圖所示：
4.小結
宏哥由於網絡的原因，有時可以訪問到jquery UI的網頁的demo，有時又不可以，在網上找了半天給小夥伴們或者童鞋們又找到一個網址：https://sahitest.com/demo 裏邊有很多在線免費的demo供大家學習使用。有興趣的同學可以找到裏邊的拖拽demo來鞏固一下今天學習的知識。其實你會發現是很簡單的。