How it Works

Install.

Execute.

Review.

Meticulous monitors your daily interactions with your application as you develop it. By tracking the code branches executed by each interaction Meticulous generates a suite of visual end-to-end tests that cover every line of your codebase. Every user flow, every edge-case.

Install

01.

Add to your _document.js <Head> or /app/layout.tsx <head>:

{process.env.NODE_ENV === "development" && (
  <script 
    data-project-id="..."
    src="https://snippet.meticulous.ai/v1/meticulous.js"
  ></script>
)}

import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'

async function startApp() {
  // Record all sessions on localhost, staging stacks and preview URLs
   if (!isProduction()) {
    await tryLoadAndStartRecorder({    
    projectId: '...',
    isProduction: false,
   });
 }
 
 ReactDOM.render(component, document.getElementById('root'));
}

function isProduction() {
  return window.location.hostname.indexOf("your-production-site.com") > -1;
}

startApp();

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import {tryLoadAndStartRecorder} from '@alwaysmeticulous/recorder-loader';

async function startApp() {
   if (!isProduction()) {
    await tryLoadAndStartRecorder({    
    projectId: '...'
    isProduction: false,
   });
 }
 
 new Vue({
   router,
   store,
   render: h => h(App)
   }).$mount("#app");
}

function isProduction() {
 return window.location.hostname.indexOf("your-production-site.com") > -1;
}

startApp();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'
    async function startApp() {
        if (!isProduction()) {
          await tryLoadAndStartRecorder({    
            projectId: '...',
            isProduction: false,
          });
        } 
        
        // Initalise app after the Meticulous recorder is ready, for example:
        platformBrowserDynamic().bootstrapModule(AppModule)
         .catch(err => console.error(err));
    }
    
    function isProduction() {
        return window.location.hostname.indexOf("your-production-site.com") > -1;
    }
    
    startApp();

{
 head: {
  script: process.env.NODE_ENV === "production" ? [] : [
   {
    src: 'https://snippet.meticulous.ai/v1/meticulous.js',
     ["data-project-id"]: '...',
     ["data-is-production-environment"] false,
    }
   ],
  }
}

<svelte:head>
{#if !import.meta.env.PROD}
  <script
   data-project-id="..."
   data-is-production-environment="false"
   src="https://snippet.meticulous.ai/v1/meticulous.js"
  ></script> 
 {/if}
<svelte:head>

Install snippet

Install our JS snippet onto an environment of your choice. We normally recommend only installing this on internal environments, like localhost, dev, qa, staging and preview URLs - capturing both agent and developer browser sessions.

Some customers deploy this on production to get wider test coverage, but we recommend starting off with an internal deployment and find this is almost always sufficient.

Meticulous analyzes your built assets, and curates a set of sessions to ensure we have at least one flow to cover every distinct character of code, synthesizing and validating additional sessions as necessary. As your codebase evolves this test suite evolves.

This snippet instruments the web browser and captures all the user interactions, like click events, scroll events.

For more information on redaction, please see ‘How does redaction work?’.

For more information on security, please see our security portal.

See All Snippets

Install our CI integration

The final integration point is to grant Meticulous permissions to post comments on your pull requests or merge requests.

Execute

02.

Meticulous executes your tests, parallelized across our compute cluster

When you post a pull request, Meticulous selects a subset of the recorded sessions that cover each feature of your application and uses these as the basis for an end-to-end suite of tests. We then spin up workers across our compute cluster, each launching a browser -- for some changes up to 10,000 browsers in parralel.

For each selected session, we dispatch the recorded events to the browser, simulating the exact same sequence of actions which were taken at record-time.

Meticulous detects all behavioural, logical and visual changes

Meticulous captures a visual snapshot after dispatching each event, and compares these snapshots to those generated for the base commit. This tests not only visual changes, but behavioral and logical changes -- such as broken buttons or bugs in business logic.

The browser is augmented to be deterministic in order to eliminate flakes - Meticulous is the only product which has this.

This allows us to execute a huge number of flows without noise. And since we compare visual snapshots at every moment between the before and after flow it means that if a line of code is covered by Meticulous it is almost impossible to introduce a unnoticed regression into that line.

Our algorithms ensure near exhaustive coverage over even the most complex codebases: our clients codebases often extend into millions of lines, thousands of feature flags, hundreds of thousands of edge cases accross interactive, complex collaborative web applications. If you edit a line of code which we do not have tested we will warn you or your agent.

By default Meticulous mocks out any network requests to your backend

Whenever the application goes to make a network request, Meticulous automatically mocks out that network call. This guarantees that there are no side effects.

Review

03.

See your visual diffs on every PR

For humans Meticulous will post a comment on every pull request showing the logical, behavioral and visual changes across all edge cases. Review the changes in a few clicks, and merge your pull request if everything looks good. For agents Meticulous provides an iteration loop before the code is pushed for human review.

The end result: you and your agent can see the full impact of the change before you merge it, concisely visualized across every edge case. Ship as fast as your AI can code.

Get Started Now

FAQ

Feel free to chat directly with us by clicking the message box in the bottom right corner.

Is Meticulous SOC2 compliant?

Yes, we are SOC2 Type II certified. Please visit our security portal at security.meticulous.ai to learn more or reach out to security@meticulous.ai

Is Meticulous SOC2 compliant?

Yes, we are SOC2 Type II compliant. Please visit our security portal at security.meticulous.ai to learn more or reach out to security@meticulous.ai

What integrations and frameworks does Meticulous support?

Meticulous supports dozens of frameworks, including React, Vue, Angular, Vite, Svelte, Next12, Next13, Next14 and more. Meticulous has integrations with GitHub, GitLab and Vercel but works on any CI provider.

Please see our documentation for more details or reach out to help@meticulous.ai

How does enterprise pricing work?

Please reach out to us at help@meticulous.ai

What makes Meticulous different from other tools?

Meticulous continually adds new tests as new features or edge cases are introduced, and removes old tests as they become out of date - ensuring your test suite is always up to date and complete, without any intervention required by developers. 

It’s also built from the Chromium level up with a deterministic scheduling engine -- making it the only testing tool that eliminates flakes. In addition this technology allows Meticulous execute tests at lightning fast speeds.

Learn more about how Meticulous works here

Will this cause side effects?

By default Meticulous mocks out the responses from your backend by saving and replaying the original recorded responses - this means side-effect free tests with no false positives from changing data, and no need to set up special test accounts or mock test data for each test run. Flows that involve mutating or editing data, or one time setup flows, just work, even when run again and again.

Learn more about how Meticulous works here

What industry experts are backing this?

We're funded by Y Combinator, Coatue, the CTO of GitHub, CPO of Adobe, founder of Vercel, founder of Opendoor, founder of Segment, Lachy Groom, YC partner Jared Friedman, and many other amazing investors from Silicon Valley.

What’re your security policies?

See our security portal at security.meticulous.ai

Does Meticulous catch logical, behavioral or functional changes?

Yes. Meticulous catches any logical or behavioral change, such as a broken button, a broken modal, a refactored component or a dependency upgrade.

Learn more about how Meticulous works here

Install.

Execute.

Review.

Install snippet

Install our CI integration

Meticulous executes your tests, parallelized across our compute cluster

Meticulous detects all behavioural, logical and visual changes

By default Meticulous mocks out any network requests to your backend

See your visual diffs on every PR

What developers say

FAQ

Ready to start?