Playwright事件监控

沈宥

发布于 2022-12-05 14:27:15

2.4K0

发布于 2022-12-05 14:27:15

文章被收录于专栏：从头开始学习测试开发从头开始学习测试开发

一、Page.on添加监控

1、全部监控事件

page.on("close")
page.on("console")
page.on("crash")
page.on("dialog")
page.on("domcontentloaded")
page.on("download")
page.on("filechooser")
page.on("frameattached")
page.on("framedetached")
page.on("framenavigated")
page.on("load")
page.on("pageerror")
page.on("popup")
page.on("request")
page.on("requestfailed")
page.on("requestfinished")
page.on("response")
page.on("websocket")
page.on("worker")

2、Page.goto(url)解析过程

(1)通过网络加载解析页面 (2)触发 page.on("domcontentloaded") 事件 (3)执行页面的 js 脚本，加载静态资源 (4)触发 page.on("laod")事件 (5)页面执行动态加载的脚本 (6)当 500ms 都没有新的网络请求的时候，触发 networkidle 事件

3、监听请求和响应时间

from playwright.sync_api import sync_playwright

def run_request(playwright):
    chromium = playwright.chromium  # or "firefox" or "webkit".

    # 手机设备设置为iPhone 12 Pro Max
    iphone_12 = playwright.devices['iPhone 12']
    # 启动谷歌有窗口浏览器
    browser = chromium.launch(headless=False)
    # 配置用户定位信息
    context = browser.new_context(
        **iphone_12,
        locale='zh-CN',
        geolocation={'longitude': 116.39014, 'latitude': 39.913904},
        permissions=['geolocation']
    )

    page = context.new_page()

    # 监听请求事件
    page.on("request", lambda request: print("request: ", request.method, request.url))
    # 监听响应事件
    page.on("response", lambda response: print("response: ", response.status, response.url))

    # 打开高德H5网页
    page.goto("https://m.amap.com/")

    browser.close()


with sync_playwright() as playwright:
    run_request(playwright)

高德H5网页为例，运行后，可查看监听结果：

