济南建设网站需要html5风格网站特色

济南建设网站需要,html5风格网站特色,网站建设的基本流程规范,企业网站建设问题研究Playwright 网络拦截#xff08;Route Request Interception#xff09;#xff08;2025 年最新版#xff09; 网络拦截是 Playwright 最强大的功能之一#xff0c;允许你拦截、修改、mock 或中止浏览器发出的任何网络请求#xff08;XHR、fetch、API 调用、图片、…Playwright 网络拦截Route Request Interception2025 年最新版网络拦截是 Playwright 最强大的功能之一允许你拦截、修改、mock 或中止浏览器发出的任何网络请求XHR、fetch、API 调用、图片、CSS 等。常用于Mock API 响应加速测试、避免真实后端依赖测试错误场景404、500、超时修改请求头/参数模拟网络延迟或离线捕获 API 数据进行断言Playwright 使用page.route()和route.handler()实现拦截支持通配符匹配。1.基本用法拦截并 Mock 响应// tests/mock-api.spec.tsimport{test,expect}fromplaywright/test;test(Mock API 返回固定数据,async({page}){// 拦截所有 /api/users 请求awaitpage.route(**/api/users,asyncroute{// Mock 一个成功的 JSON 响应awaitroute.fulfill({status:200,contentType:application/json,headers:{Access-Control-Allow-Origin:*},// 可选处理 CORSbody:JSON.stringify([{id:1,name:Mock 用户1},{id:2,name:Mock 用户2},]),});});awaitpage.goto(https://your-app.com/users);// 页面会显示我们 mock 的数据awaitexpect(page.getByRole(heading)).toHaveText(用户列表);awaitexpect(page.getByText(Mock 用户1)).toBeVisible();});2.常见拦截模式场景代码示例说明继续原请求不修改await route.continue();默认行为常用于日志记录修改请求添加头/参数await中止请求模拟失败await route.abort(failed);或await route.abort();触发 network error模拟错误响应await route.fulfill({br status: 500,br body: Server Errorbr});返回 4xx/5xx重定向await route.fulfill({ status: 301, headers: { location: /new-url } });模拟重定向模拟网络延迟await page.route(**/*, async route {br await new Promise(r setTimeout(r, 2000)); // 延迟 2sbr await route.continue();br});测试 loading 状态拦截特定类型资源await page.route(**/*.{png,jpg,jpeg}, route route.abort());阻塞图片加载加速测试3.高级根据请求动态决定awaitpage.route(**/api/**,asyncroute{constmethodroute.request().method();if(methodGETroute.request().url().includes(users/1)){awaitroute.fulfill({json:{id:1,name:特殊用户,vip:true}});// shorthand for JSON}elseif(methodPOST){// 记录请求体用于断言constpostDataroute.request().postDataJSON();console.log(收到 POST 数据:,postData);awaitroute.fulfill({status:201,json:{success:true}});}else{awaitroute.continue();}});4.捕获响应进行断言// 等待特定响应并验证const[response]awaitPromise.all([page.waitForResponse(**/api/login),page.getByRole(button,{name:登录}).click(),]);expect(response.status()).toBe(200);constjsonawaitresponse.json();expect(json.token).toBeTruthy();5.拦截 WebSocketPlaywright v1.30 支持awaitpage.route(wss://example.com/socket,route{// WebSocket 拦截目前有限制通常用 route.continue() page.on(websocket)route.continue();});page.on(websocket,ws{console.log(WebSocket 打开:${ws.url()});ws.on(framesent,frameconsole.log(发送:,frame));});6.Python 版示例Mock APIdefhandle_route(route):ifapi/usersinroute.request.url:route.fulfill(status200,content_typeapplication/json,body[{id:1,name:Mock 用户}])else:route.continue_()page.route(**/api/**,handle_route)page.goto(https://your-app.com)最佳实践总结匹配规则使用**/通配符如**/api/**覆盖所有子路径。优先级先定义具体路由后定义通用路由后定义的优先。清理测试结束无需手动 unroutePlaywright 会自动清理。生产测试结合route.fulfill()mock 不稳定第三方 API。调试用page.on(request)和page.on(response)打印日志观察拦截效果。网络拦截能让你完全掌控测试环境避免外部依赖导致的 flaky 测试。下一步建议实现一个完整的登录流程使用网络拦截 mock 登录 API 并验证返回 token。需要更复杂的场景如文件下载拦截、GraphQL Mock、多环境切换随时告诉我