Playwright 提供了強(qiáng)大的移動(dòng)端模擬能力，支持模擬真實(shí)移動(dòng)設(shè)備的屏幕尺寸、分辨率、用戶代理（User Agent）、觸摸事件、地理位置甚至網(wǎng)絡(luò)條件，無需真實(shí)設(shè)備即可完成移動(dòng)端網(wǎng)頁(yè)/應(yīng)用的功能與兼容性測(cè)試。以下是具體實(shí)現(xiàn)步驟與核心場(chǎng)景示例（以 Python 為例）：

一、核心原理：通過“設(shè)備上下文”模擬移動(dòng)環(huán)境

Playwright 通過 browser.new_context() 或 chromium.launch_persistent_context() 創(chuàng)建“設(shè)備上下文（Context）”，在上下文配置中指定移動(dòng)設(shè)備參數(shù)（如屏幕尺寸、UA 等），從而模擬移動(dòng)瀏覽器行為。核心配置項(xiàng)包括：

• device_scale_factor：設(shè)備像素比（如視網(wǎng)膜屏為 2）；
• is_mobile：是否啟用移動(dòng)模式（開啟后支持觸摸事件）；
• viewport：屏幕可視區(qū)域大?。▽?times;高，單位像素）；
• user_agent：移動(dòng)設(shè)備的 User Agent 字符串；
• has_touch：是否支持觸摸事件（移動(dòng)端需開啟）。

二、基礎(chǔ)操作：使用內(nèi)置設(shè)備預(yù)設(shè)快速模擬

Playwright 內(nèi)置了 50+ 常見移動(dòng)設(shè)備配置（如 iPhone 13、Pixel 7、iPad Pro 等），無需手動(dòng)配置參數(shù)，直接調(diào)用即可。

步驟 1：獲取內(nèi)置設(shè)備列表

通過 playwright.devices 查看所有預(yù)設(shè)設(shè)備，例如：

from playwright.sync import sync_playwright  

with sync_playwright() as p:  
    # 打印所有內(nèi)置設(shè)備名稱（如 "iPhone 13", "Pixel 7"）  
    print(list(p.devices.keys()))  

步驟 2：模擬指定設(shè)備訪問網(wǎng)頁(yè)

以“模擬 iPhone 13 訪問百度”為例：

from playwright.sync import sync_playwright  

with sync_playwright() as p:  
    # 1. 選擇要模擬的設(shè)備（如 iPhone 13）  
    iphone_13 = p.devices["iPhone 13"]  

    # 2. 啟動(dòng)瀏覽器，創(chuàng)建移動(dòng)設(shè)備上下文  
    browser = p.chromium.launch(headless=False)  # headless=False 可看到瀏覽器界面  
    context = browser.new_context(  
        **iphone_13,  # 解構(gòu)設(shè)備參數(shù)（包含 viewport、ua、is_mobile 等）  
        locale="zh-CN",  # 可選：設(shè)置語言  
    )  

    # 3. 打開頁(yè)面，模擬移動(dòng)操作  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  

    # 4. 示例：模擬移動(dòng)端搜索（點(diǎn)擊搜索框→輸入文本→點(diǎn)擊搜索按鈕）  
    page.locator("input[type='search']").click()  # 觸摸點(diǎn)擊  
    page.keyboard.type("Playwright 移動(dòng)端測(cè)試")  
    page.locator("input[type='submit']").nth(0).click()  

    # 5. 截圖驗(yàn)證效果（保存為移動(dòng)端尺寸的圖片）  
    page.screenshot(path="iphone_13_baidu.png")  

    # 6. 關(guān)閉資源  
    context.close()  
    browser.close()  

運(yùn)行后，會(huì)看到瀏覽器以 iPhone 13 的屏幕尺寸（390×844）打開百度，且支持觸摸交互。

三、高級(jí)模擬：自定義設(shè)備參數(shù)與場(chǎng)景

1. 自定義設(shè)備（非內(nèi)置設(shè)備）

若需模擬特定設(shè)備（如某款安卓機(jī)型），可手動(dòng)配置參數(shù)：

custom_device = {  
    "viewport": {"width": 412, "height": 915},  # 屏幕尺寸（如三星 S21）  
    "user_agent": "Mozilla/5.0 (Linux; Android 12; SM-G991B) AppleWebKit/537.36 ...",  # 安卓UA  
    "device_scale_factor": 2.625,  # 像素比  
    "is_mobile": True,  # 啟用移動(dòng)模式  
    "has_touch": True,  # 支持觸摸  
    "default_browser_type": "chromium"  
}  

# 創(chuàng)建上下文時(shí)使用自定義設(shè)備  
context = browser.new_context(** custom_device)  

2. 模擬觸摸事件（滑動(dòng)、捏合縮放）

移動(dòng)端核心交互依賴觸摸，Playwright 通過 page.touchscreen 提供觸摸 API：

• 滑動(dòng)操作（如上下滑動(dòng)頁(yè)面）：

  # 從 (x1, y1) 滑動(dòng)到 (x2, y2)（坐標(biāo)基于 viewport 尺寸）  
  page.touchscreen.tap(200, 300)  # 先點(diǎn)擊起點(diǎn)  
  page.touchscreen.press(200, 300)  # 按下  
  page.touchscreen.move(200, 600)  # 移動(dòng)（向下滑動(dòng)）  
  page.touchscreen.release()  # 松開  
  