request:  GET https://m.amap.com/
response:  200 https://m.amap.com/
request:  GET https://a.amap.com/pc/static/config/config_m/lbs_m_about.js
request:  GET https://g.alicdn.com/aes/??tracker/1.0.34/index.js,tracker-plugin-jserror/1.0.13/index.js,tracker-plugin-api/1.1.11/index.js,tracker-plugin-perf/1.1.6/index.js,tracker-plugin-longtask/1.0.1/index.js,tracker-plugin-pv/2.4.4/index.js,tracker-plugin-event/1.2.5/index.js
request:  GET https://m.amap.com/img/roadbook/share01.png
request:  GET https://webapi.amap.com/maps?v=1.4.15&key=ab403a9b356e63c917ff05b037cd3e7d&plugin=AMap.Scale
request:  GET https://g.alicdn.com/alilog/mlog/aplus_wap.js
request:  GET https://g.alicdn.com/??/AWSC/AWSC/awsc.js,/sd/baxia-entry/baxiaCommon.js
response:  200 https://a.amap.com/pc/static/config/config_m/lbs_m_about.js
response:  200 https://g.alicdn.com/aes/??tracker/1.0.34/index.js,tracker-plugin-jserror/1.0.13/index.js,tracker-plugin-api/1.1.11/index.js,tracker-plugin-perf/1.1.6/index.js,tracker-plugin-longtask/1.0.1/index.js,tracker-plugin-pv/2.4.4/index.js,tracker-plugin-event/1.2.5/index.js
response:  200 https://g.alicdn.com/alilog/mlog/aplus_wap.js
response:  200 https://m.amap.com/img/roadbook/share01.png
response:  200 https://g.alicdn.com/??/AWSC/AWSC/awsc.js,/sd/baxia-entry/baxiaCommon.js
response:  200 https://webapi.amap.com/maps?v=1.4.15&key=ab403a9b356e63c917ff05b037cd3e7d&plugin=AMap.Scale
request:  GET https://webapi.amap.com/maps/modules?v=1.4.20&key=ab403a9b356e63c917ff05b037cd3e7d&vrs=1656665904502&m=touch,vectorlayer,overlay,wgl,AMap.Scale,sync
response:  200 https://webapi.amap.com/maps/modules?v=1.4.20&key=ab403a9b356e63c917ff05b037cd3e7d&vrs=1656665904502&m=touch,vectorlayer,overlay,wgl,AMap.Scale,sync
request:  GET https://m.amap.com/_AMapService/v3/log/init?s=rsv3&product=JsInit&key=ab403a9b356e63c917ff05b037cd3e7d&t=1664351120061&resolution=428*746&mob=1&vt=1&dpr=3&scale=1&detect=true&callback=jsonp_435631_&platform=JS&logversion=2.0&appname=https%3A%2F%2Fm.amap.com%2F&csid=F64A5D3D-16B5-48A0-9404-611F68EFA37C&sdkversion=1.4.20
request:  GET blob:https://m.amap.com/9bdbb862-8b44-494a-a0e8-86ff992fa1ed
request:  GET blob:https://m.amap.com/a6119d09-0962-47de-96f1-47dcd5fc7705
request:  GET https://g.alicdn.com/alilog/??s/8.15.21/plugin/aplus_client.js,aplus_cplugin/0.7.11/toolkit.js,aplus_cplugin/0.7.11/monitor.js,s/8.15.21/aplus_wap.js,s/8.15.21/plugin/aplus_spmact.js?v=20220926175630
request:  GET https://g.alicdn.com/??/sd/baxia/2.2.3/baxiaCommon.js
request:  GET https://g.alicdn.com/AWSC/fireyejs/1.223.1/fireyejs.js
request:  GET https://m.amap.com/service/combo/?f=core.js%401e866267%3Bvendor.js%402ee99dec%3Bplugin.js%40acc676e2%3Bcommon.js%406172da20%3Btpl.js%40f551753b%3Bcomponent.js%40120d739d%3Bbase.js%40dda90493
request:  GET https://m.amap.com/service/combo/?f=base%2Fpure.css%40a9531f16%3Bcommon.css%40814b33c1%3Bcommon%2Floading.css%409e2c3f4f
response:  200 blob:https://m.amap.com/9bdbb862-8b44-494a-a0e8-86ff992fa1ed

二、Page.route拦截更改网络请求

1、全部拦截方法

route.abort(**kwargs)
route.continue_(**kwargs)
route.fallback(**kwargs)
route.fulfill(**kwargs)
route.request

2、拦截所有的图片请求

from playwright.sync_api import sync_playwright
import re


def run_route(playwright):
    """
    拦截所有的图片请求
    :param playwright:
    :return:
    """
    chromium = playwright.chromium  # or "firefox" or "webkit".

    # 手机设备设置为iPhone 12 Pro Max
    iphone_12 = playwright.devices['iPhone 12']
    # 启动谷歌有窗口浏览器
    browser = chromium.launch(headless=False)
    # 配置用户定位信息
    context = browser.new_context(
        **iphone_12,
        locale='zh-CN',
        geolocation={'longitude': 116.39014, 'latitude': 39.913904},
        permissions=['geolocation']
    )

    page = context.new_page()
    # route 的参数默认是通配符，也可以传递编译好的正则表达式对象
    page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())
    page.route(re.compile(r"(\.png$)|(\.jpg$)"), lambda route: route.abort())

    # 监听请求事件
    page.on("request", lambda request: print("request: ", request.method, request.url))
    # 监听响应事件
    page.on("response", lambda response: print("response: ", response.status, response.url))
    page.goto("https://m.amap.com/", wait_until='domcontentloaded')
    browser.close()

仍然以高德H5网页为例，拦截图片请求后，可看到运行结果中无图片请求返回结果

