使用Playwright进行移动端模拟测试的实现

Playwright 提供了强大的移动端模拟能力，支持模拟真实移动设备的屏幕尺寸、分辨率、用户代理（User Agent）、触摸事件、地理位置甚至网络条件，无需真实设备即可完成移动端网页/应用的功能与兼容性测试。以下是具体实现步骤与核心场景示例（以 Python 为例）：

一、核心原理：通过“设备上下文”模拟移动环境

Playwright 通过 browser.new_context() 或 chromium.launch_persistent_context() 创建“设备上下文（Context）”，在上下文配置中指定移动设备参数（如屏幕尺寸、UA 等），从而模拟移动浏览器行为。核心配置项包括：

• device_scale_factor：设备像素比（如视网膜屏为 2）；
• is_mobile：是否启用移动模式（开启后支持触摸事件）；
• viewport：屏幕可视区域大小（宽×高，单位像素）；
• user_agent：移动设备的 User Agent 字符串；
• has_touch：是否支持触摸事件（移动端需开启）。

二、基础操作：使用内置设备预设快速模拟

Playwright 内置了 50+ 常见移动设备配置（如 iPhone 13、Pixel 7、iPad Pro 等），无需手动配置参数，直接调用即可。

步骤 1：获取内置设备列表

通过 playwright.devices 查看所有预设设备，例如：

from playwright.sync import sync_playwright  

with sync_playwright() as p:  
    # 打印所有内置设备名称（如 "iPhone 13", "Pixel 7"）  
    print(list(p.devices.keys()))  

步骤 2：模拟指定设备访问网页

以“模拟 iPhone 13 访问百度”为例：

from playwright.sync import sync_playwright  

with sync_playwright() as p:  
    # 1. 选择要模拟的设备（如 iPhone 13）  
    iphone_13 = p.devices["iPhone 13"]  

    # 2. 启动浏览器，创建移动设备上下文  
    browser = p.chromium.launch(headless=False)  # headless=False 可看到浏览器界面  
    context = browser.new_context(  
        **iphone_13,  # 解构设备参数（包含 viewport、ua、is_mobile 等）  
        locale="zh-CN",  # 可选：设置语言  
    )  

    # 3. 打开页面，模拟移动操作  
    page = context.new_page()  
    page.goto("https://www.baidu.com")  

    # 4. 示例：模拟移动端搜索（点击搜索框→输入文本→点击搜索按钮）  
    page.locator("input[type='search']").click()  # 触摸点击  
    page.keyboard.type("Playwright 移动端测试")  
    page.locator("input[type='submit']").nth(0).click()  

    # 5. 截图验证效果（保存为移动端尺寸的图片）  
    page.screenshot(path="iphone_13_baidu.png")  

    # 6. 关闭资源  
    context.close()  
    browser.close()  

运行后，会看到浏览器以 iPhone 13 的屏幕尺寸（390×844）打开百度，且支持触摸交互。

三、高级模拟：自定义设备参数与场景

1. 自定义设备（非内置设备）

若需模拟特定设备（如某款安卓机型），可手动配置参数：

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,  # 启用移动模式  
    "has_touch": True,  # 支持触摸  
    "default_browser_type": "chromium"  
}  

# 创建上下文时使用自定义设备  
context = browser.new_context(** custom_device)  

2. 模拟触摸事件（滑动、捏合缩放）

移动端核心交互依赖触摸，Playwright 通过 page.touchscreen 提供触摸 API：

• 滑动操作（如上下滑动页面）：

  # 从 (x1, y1) 滑动到 (x2, y2)（坐标基于 viewport 尺寸）  
  page.touchscreen.tap(200, 300)  # 先点击起点  
  page.touchscreen.press(200, 300)  # 按下  
  page.touchscreen.move(200, 600)  # 移动（向下滑动）  
  page.touchscreen.release()  # 松开  
  

• 捏合缩放（如放大图片）：

  # 模拟双指捏合：两个触摸点从远到近（缩小）  
  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)  # 两点靠近  
      page.touchscreen.move(250, 200)  
  page.touchscreen.release()  
  

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

对依赖位置的应用（如地图、外卖），可模拟经纬度：

# 设置初始地理位置（北京：北纬39.9，东经116.4）  
context.set_geolocation(latitude=39.9, longitude=116.4)  

# 访问需要定位的页面（如百度地图）  
page = context.new_page()  
page.goto("https://map.baidu.com")  
page.screenshot(path="beijing_location.png")  

# 动态修改位置（切换到上海）  
context.set_geolocation(latitude=31.2, longitude=121.4)  
page.reload()  
page.screenshot(path="shanghai_location.png")  

4. 模拟网络条件（2G/3G 环境）

移动端常面临弱网问题，可通过 context.set_extra_http_headers 或 page.route 限制网络速度：

# 模拟 3G 网络（下载 1MB/s，上传 512KB/s，延迟 300ms）  
context = browser.new_context(**iphone_13)  
context.set_network_conditions(  
    download_throughput=1024 * 1024,  # 下载吞吐量（字节/秒）  
    upload_throughput=512 * 1024,    # 上传吞吐量  
    latency=300                      # 延迟（毫秒）  
)  

# 测试弱网下页面加载时间  
page = context.new_page()  
page.goto("https://www.taobao.com")  
print(f"页面加载时间：{page.evaluate('performance.timing.loadEventEnd - performance.timing.navigationStart')}ms")  

四、响应式布局测试：快速切换设备尺寸

通过动态修改 viewport 测试页面在不同尺寸下的响应式表现：

# 定义多组设备尺寸（手机、平板、小屏手机）  
viewports = [  
    {"width": 375, "height": 667},  # iPhone SE  
    {"width": 768, "height": 1024}, # iPad  
    {"width": 320, "height": 568}   # 小屏手机  
]  

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()  

五、最佳实践与注意事项

1. 结合截图/录屏验证：通过 page.screenshot() 或 context.tracing 录制操作过程，直观确认布局和交互是否符合预期。

   # 开启追踪（记录所有操作、网络请求、DOM变化）  
   context.tracing.start(screenshots=True, snapshots=True)  
   # 执行操作...  
   context.tracing.stop(path="mobile_trace.zip")  # 生成追踪文件（可在 Playwright Trace Viewer 中查看）  
   

2. 处理移动端特有元素：如汉堡菜单（点击展开导航）、底部悬浮按钮，需通过 page.locator 精准定位（优先使用 data-testid 等稳定属性）。

3. 与测试框架集成：结合 pytest 等框架实现批量用例执行，例如：

   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"  # 验证核心功能  
           context.close()  
           browser.close()  
   

4. 注意浏览器差异：移动端 Safari（WebKit）和 Chrome（Chromium）对 CSS/JS 的支持可能不同，建议用 p.webkit 和 p.chromium 分别测试。

总结

Playwright 移动端模拟通过“设备上下文”实现了对屏幕、触摸、网络、地理位置的全方位模拟，结合内置设备预设和自定义配置，可高效覆盖从功能测试到兼容性验证的场景。其优势在于：无需真实设备、支持多浏览器、API 简洁且与桌面自动化统一，大幅降低移动端测试的门槛。

到此这篇关于使用Playwright进行移动端模拟测试的实现的文章就介绍到这了,更多相关Playwright 移动端模拟测试内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论