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

五、最佳实践与注意事项

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

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

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

与测试框架集成：结合 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()