webmonitor

A formal approach to monitoring web pages as spatio-temporal traces.

Academic Citation

If you appreciate the concept for academic research, a citation would be appreciated:

@article{10.1145/3708512,
author = {Visconti, Ennio and Tsigkanos, Christos and Nenzi, Laura},
title = {Automated Monitoring of Web User Interfaces},
year = {2025},
issue_date = {May 2025},
publisher = {Association for Computing Machinery},
address = {New York, NY, USA},
volume = {19},
number = {2},
issn = {1559-1131},
url = {https://doi.org/10.1145/3708512},
doi = {10.1145/3708512},
abstract = {Application development for the modern web involves sophisticated engineering workflows—including user interface (UI) aspects. Such user interfaces comprise web elements that are typically created with HTML/CSS markup and JavaScript-like languages, yielding web documents. Their testing entails performing checks to examine visual and structural parts of the resulting UI software against requirements such as usability, accessibility, performance, or, increasingly, compliance with standards. However, current techniques are largely ad hoc and tailor-made to specific classes of requirements or web technologies and extensively require human-in-the-loop qualitative evaluations. Web UI evaluation so far has lacked formal foundations, which would provide assurances of compliance with requirements in an automatic manner. To this end, we devise a methodology and accompanying technical framework for web UIs. In our approach, requirements are formally specified in a spatio-temporal logic able to capture both the layout of visual components as well as how they change over time, as a user interacts with them. The technique we advocate is independent of the underlying technologies a web application may be developed with, as well as the browser and operating system used. To concretely support the specification and evaluation of UI requirements, our framework is grounded on open source tools for instrumenting, analyzing, and reporting spatio-temporal behaviors in webpages. We demonstrate our approach in practice over web accessibility standards posing challenges for automated verification.},
journal = {ACM Trans. Web},
month = mar,
articleno = {10},
numpages = {27},
keywords = {User interface testing, automated testing, monitoring, spatio-temporal logic, selenium webdriver}
}

Quick Overview (on YouTube 🎥)

Prerequisites

Please remember that to run the tool:

• an internet connection is required
• when not in headless mode, a desktop environment must be available on the running machine. Alternatively, to run in headless mode, change the browser to CHROME_HEADLESS in source.*.kts files.

Create Monitoring files

To launch WebMonitor, two files must be provided in src/main/resources: source.XXX.kts and spec.YYY.kts.

Executing WebMonitor

Once the required source.XXX.kts and spec.YYY.kts files are created, run the following commands.

./gradlew run --args="XXX YYY" 

Or just

./gradlew run --args="XXX" 

if XXX = YYY

Note that the first time you run the tool, it will download the required dependencies, so it might take a while.

Usage as Maven package

To use it as a maven package, just include the following line in your build.gradle.kts:

implementation("com.enniovisco:webmonitor:v1.1.0")

Check on Maven Central for alternative build tools ( e.g. Maven).

Running on Windows

Since Windows 11, the default terminal is PowerShell, so the previous command should run out of the box. If it doesn't, and you are using the good old fashion CLI (Why are you doing it? You should reconsider your priorities...), you can substitute ./gradlew with gradlew.bat and the rest should work the same way.

Examples

Some examples are available in src/main/resources/examples.

In general though, few lines are needed to run the tool on a new website.

Source file example

The spec file contains the key information about the browsing session that will be run. An example follows:

// source.XXX.kts
import com.enniovisco.*

// Browsing window size:
WebSource.screenWidth = 600 // px 
WebSource.screenHeight = 600 // px

// OPTIONAL: Change the browser used for the evaluation. 
WebSource.browser = Browser.CHROME // - default - only allowed values currently are CHROME and FIREFOX

// Browsing session duration, after which the browser is closed
WebSource.maxSessionDuration = 5_000 // ms

// OPTIONAL: sets a waiting time before starting recording the browser (so that initial loading errors can be skipped by the analysis)
WebSource.wait = 1_000 // ms 

// Browser's address of the analyzed page
WebSource.targetUrl = "https://enniovisco.github.io/webmonitor/"

Spec file example

The spec file contains the key information about the browsing session that will be run. An example follows:

// spec.YYY.kts
import com.enniovisco.*

Spec.atoms(
    select { "h1" } read "visibility" equals "visible",
)

Spec.record(
    after { "click" }
)

// Helper formulae
val screen = Spec.screen
val isVisible = Spec.atoms[0]

val f1 = isVisible and screen
val f2 = f1 and (eventually(isVisible) implies not(isVisible)) // some random complex formula to show operators.

// Final monitored formula
Spec.formula = f2

Thanks

Special thanks to Moonlight and Selenium Webdriver, and the supporting developers.