ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Cloudprober Browser 探针:用 Playwright 实现网页端到端监控的完整指南

Cloudprober Browser 探针:用 Playwright 实现网页端到端监控的完整指南 Cloudprober Browser 探针用 Playwright 实现网页端到端监控的完整指南【免费下载链接】cloudproberAn active monitoring software to detect failures before your customers do.项目地址: https://gitcode.com/gh_mirrors/clo/cloudprober凌晨三点你的下单流程悄悄崩了——不是服务器宕机而是页面某个按钮的点击事件失效。用户会等到第二天上班才投诉而你希望在客户发现之前就检测到故障。这正是 Cloudprober 的用武之地。作为一款主动式监控软件Cloudprober 通过Browser 探针Browser Probe把 Playwright 浏览器测试变成了 7×24 小时不间断的网页端到端监控让故障在影响用户之前就被发现并告警。本文将带你从零开始掌握这套开箱即用的网页监控方案。为什么网页端到端监控不能只靠 CI 里的 Playwright普通的 Playwright 测试只在运行时告诉你通过或失败适合 CI 场景。但生产环境需要的是持续执行定时跑、出指标、可告警、失败后能回溯排查。自己拼装意味着要写 cron 任务、定制指标导出、搭建产物存储脚本——而 Browser 探针把这些全部做成了 Cloudprober 的一等公民。官方文档docs/official.mdBrowser 探针的 3 大核心能力1. 零埋点的自动化可观测性每次探针运行都会自动产出标准指标无需任何额外埋点指标说明total/success/latency标准探针级计数器test_status{test, suite, tags, status}每个测试的通过/失败计数test_latency{test, suite, tags, status}每个测试的耗时微秒这些指标可直接流向Prometheus、Stackdriver、OpenTelemetry、CloudWatch等任意 surfacer还能配合 Cloudprober 的告警功能通过 PagerDuty、Slack、邮件或 Webhook 第一时间通知你。更进一步开启enable_step_metrics: true后还能拿到逐步指标——比如加入购物车这一步究竟耗时多久。你的 Playwright 测试里只需用test.step()包裹操作Cloudprober 启动时自动生成的 reporter 会帮你采集实现见 cloudprober-reporter.ts.tmpl。2. 内置的产物管理界面每次运行生成的截图、Trace 和 HTML 报告都会被 Cloudprober 存储、清理并通过内置的Artifacts Viewer提供访问。查看器支持按日期与时间戳浏览、按时间范围筛选、勾选 Failure Only 只看失败记录、点击直达 Playwright HTML 报告或截图。产物既可以存本地也可以同时并行上传到 S3、GCS 或 Azure Blob Storage互不阻塞。3. 生产级运维细节重试抓 Tracesave_trace: ON_FIRST_RETRY只在重试时抓取 Playwright Trace存储开销更小自动清理按max_age_sec自动回收过期产物目标感知探针自动注入target_name、target_ip、target_port等环境变量一份测试脚本即可监控多个端点。最快配置方法5 分钟跑通第一个浏览器探针第一步写好 Cloudprober 配置probe { name: website_e2e type: BROWSER interval_msec: 60000 timeout_msec: 30000 targets { host_names: playwright.dev } browser_probe { test_spec: website.spec.ts test_dir: /tests retries: 1 save_screenshots_for_success: true save_trace: ON_FIRST_RETRY } global_artifacts_options { serve_on_web: true storage { local_storage { dir: /artifacts cleanup_options { max_age_sec: 86400 } } } } }这份配置每分钟对playwright.dev跑一次端到端测试失败重试 1 次产物保留 24 小时。第二步编写 Playwright 测试// /tests/website.spec.ts import { test, expect } from playwright/test; // target_name 由 Cloudprober 注入 const baseURL https://${process.env.target_name}; test.describe(Website, () { test(home page and navigation, async ({ page }) { await test.step(Load home page, async () { await page.goto(baseURL); await expect(page).toHaveTitle(/Playwright/); }); await test.step(Navigate to docs, async () { await page.getByRole(link, { name: Get started }).click(); await expect(page.getByRole(heading, { name: Installation })).toBeVisible(); }); }); });不需要装任何 SDKCloudprober 启动时会自动生成 Playwright 配置和 reporter模板见 playwright.config.ts.tmpl。第三步一键启动 Docker 容器推荐使用自带 Playwright 和 Chromium 的官方镜像省去繁琐的环境配置docker run --rm -v /path/to/config.cfg:/etc/cloudprober.cfg \ -v /path/to/tests:/tests \ -v /tmp/artifacts:/artifacts \ -p 9313:9313 \ cloudprober/cloudprober:latest-pw启动后访问http://host:9313/artifacts/website_e2e/就能看到产物查看器。核心逻辑都封装在 browser.go 中想深入了解实现细节可以直接读源码。常见问题速查探针挂了但测试是好的Cloudprober 会区分环境故障如浏览器二进制缺失、Playwright 包无法解析与目标故障环境问题计入internal_errors指标方便你快速定位是监控环境坏了还是业务真的挂了。只想跑部分用例用test_spec_filter按标题正则过滤例如include: smoke|critical、exclude: draft等价于 Playwright 的--grep/--grep-invert。如何指定测试目录test_dir默认取配置文件所在目录也可以用test_spec精确定位某个 spec 文件源码见 browser.go 中的匹配逻辑。结语Cloudprober Browser 探针的真正价值是把偶尔跑一次的 Playwright 测试升级为生产级的持续网页端到端监控自动调度、指标导出、告警联动、产物留档一应俱全。下次再有人问页面坏了你知道吗你可以自信地回答3 秒前就知道了。【免费下载链接】cloudproberAn active monitoring software to detect failures before your customers do.项目地址: https://gitcode.com/gh_mirrors/clo/cloudprober创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表