request:  GET https://m.amap.com/
response:  200 https://m.amap.com/
request:  GET https://a.amap.com/pc/static/config/config_m/lbs_m_about.js
request:  GET https://g.alicdn.com/aes/??tracker/1.0.34/index.js,tracker-plugin-jserror/1.0.13/index.js,tracker-plugin-api/1.1.11/index.js,tracker-plugin-perf/1.1.6/index.js,tracker-plugin-longtask/1.0.1/index.js,tracker-plugin-pv/2.4.4/index.js,tracker-plugin-event/1.2.5/index.js
response:  200 https://a.amap.com/pc/static/config/config_m/lbs_m_about.js
request:  GET https://webapi.amap.com/maps?v=1.4.15&key=ab403a9b356e63c917ff05b037cd3e7d&plugin=AMap.Scale
response:  200 https://g.alicdn.com/aes/??tracker/1.0.34/index.js,tracker-plugin-jserror/1.0.13/index.js,tracker-plugin-api/1.1.11/index.js,tracker-plugin-perf/1.1.6/index.js,tracker-plugin-longtask/1.0.1/index.js,tracker-plugin-pv/2.4.4/index.js,tracker-plugin-event/1.2.5/index.js
request:  GET https://g.alicdn.com/alilog/mlog/aplus_wap.js
request:  GET https://g.alicdn.com/??/AWSC/AWSC/awsc.js,/sd/baxia-entry/baxiaCommon.js
request:  GET https://m.amap.com/img/roadbook/share01.png
response:  200 https://webapi.amap.com/maps?v=1.4.15&key=ab403a9b356e63c917ff05b037cd3e7d&plugin=AMap.Scale
response:  200 https://g.alicdn.com/alilog/mlog/aplus_wap.js
response:  200 https://g.alicdn.com/??/AWSC/AWSC/awsc.js,/sd/baxia-entry/baxiaCommon.js
request:  GET https://webapi.amap.com/maps/modules?v=1.4.20&key=ab403a9b356e63c917ff05b037cd3e7d&vrs=1656665904502&m=touch,vectorlayer,overlay,wgl,AMap.Scale,sync
response:  200 https://webapi.amap.com/maps/modules?v=1.4.20&key=ab403a9b356e63c917ff05b037cd3e7d&vrs=1656665904502&m=touch,vectorlayer,overlay,wgl,AMap.Scale,sync
request:  GET https://m.amap.com/_AMapService/v3/log/init?s=rsv3&product=JsInit&key=ab403a9b356e63c917ff05b037cd3e7d&t=1664354421103&resolution=390*664&mob=1&vt=1&dpr=3&scale=1&detect=true&callback=jsonp_347588_&platform=JS&logversion=2.0&appname=https%3A%2F%2Fm.amap.com%2F&csid=D889FEBD-1BB4-49DC-8BFE-BFA8A8DB53E3&sdkversion=1.4.20
request:  GET https://g.alicdn.com/alilog/??s/8.15.21/plugin/aplus_client.js,aplus_cplugin/0.7.11/toolkit.js,aplus_cplugin/0.7.11/monitor.js,s/8.15.21/aplus_wap.js,s/8.15.21/plugin/aplus_spmact.js?v=20220926175630
request:  GET https://g.alicdn.com/??/sd/baxia/2.2.3/baxiaCommon.js
request:  GET https://g.alicdn.com/AWSC/fireyejs/1.223.1/fireyejs.js
request:  GET https://m.amap.com/service/combo/?f=core.js%401e866267%3Bvendor.js%402ee99dec%3Bplugin.js%40acc676e2%3Bcommon.js%406172da20%3Btpl.js%40f551753b%3Bcomponent.js%40120d739d%3Bbase.js%40dda90493
request:  GET https://m.amap.com/service/combo/?f=base%2Fpure.css%40a9531f16%3Bcommon.css

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-09-29，如有侵权请联系 cloudcommunity@tencent.com 删除

http

html5

本文分享自从头开始学习测试开发微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

http

html5

登录后参与评论

0 条评论

热度

Playwright事件监控

Playwright事件监控

一、Page.on添加监控

1、全部监控事件

2、Page.goto(url)解析过程

3、监听请求和响应时间

二、Page.route拦截更改网络请求

1、全部拦截方法

2、拦截所有的图片请求

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