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：模拟指定设备访问网页
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()
注意浏览器差异：移动端 Safari（WebKit）和 Chrome（Chromium）对 CSS/JS 的支持可能不同，建议用 p.webkit 和 p.chromium 分别测试。
总结
Playwright 移动端模拟通过“设备上下文”实现了对屏幕、触摸、网络、地理位置的全方位模拟，结合内置设备预设和自定义配置，可高效覆盖从
功能测试到兼容性验证的场景。其优势在于：无需真实设备、支持多浏览器、API 简洁且与桌面自动化统一，大幅降低移动端测试的门槛。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
