《最新出爐》系列初窺篇-Python+Playwright自動化測試-19-處理滑鼠拖拽-中篇

宏哥發表於2023-10-12

1.簡介

上一篇中，主要是介紹了拖拽的各種方法的理論知識以及實踐，今天宏哥講解和分享一下劃取欄位操作。例如：需要在一堆log字元中隨機劃取一段文字，然後右鍵選擇摘取功能。

2.劃取欄位操作

劃取欄位操作就是在一段文字中隨機選中一段文字，或者在標記文字。當然了，這個在一些網站的登入也需要滑塊驗證等。

selenium中提供了ActionChains類來處理滑鼠事件。這個類中有2個方法和滑塊移動過程相關。click_and_hold()：模擬按住滑鼠左鍵在源元素上，點選並且不釋放；release()：鬆開滑鼠按鍵。字面意思就可以理解這2個函式的作用。今天跟隨宏哥看一下，playwright是如何處理這種測試場景的。

2.1牛刀小試

在一段文字中，隨機劃取一小段文字（這個感覺比較雞肋，貌似沒有什麼卵用，但是宏哥還是說一下吧）。那麼宏哥就用度孃的免責宣告進行實踐，劃取其中的一小段文字。

使用locator.drag_to()執行拖放操作，實現自動化測試。

2.1.1程式碼設計

2.1.2參考程式碼

# coding=utf-8?

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-07-22
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-18-處理滑鼠拖拽-中篇
'''

# 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://www.baidu.com/duty")
    page.wait_for_timeout(1000)
    page.locator("//*/p").drag_to(page.locator('//*/ul[@class="privacy-ul-gap"]/li[1]'))
    # page.drag_and_drop('//*/p', '//*/ul[@class="privacy-ul-gap"]/li[1]')
    page.wait_for_timeout(3000)
    # page.pause()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

2.1.3執行程式碼

1.執行程式碼，右鍵Run'Test'，控制檯輸出，如下圖所示：

2.執行程式碼後電腦端的瀏覽器的動作。如下圖所示：

使用page.drag_and_drop(locator, loacator)，實現自動化測試。

2.1.4參考程式碼

# coding=utf-8?

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-07-22
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-18-處理滑鼠拖拽-中篇
'''

# 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://www.baidu.com/duty")
    page.wait_for_timeout(1000)
    # page.locator("//*/p").drag_to(page.locator('//*/ul[@class="privacy-ul-gap"]/li[1]'))
    page.drag_and_drop('//*/p', '//*/ul[@class="privacy-ul-gap"]/li[1]')
    page.wait_for_timeout(3000)
    # page.pause()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

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

2.1.5參考程式碼

# coding=utf-8?

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-07-19
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 最新出爐》系列初窺篇-Python+Playwright自動化測試-18-處理滑鼠拖拽-中篇
'''

# 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://www.baidu.com/duty")
    page.wait_for_timeout(1000)
    page.locator('//*/p').hover()
    page.mouse.down()
    page.locator('//*/ul[@class="privacy-ul-gap"]/li[1]').hover()
    page.mouse.up()
    page.wait_for_timeout(3000)
    # page.pause()
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

3.專案實戰

這裡宏哥用java+selenium中的攜程旅行，手機號查單頁面的一個滑動，進行專案實戰。如下圖所示：

3.1思路說明

使用locator定位到要拖動滑塊元素，如元素名叫ele
獲取元素ele的bounding_box含4分屬性值：x，y，width，height
把滑鼠移動到元素ele的中心點，中心點位置為：x+width/2,y+height/2
按下滑鼠
計算出要移動的下一個位置，以長條滑塊為例，拖動到長條頭部實現解鎖，那x的位置應該為x+width/2 + 某個固定值（足夠大就好）
執行移動操作，下一個位置座標為：x+width/2 + 某個固定值,y+height/2
釋放滑鼠

3.2呼叫方法

元素定位：page.locator()
獲取元素位置及大小：ele.bounding_box()
滑鼠移動：page.mouse.move()
按下滑鼠：page.mouse.down()
釋放滑鼠：page.mouse.up()

3.2程式碼設計

3.3參考程式碼

# coding=utf-8?

# 1.先設定編碼，utf-8可支援中英文，如上，一般放在第一行

# 2.註釋：包括記錄建立時間，建立人，專案名稱。
'''
Created on 2023-07-22
@author: 北京-宏哥   QQ交流群：705269076
公眾號：北京宏哥
Project: 《最新出爐》系列初窺篇-Python+Playwright自動化測試-18-處理滑鼠拖拽-中篇
'''

# 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()
    #禁用爬蟲檢測的，然而試過沒有卵用
    context.add_init_script(path='C:\\Users\\DELL\\Downloads\\stealth.min.js')
    page = context.new_page()
    page.goto("https://passport.ctrip.com/user/member/fastOrder")
    page.wait_for_timeout(2000)
    #獲取拖動按鈕位置並拖動  //*[@id="slider"]/div[1]/div[2]
    dropbutton=page.locator("//*[@id='slider']/div[1]/div[2]")
    box=dropbutton.bounding_box()
    page.mouse.move(box['x']+box['width']/2,box['y']+box[ 'height']/2)
    page.mouse.down()
    mov_x=box['x']+box['width']/2+280
    page.mouse.move(mov_x,box['y']+box[ 'height']/2)
    page.mouse.up()
    page.wait_for_timeout(3000)
    context.close()
    browser.close()

with sync_playwright() as playwright:
    run(playwright)