How do I monitor a page that is built with JavaScript?

Add a DOM Assertion monitor. Status Raptor loads the page in a headless browser and checks that an element matching your Cascading Style Sheets (CSS) selector exists in the Document Object Model (DOM), the page structure the browser builds. This needs the PRO plan.

Before you start

  • You are an OPERATIONS or ADMIN member and the endpoint is verified.
  • The service is on PRO. On FREE the type is greyed out.

Steps

  1. Open the service, select Monitoring, then Add Monitoring.
  2. Choose DOM Assertion as Type and pick the Endpoint.
  3. Enter the Path.
  4. Enter the DOM selector, for example #app-root.
  5. Optionally set OK match value, Degraded match value or Critical match value to compare the text inside the element.
  6. Select Verify, then Add Monitor.

Questions

What counts as a failure?

A missing element is Critical. If the page redirects to another Uniform Resource Locator (URL), the check counts as an execution failure.

Why is the DOM check slower than the others?

It starts a browser and renders the page. Use a longer timeout, for example 60 seconds.