• 捏合縮放（如放大圖片）：

  # 模擬雙指捏合：兩個(gè)觸摸點(diǎn)從遠(yuǎn)到近（縮小）  
  page.touchscreen.tap(100, 200)  
  page.touchscreen.tap(300, 200)  
  with page.expect_event("touchstart"):  
      page.touchscreen.press(100, 200)  
      page.touchscreen.press(300, 200)  
  with page.expect_event("touchmove"):  
      page.touchscreen.move(150, 200)  # 兩點(diǎn)靠近  
      page.touchscreen.move(250, 200)  
  page.touchscreen.release()  
  

3. 模擬地理位置（GPS 定位）

對(duì)依賴位置的應(yīng)用（如地圖、外賣），可模擬經(jīng)緯度：

# 設(shè)置初始地理位置（北京：北緯39.9，東經(jīng)116.4）  
context.set_geolocation(latitude=39.9, longitude=116.4)  

# 訪問需要定位的頁(yè)面（如百度地圖）  
page = context.new_page()  
page.goto("https://map.baidu.com")  
page.screenshot(path="beijing_location.png")  

# 動(dòng)態(tài)修改位置（切換到上海）  
context.set_geolocation(latitude=31.2, longitude=121.4)  
page.reload()  
page.screenshot(path="shanghai_location.png")  

4. 模擬網(wǎng)絡(luò)條件（2G/3G 環(huán)境）

移動(dòng)端常面臨弱網(wǎng)問題，可通過 context.set_extra_http_headers 或 page.route 限制網(wǎng)絡(luò)速度：

# 模擬 3G 網(wǎng)絡(luò)（下載 1MB/s，上傳 512KB/s，延遲 300ms）  
context = browser.new_context(**iphone_13)  
context.set_network_conditions(  
    download_throughput=1024 * 1024,  # 下載吞吐量（字節(jié)/秒）  
    upload_throughput=512 * 1024,    # 上傳吞吐量  
    latency=300                      # 延遲（毫秒）  
)  

# 測(cè)試弱網(wǎng)下頁(yè)面加載時(shí)間  
page = context.new_page()  
page.goto("https://www.taobao.com")  
print(f"頁(yè)面加載時(shí)間：{page.evaluate('performance.timing.loadEventEnd - performance.timing.navigationStart')}ms")  

四、響應(yīng)式布局測(cè)試：快速切換設(shè)備尺寸

通過動(dòng)態(tài)修改 viewport 測(cè)試頁(yè)面在不同尺寸下的響應(yīng)式表現(xiàn)：

# 定義多組設(shè)備尺寸（手機(jī)、平板、小屏手機(jī)）  
viewports = [  
    {"width": 375, "height": 667},  # iPhone SE  
    {"width": 768, "height": 1024}, # iPad  
    {"width": 320, "height": 568}   # 小屏手機(jī)  
]  

for vp in viewports:  
    context = browser.new_context(  
        viewport=vp,  
        is_mobile=True,  
        has_touch=True  
    )  
    page = context.new_page()  
    page.goto("https://example.com")  
    page.screenshot(path=f"responsive_{vp['width']}x{vp['height']}.png")  
    context.close()  

五、最佳實(shí)踐與注意事項(xiàng)

1. 結(jié)合截圖/錄屏驗(yàn)證：通過 page.screenshot() 或 context.tracing 錄制操作過程，直觀確認(rèn)布局和交互是否符合預(yù)期。

   # 開啟追蹤（記錄所有操作、網(wǎng)絡(luò)請(qǐng)求、DOM變化）  
   context.tracing.start(screenshots=True, snapshots=True)  
   # 執(zhí)行操作...  
   context.tracing.stop(path="mobile_trace.zip")  # 生成追蹤文件（可在 Playwright Trace Viewer 中查看）  
   

2. 處理移動(dòng)端特有元素：如漢堡菜單（點(diǎn)擊展開導(dǎo)航）、底部懸浮按鈕，需通過 page.locator 精準(zhǔn)定位（優(yōu)先使用 data-testid 等穩(wěn)定屬性）。

3. 與測(cè)試框架集成：結(jié)合 pytest 等框架實(shí)現(xiàn)批量用例執(zhí)行，例如：

   import pytest  
   from playwright.sync import sync_playwright  
   
   @pytest.mark.parametrize("device", ["iPhone 13", "Pixel 7", "iPad Pro 11"])  
   def test_mobile_compatibility(device):  
       with sync_playwright() as p:  
           browser = p.chromium.launch()  
           context = browser.new_context(** p.devices[device])  
           page = context.new_page()  
           page.goto("https://example.com")  
           assert page.title() == "Example Domain"  # 驗(yàn)證核心功能  
           context.close()  
           browser.close()  
   

4. 注意瀏覽器差異：移動(dòng)端 Safari（WebKit）和 Chrome（Chromium）對(duì) CSS/JS 的支持可能不同，建議用 p.webkit 和 p.chromium 分別測(cè)試。

總結(jié)

Playwright 移動(dòng)端模擬通過“設(shè)備上下文”實(shí)現(xiàn)了對(duì)屏幕、觸摸、網(wǎng)絡(luò)、地理位置的全方位模擬，結(jié)合內(nèi)置設(shè)備預(yù)設(shè)和自定義配置，可高效覆蓋從功能測(cè)試到兼容性驗(yàn)證的場(chǎng)景。其優(yōu)勢(shì)在于：無需真實(shí)設(shè)備、支持多瀏覽器、API 簡(jiǎn)潔且與桌面自動(dòng)化統(tǒng)一，大幅降低移動(dòng)端測(cè)試的門檻。

到此這篇關(guān)于使用Playwright進(jìn)行移動(dòng)端模擬測(cè)試的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Playwright 移動(dòng)端模擬測(cè)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論