《最新出炉》系列小成篇-Python+Playwright自动化测试-67 - 模拟手机浏览器兼容性测试

1.简介

在日常工作中，我们会遇到需要使用不同的硬件设备测试兼容性的问题，尤其是现在手机型号基本上是每个厂家每年发布一款新机型，而且手机的屏幕大小分辨率五花八门的，我们基本不可能全部机型都用真机测试一遍，playwright提供了模仿机型的功能，我们可以使用playwright来模拟设备。使用 Playwright，你可以在任何浏览器上测试你的应用程序，也可以模拟真实设备，例如手机或平板电脑。只需配置你想要模拟的设备，Playwright 就会模拟浏览器行为，例如“userAgent”、“screenSize”、“viewport”以及是否启用了“hasTouch”。你还可以为所有测试或特定测试模拟“地理位置”、“区域设置”和“时区”，以及设置“权限”以显示通知或更改“colorScheme”。

在今天的 Web 开发中，移动设备已经成为用户访问网站的主要方式之一。因此，确保网站在移动设备上的正确显示和功能正常运行至关重要。Playwright 是一个强大的自动化测试工具，可以帮助开发人员模拟各种移动设备，并进行自动化测试。本文将深入介绍如何使用 Python 编写代码来模拟手机设备，并进行移动端自动化测试。

2.什么是移动设备模拟？

移动设备模拟是指模拟移动设备的硬件和软件特性，以便在桌面浏览器中准确呈现网站。这包括模拟设备的屏幕大小、分辨率、用户代理字符串等。通过模拟移动设备，开发人员可以更准确地测试其网站在移动设备上的性能和用户体验。

3.模拟手机语法

模拟手机介绍官方API的文档地址：Emulation | Playwright Python

3.1devices

1.Playwright 附带了一个设备参数注册表，使用 playwright.devices 为选定的台式机、平板电脑和移动设备提供服务。它可用于模拟特定设备的浏览器行为，例如用户代理、屏幕尺寸、视口以及是否启用了触摸。所有测试都将使用指定的设备参数运行。

代码语言：javascript复制

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):
    iphone_13 = playwright.devices['iPhone 13']
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context(
        **iphone_13,
    )
    # context = browser.new_context()
    page = context.new_page()
    page.goto("https://www.baidu.com")
    page.wait_for_timeout(5000)

with sync_playwright() as playwright:
    run(playwright)

2.运行代码后电脑端的浏览器的动作（窗口界面变成手机模式的窗口）。如下图所示：

3.2Viewport

1.viewport包含在设备中，但是你可以使用Page.setViewportSize()来覆盖设备中的viewport，对其重新设置。

代码语言：javascript复制

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):
    # iphone_13 = playwright.devices['iPhone 13']
    browser = playwright.chromium.launch(headless=False)
    # context = browser.new_context(
    #     **iphone_13,
    # )
    # page = context.new_page()
    # Create context with given viewport
    context = browser.new_context(
        viewport={'width': 1280, 'height': 1024}
    )
    page = context.new_page()
    # Resize viewport for individual page
    page.set_viewport_size({"width": 1600, "height": 1200})

    # Emulate high-DPI
    context = browser.new_context(
        viewport={'width': 2560, 'height': 1440},
        device_scale_factor=2,
    )

    page.goto("https://www.baidu.com")
    page.wait_for_timeout(5000)

with sync_playwright() as playwright:
    run(playwright)

2.运行代码后电脑端的浏览器的动作。如下图所示：

3.3isMobile

是否考虑原viewport标记并启用了触摸事件。

代码语言：javascript复制

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):

    browser = playwright.chromium.launch(headless=False)

    context = browser.new_context( is_mobile = False)
    page = context.new_page()
    page.goto("https://www.baidu.com")
    page.wait_for_timeout(5000)

with sync_playwright() as playwright:
    run(playwright)

官网的写法如下，但是宏哥运行报错了：

代码语言：javascript复制

context = browser.new_context(
  isMobile=false
)

然后宏哥进入方法中看了一下，可能官方文档没有更新吧。如下图所示：

3.4设置语言和时区

1.模拟用户区域设置和时区，可以为配置中的所有测试全局设置，然后为特定测试覆盖。

代码语言：javascript复制

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):

    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context(
        locale='de-DE',
        timezone_id='Europe/Berlin'
    )
    page = context.new_page()
    page.goto("https://bing.com")
    page.pause()
    page.wait_for_timeout(5000)

