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_dropThis 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**```pyawait 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})``````pypage.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.導入模塊
from playwright.sync_api import Playwright, sync_playwright, expectdef 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.導入模塊
from playwright.sync_api import Playwright, sync_playwright, expectdef 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'：

3.3手工拖拽

想精確控制拖動操作，可以使用較低級別的手工方法，如locator.hover()、mouse.down()、mouse.move()和mouse.up()。來實現自動化測試。

3.1代碼設計

3.2參考代碼

# coding=utf-8🔥
# 1.導入模塊
from playwright.sync_api import Playwright, sync_playwright, expectdef 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，有時又不可以，在網上找了半天又找到一個網址：Sahi Tests?里邊有很多在線免費的demo供大家學習使用。有興趣的同學可以找到里邊的拖拽demo來鞏固一下今天學習的知識。