Playwright接口请求

一、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%40814b33c1%3Bcommon%2Floading.css%409e2c3f4f