with sync_playwright() as playwright:
    run(playwright)

2.运行代码后电脑端的浏览器的动作（可以看到浏览器的一些内容已经变成德文了）。如下图所示：

3.5权限

1.允许应用显示系统通知。

代码语言：javascript复制

context = browser.new_context(
  permissions=['notifications'],
)

2.允许针对特定域（网站）的通知。

代码语言：javascript复制

context.grant_permissions(['notifications'], origin='https://skype.com')

3.撤销所有权限。

代码语言：javascript复制

context.clear_permissions()

3.6设置地理位置

1.授予权限并将地理位置设置为特定区域。

代码语言：javascript复制

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):

    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context(
        geolocation={"longitude": 41.890221, "latitude": 12.492348},
        permissions=["geolocation"]
    )
    page = context.new_page()
    page.goto("https://map.baidu.com/")
    page.pause()
    page.wait_for_timeout(5000)

with sync_playwright() as playwright:
    run(playwright)

2.运行代码后电脑端的浏览器的动作（我们看到位置信息由“北京市”变成了“eli dar”）。如下图所示：

稍后更改位置：

代码语言：javascript复制

context.set_geolocation({"longitude": 48.858455, "latitude": 2.294474})

敲黑板：请注意，您只能更改上下文中所有页面的地理位置。

3.7设置网站显示颜色（深色或浅色）

模拟用户。支持的值为 'light'、'dark'、'no-preference'。您还可以使用 page.emulate_media（） 模拟媒体类型。"colorScheme"

代码语言：javascript复制

# Create context with dark mode
context = browser.new_context(
  color_scheme='dark' # or 'light'
)

# Create page with dark mode
page = browser.new_page(
  color_scheme='dark' # or 'light'
)

# Change color scheme for the page
page.emulate_media(color_scheme='dark')

# Change media for page
page.emulate_media(media='print')

3.8User Agent

用户代理包含在设备中，因此您很少需要更改它，但是，如果您确实需要测试其他用户代理，则可以使用该属性覆盖它。userAgent

代码语言：javascript复制

context = browser.new_context(
  user_agent='My user agent'
)

3.9模拟网络离线

模拟网络处于脱机状态。

代码语言：javascript复制

context = browser.new_context(
  offline=True
)

3.10启用和禁用JavaScript

模拟禁用 JavaScript 的用户方案。

代码语言：javascript复制

context = browser.new_context(
  java_script_enabled=False
)

4.设置手机模式

其实这个在前边的设备中就已经提到过在了，不过她作为今天的主角，宏哥这里就拿出来 再次讲解一下。具体步骤如下：

1.配置需要模拟的设备，我们需要配置我们使用的设备，Playwright 就会模拟浏览器行为，例如"userAgent"、"screenSize"以及"viewport"是否"hasTouch"启用。

2.还可以为所有测试或特定测试模拟,以及设置以"geolocation"显示通知或更改.“locale”“timezone”“permissions”“colorScheme”

3.Playwright使用playwright.devices为选定的台式机、平板电脑和移动设备提供设备参数注册表。

4.它可用于模拟特定设备的浏览器行为，例如用户代理、屏幕尺寸、视口以及是否启用了触摸。所有测试都将使用指定的设备参数运行。

Playwright 提供了丰富的 API，可以方便地模拟各种移动设备。以下是一个示例，演示了如何使用 Playwright 模拟 iPhone X 并访问网站：

代码语言：javascript复制

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context(
        **p.devices['iPhone X']
    )
    page = context.new_page()
    
    page.goto('https://example.com')

    # 进行移动端自动化测试
    # Your code here

在这个示例中，我们使用 p.devices['iPhone X'] 来选择模拟的设备。然后，我们在该设备上创建一个新的浏览器上下文，并访问网站。

4.1执行移动端自动化测试

代码语言：javascript复制

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context(
        **p.devices['iPhone X']
    )
    page = context.new_page()
    
    page.goto('https://example.com')

    # 测试响应式布局
    # Your code here

    # 测试交互功能
    # Your code here

4.2项目实战

宏哥这里还是以度娘搜索“北京宏哥”为例进行实战演示。

4.2.1代码设计

4.2.2参考代码

代码语言：javascript复制

# coding=utf-8


	

浏览器 兼容性测试 python 自动化测试 playwright 


	




	
 0 人点赞