Webeye: A Low‑Code UI Automation Platform for Comprehensive Web Monitoring

UI automation case maintenance is costly and lacks universality, so the article proposes the low‑code UI automation platform Webeye to quickly and efficiently build web UI monitoring.

1. System Monitoring Overview Monitoring is a core guarantee of high availability; it includes logging (discrete events), metrics (aggregated numeric data), and tracing (request‑level call chains). Logging and metrics differ in data granularity, while tracing can be viewed as a specialized form of logging.

1.1 Common Monitoring Forms Logging records events such as access and program logs. Metrics capture aggregatable data like CPU usage or queue depth, with tools like Zabbix and Prometheus. Tracing records RPC call details, helping map complex micro‑service dependencies.

1.2 Systematic Monitoring Architecture A five‑layer model (hardware, middleware, backend, business flow, UI) is proposed, with monitoring covering each layer.

Physical Layer Monitors IaaS hardware metrics via agents and time‑series databases.

Middleware Layer Uses exporters (e.g., Prometheus) to collect PaaS middleware metrics.

Application Layer Collects program logs, access logs, and tracing data, storing them in distributed stores such as Elasticsearch.

Business Flow Layer Validates end‑to‑end business processes either via dedicated business APIs or direct SQL checks.

UI Layer Monitors page content and interaction, essential for user experience; includes plugin monitoring and UI automation.

2. Common Web Monitoring Solutions

2.1 Plugin Monitoring Injects JavaScript into pages to collect errors and performance data, reporting to an ES cluster. Limitations include low timeliness, inability to detect network‑level failures, and lack of business‑logic visibility.

2.2 UI Automation Uses headless browsers (e.g., Puppeteer) with scripts in Python or Node.js to perform proactive checks. While precise, it incurs high learning and maintenance costs.

3. Webeye System Introduction

3.1 What Is Webeye Webeye implements the UI‑automation inspection workflow with a headless browser, offering a configuration‑driven low‑code platform. Its two core concepts are Actions (e.g., load page, scroll, click, input) and Validators (global and action‑specific checks such as HTTP status, network errors, API return codes, JS errors, visible DOM count, content matching, etc.).

3.2 Actions and Validators Global validators monitor the entire page lifecycle, while action validators assess results of individual actions. Examples include visible_dom_count after a load action, query_dom_count and query_dom_content_contains after a DOM query, and interaction actions like mouse_wheel , user_click , and user_input .

4. Webeye Usage Example A typical lead‑capture scenario is shown: a series of actions (load page, query DOM for car model, input name and phone, click submit, verify success message) are configured via the low‑code UI, generating a JSON configuration that monitors both technical errors and business‑flow correctness.

5. Issues and Summary

5.1 Ensuring Extensibility Webeye adopts a template‑method pattern; adding new actions or validators only requires implementing a function and registering it.

5.2 Flexible Selectors Enhanced selectors (e.g., .more_message[0] ) overcome limitations of standard CSS selectors when multiple identical elements exist.

5.3 Avoiding Impact on Business Statistics Traffic generated by headless browsers is filtered via a blacklist to prevent skewing production metrics.

6. Conclusion The article summarizes a systematic monitoring architecture and details the design and usage of the Webeye low‑code UI automation platform, which now covers over 90% of core C‑end pages in the author’s business, detecting 50% of all incidents within two months of deployment.