PageSourceSearch

https://meticulous.ai/how-it-works

html meticulous.ai collected 2026-10-03 19:02:56 UTC 43,473 bytes, 102 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/images/meticulous.svg"/><link rel="preload" as="image" href="/images/logo-black.svg"/><link rel="preload" as="image" href="/images/arrow-btn.svg"/><link rel="preload" as="image" href="/images/menu-icon.svg"/><link rel="preload" as="image" href="/images/close.svg"/><link rel="preload" as="image" imageSrcSet="/images/snippet-img-p-500.png 500w, /images/snippet-img-p-800.png 800w, /images/snippet-img-p-1080.png 1080w, /images/snippet-img.png 1196w" imageSizes="(max-width: 767px) 100vw, 598px"/><link rel="preload" as="image" href="/images/copy.svg"/><link rel="preload" as="image" href="/images/arrow-orange.svg"/><link rel="preload" as="image" href="/images/arrow-liteorange.svg"/><link rel="preload" as="image" href="/images/ci-install.png"/><link rel="stylesheet" href="/assets/styles-D-4j5tXq.css" data-precedence="default"/><link rel="preload" as="image" href="/images/execute.png"/><link rel="preload" as="image" href="/images/meticulous-snapshots.png"/><link rel="preload" as="image" href="/images/network-report.png"/><link rel="preload" as="image" href="/images/pull-request.png"/><link rel="preload" as="image" href="/images/engine-logo.png"/><link rel="preload" as="image" href="/images/Colin-Hanna.jpeg"/><link rel="preload" as="image" href="/images/Notion-logo-icon.png"/><link rel="preload" as="image" href="/images/Erdem-Alparslan.webp"/><link rel="preload" as="image" href="/images/dropbox_icon.png"/><link rel="preload" as="image" href="/images/tony-xu.webp"/><link rel="preload" as="image" href="/images/faqbottom-arrow_1.svg"/><link rel="preload" as="image" href="/images/faqtop-arrow.svg"/><title>How it Works</title><meta name="generator" content="TanStack Start"/><meta name="description" content="Meticulous auto-generates and auto-maintains visual frontend browser tests, providing a level of coverage that is unattainable with manually written tests."/><meta property="og:title" content="How it Works"/><meta property="og:description" content="Meticulous auto-generates and auto-maintains visual frontend browser tests, providing a level of coverage that is unattainable with manually written tests."/><meta property="og:image" content="https://www.meticulous.ai/images/social-graph-image.png"/><meta property="og:type" content="website"/><meta property="og:url" content="https://www.meticulous.ai/how-it-works"/><meta name="twitter:title" content="How it Works"/><meta name="twitter:description" content="Meticulous auto-generates and auto-maintains visual frontend browser tests, providing a level of coverage that is unattainable with manually written tests."/><meta name="twitter:image" content="https://www.meticulous.ai/images/social-graph-image.png"/><meta name="twitter:card" content="summary_large_image"/>
1<link rel="modulepreload" href="/assets/index-Cy4eGKU4.js"/><link rel="modulepreload" href="/assets/how-it-works-D8jH6MjO.js"/><link rel="modulepreload" href="/assets/Tabs-DiFX9v5f.js"/><link rel="modulepreload" href="/assets/MarketingPage-BdNh-Pd-.js"/><link rel="llms-txt" href="/llms.txt"/><link rel="preload" href="/fonts/noto-sans/noto-sans-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/PPNeueMachina-PlainLight.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon"/><link rel="apple-touch-icon" href="/images/webclip.png"/><link rel="canonical" href="https://www.meticulous.ai/how-it-works"/>
1<script data-recording-token="IrxZ0wgf8TIQiAFjMpt2NMNwbRf5UrDA9DQWoMam" data-is-production-environment="true" src="https://snippet.meticulous.ai/v1/meticulous.js"></script>
1<script>!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<script id="cookieyes" src="https://cdn-cookieyes.com/client_data/2249329c0b1ab6d0df2fe478d1765a2f/script.js"></script>
1<script>// Load PostHog JS
2!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
3        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="88KztM4fECyle122NObL7p61q9kPzFUu";;analytics.SNIPPET_VERSION="4.15.3";
4        analytics.load("88KztM4fECyle122NObL7p61q9kPzFUu");
5        analytics.ready(() => {
6          window.posthog.init("phc_antGuUKbSRSxwV9HrVllbMOxWXWiOTC1YgJ4CVLbjJR", {
7            api_host: 'https://data.meticulous.ai',
8            ui_host: 'https://us.posthog.com',
9            segment: window.analytics,
10            capture_pageview: false,
11            capture_pageleave: true,
12            loaded: (posthog) => {
13              window.analytics.page()
14            }
15        });
16		});
17        }}();</script>
17<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Meticulous AI","url":"https://www.meticulous.ai","logo":"https://www.meticulous.ai/images/meticulous-256x256.png","foundingDate":"2021-06-01","contactPoint":{"@type":"ContactPoint","contactType":"customer support","email":"[email protected]"},"address":{"@type":"PostalAddress","streetAddress":"Albert House, 256-260 Old St","addressLocality":"London","addressRegion":"Greater London","postalCode":"EC1V 9DD","addressCountry":"GB"},"sameAs":["https://www.linkedin.com/company/alwaysmeticulous","https://x.com/meticulousgabe","https://github.com/alwaysmeticulous"],"publishes":{"@type":"SoftwareApplication","name":"Meticulous","applicationCategory":["DeveloperApplication","TestingSoftware"],"description":"Automated frontend testing platform that records user sessions and catches visual regressions.","operatingSystem":"Web","url":"https://www.meticulous.ai"}}</script>
17</head><body class="body"><!--$--><div data-animation="over-left" data-collapse="medium" data-duration="400" data-easing="ease-in-out" data-easing2="ease-in-out" data-no-scroll="1" role="banner" class="header navbar navbar-2 w-nav"><div class="header-container w-container"><div class="header-inner"><a class="logo w-nav-brand" href="/"><img src="/images/meticulous.svg" loading="eager" width="182" height="26" alt="Meticulos" class="logo-img"/></a><nav role="navigation" class="nav-menu w-nav-menu"><a class="menu-logo w-inline-block" href="/"><img src="/images/logo-black.svg" loading="eager" alt="Meticulous" class="logo-black"/></a><div class="nav-menulist"><a aria-current="page" class="nav-link w-nav-link w--current" href="/how-it-works" data-status="active">How it Works</a><a class="nav-link w-nav-link" href="/case-studies">Case Studies</a><a class="nav-link w-nav-link" href="/blog">Blog</a><a class="nav-link w-nav-link" href="/about-us">About Us</a><a href="https://jobs.ashbyhq.com/meticulous" target="_blank" rel="noopener noreferrer" class="nav-link w-nav-link">Careers</a></div><div class="tabs-loginbtns"><div class="nav-login"><a href="https://app.meticulous.ai" target="_blank" rel="noopener noreferrer" class="nav-link login-link w-nav-link">Sign In</a><a class="primary-btn btn-sm headbtn w-inline-block" href="/book-a-demo"><div>Book a Demo</div><div class="arrow-icon"><img src="/images/arrow-btn.svg" loading="eager" width="12" height="12" alt="Arrow" class="btn-arrow"/><img src="/images/arrow-btn.svg" loading="eager" width="12" height="12" alt="Arrow" class="btn-arrow-hover"/></div></a></div></div></nav><div class="header-rightbtn"><div class="nav-login"><a href="https://app.meticulous.ai" target="_blank" rel="noopener noreferrer" class="nav-link login-link w-nav-link">Sign In</a><a class="primary-btn btn-sm headbtn w-inline-block" href="/book-a-demo"><div>Book a Demo</div><div class="arrow-icon"><img src="/images/arrow-btn.svg" loading="eager" width="12" height="12" alt="Arrow" class="btn-arrow"/><img src="/images/arrow-btn.svg" loading="eager" width="12" height="12" alt="Arrow" class="btn-arrow-hover"/></div></a></div></div><div class="hamburger-menu w-nav-button" role="button" tabindex="0" aria-label="Open menu" aria-expanded="false"><img src="/images/menu-icon.svg" loading="eager" alt="Menu Icon" class="menu-icon"/><img src="/images/close.svg" loading="eager" alt="Close" class="close-icon"/></div></div></div></div><section class="works-section"><div class="works-head"><div class="w-layout-blockcontainer container w-container"><div class="works-box"><h2 class="h1 orange-text">Install.</h2><h2 class="h1 orange-mid-text">Execute.</h2><h2 class="h1 orange-lite-text mb32">Review.</h2><p class="p-10">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 co
17debase. Every user flow, every edge-case.</p></div></div></div><div class="flow-inner"><div class="flow-line"></div><div class="flow-mainitem"><div class="subheading-1 flow-heading">Install</div><div class="flow-block"><div class="flow-countbox"><div class="flow-countbox-text">01.</div></div><div class="w-layout-blockcontainer container w-container"><div class="flow-row"><div class="flow-item"><div class="snippet-block"><div class="snippet-box"><div class="snippet-img"><img src="/images/snippet-img.png" loading="eager" height="70" alt="Snippet" width="598" srcSet="/images/snippet-img-p-500.png 500w, /images/snippet-img-p-800.png 800w, /images/snippet-img-p-1080.png 1080w, /images/snippet-img.png 1196w" sizes="(max-width: 767px) 100vw, 598px" class="image"/></div><div data-current="NextJS" data-easing="ease" data-duration-in="300" data-duration-out="100" class="snippet-tabs w-tabs"><div class="snippet-manu w-tab-menu" role="tablist"><a data-w-tab="NextJS" role="tab" aria-selected="true" tabindex="0" class="snippet-link w-inline-block w-tab-link w--current"><div>NextJS</div></a><a data-w-tab="React" role="tab" aria-selected="false" tabindex="0" class="snippet-link w-inline-block w-tab-link"><div>React</div></a><a data-w-tab="Vue" role="tab" aria-selected="false" tabindex="0" class="snippet-link w-inline-block w-tab-link"><div>Vue</div></a><a data-w-tab="Angular" role="tab" aria-selected="false" tabindex="0" class="snippet-link w-inline-block w-tab-link"><div>Angular</div></a><a data-w-tab="Nuxt" role="tab" aria-selected="false" tabindex="0" class="snippet-link w-inline-block w-tab-link"><div>Nuxt</div></a><a data-w-tab="SvelteKit" role="tab" aria-selected="false" tabindex="0" class="snippet-link w-inline-block w-tab-link"><div>SvelteKit</div></a></div><div class="recorder-tabcontent snippet-tabcontent w-tab-content"><div data-w-tab="NextJS" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane w--tab-active"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span>Add to your _document.js &lt;Head&gt; or /app/layout.tsx &lt;head&gt;:</span>
18<span></span>
19<span>{<label class="hl-purple">process</label>.env.<label class="hl-purple">NODE_ENV</label> === &quot;<label class="hl-orange">development</label>&quot; &amp;&amp; (
20<span>  &lt;script
21<label class="hl-purple">    data-project-id</label>=&quot;<label class="hl-recording-token">...</label>&quot;
22<label class="hl-purple">    src</label>=&quot;<label class="hl-orange">https://snippet.meticulous.ai/v1/meticulous.js</label>&quot;
23  &gt;&lt;/script&gt;</span>
24<span>)}</span>
25</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div><div data-w-tab="React" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span><label class="hl-purple">import</label> { tryLoadAndStartRecorder } <label class="hl-purple">from</label> <label class="hl-green">&#x27;@alwaysmeticulous/recorder-loader&#x27;</label></span>
26<span></span>
27<span><label class="hl-orange">async function</label> <label class="hl-method-definition">startApp</label>() {</span>
28  <span><label class="hl-green">// Record all sessions on localhost, staging stacks and preview URLs</label></span>
29  <span>if (!isProduction()) {</span>
30    <span><label class="hl-orange">await</label> <label class="hl-method-call">tryLoadAndStartRecorder</label>({</span>    
31      <span><label class="hl-purple">projectId</label>: &#x27;<label class="hl-recording-token">...</label>&#x27;,</span>
32      <span><label class="hl-purple">isProduction</label>: false,</span>
33    <span>});</span>
34  <span>}</span>
35  <span></span>
36  <span>ReactDOM.<label class="hl-method-call">render</label>(component, document.<label class="hl-method-call">getElementById</label>(<label class="hl-green">&#x27;root&#x27;</label>));</span>
37<span>}</span>
38<span></span>
39<span><label class="hl-orange">function</label> <label class="hl-method-definition">isProduction</label>() {</span>
40  <span><label class="hl-orange">return</label> window.location.hostname.<label class="hl-method-call">indexOf</label>(&quot;your-production-site.com&quot;) &gt; -1;</span>
41<span>}</span>
42<span></span>
43<span><label class="hl-method-call">startApp</label>();</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div><div data-w-tab="Vue" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span><label class="hl-purple">import</label> Vue <label class="hl-purple">from</label> <label class="hl-green">&quot;vue&quot;</label>;</span>
44<span><label class="hl-purple">import</label> App <label class="hl-purple">from</label> <label class="hl-green">&quot;./App.vue&quot;</label>;</span>
45<span><label class="hl-purple">import</label> router <label class="hl-purple">from</label> <label class="hl-green">&quot;./router&quot;</label>;</span>
46<span><label class="hl-purple">import</label> store <label class="hl-purple">from</label> <label class="hl-green">&quot;./store&quot;</label>;</span>
47<span><label class="hl-purple">import</label> { tryLoadAndStartRecorder } <label class="hl-purple">from</label> <label class="hl-green">&#x27;@alwaysmeticulous/recorder-loader&#x27;</label>;</span>
48<span></span>
49<span><label class="hl-orange">async function</label> <label class="hl-method-definition">startApp</label>() {</span>
50  <span>if (!isProduction()) {</span>
51    <span><label class="hl-orange">await</label> <label class="hl-purple">tryLoadAndStartRecorder</label>({</span>    
52      <span><label class="hl-purple">projectId:</label> &#x27;<label class="hl-recording-token">...</label>&#x27;,</span>
53      <span><label class="hl-purple">isProduction</label>: false,</span>
54    <span>});</span>
55  <span>}</span>
56  <span></span>
57  <span>new Vue({</span> <span><label class="hl-green">router</label>,</span> <span><label class="hl-green">store</label>,</span> <span><label class="hl-green">render</label>: h =&gt; <label class="hl-method-call">h</label>(App)</span><span>}).<label class="hl-method-call">$mount</label>(&quot;<label class="hl-orange">#app&quot;</label>);</span>
58<span>}</span>
59<span></span>
60<span><label class="hl-orange">function</label> <label class="hl-method-definition">isProduction</label>() {</span>
61 <span><label class="hl-orange">return</label> window.location.hostname.<label class="hl-method-call">indexOf</label>(&quot;your-production-site.com&quot;) &gt; -1;</span>
62<span>}</span>
63<span></span>
64<span><label class="hl-purple">startApp</label>();</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div><div data-w-tab="Angular" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span><label class="hl-purple">import</label> { platformBrowserDynamic } <label class="hl-purple">from</label> <label class="hl-green">&#x27;@angular/platform-browser-dynamic&#x27;</label>;</span>
65    <span><label class="hl-purple">import</label> { AppModule } <label class="hl-purple">from</label> <label class="hl-green">&#x27;./app/app.module&#x27;</label>;</span>
66    <span><label class="hl-purple">import</label> { tryLoadAndStartRecorder } <label class="hl-purple">from</label> <label class="hl-green">&#x27;@alwaysmeticulous/recorder-loader&#x27;</label></span>
67    <span><label class="hl-orange">async function</label> <label class="hl-method-definition">startApp</label>() {</span>
68        <span>if (!isProduction()) {</span>
69          <span><label class="hl-orange">await</label> <label class="hl-method-call">tryLoadAndStartRecorder</label>({</span>    
70            <span><label class="hl-purple">projectId:</label> &#x27;<label class="hl-recording-token">...</label>&#x27;,</span>
71            <span><label class="hl-purple">isProduction</label>: false,</span>
72          <span>});</span>
73        <span>}</span> 
74        <span></span>
75        <span><label class="hl-green">// Initalise app after the Meticulous recorder is ready, for example:</label></span>
76        <span><label class="hl-method-call">platformBrowserDynamic</label>().<label class="hl-method-call">bootstrapModule</label>(AppModule)</span>
77         <span>.<label class="hl-method-call">catch</label>(err =&gt; console.<label class="hl-method-call">error</label>(err));</span>
78    <span>}</span>
79    <span></span>
80    <span><label class="hl-orange">function</label> <label class="hl-method-definition">isProduction</label>() {</span>
81        <span><label class="hl-orange">return</label> window.location.hostname.<label class="hl-purple">indexOf</label>(&quot;your-production-site.com&quot;) &gt; -1;</span>
82    <span>}</span>
83    <span></span>
84    <span><label class="hl-method-call">startApp</label>();</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div><div data-w-tab="Nuxt" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span>{</span>
85 <span><label class="hl-green">head</label>: {</span>
86  <span><label class="hl-green">script</label>: <label class="hl-purple">process.env.NODE_ENV</label> === <label class="hl-orange">&quot;production&quot;</label> ? [] : [</span>
87   <span>{</span>
88    <span><label class="hl-purple">src</label>: <label class="hl-orange">&#x27;https://snippet.meticulous.ai/v1/meticulous.js&#x27;</label>,</span>
89     <span><label class="hl-purple">[&quot;data-project-id&quot;]</label>: &#x27;<label class="hl-recording-token">...</label>&#x27;,</span>
90     <span><label class="hl-purple">[&quot;data-is-production-environment&quot;]</label>
90 false,</span>
91    <span>}</span>
92   <span>],</span>
93  <span>}</span>
94<span>}</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div><div data-w-tab="SvelteKit" role="tabpanel" class="recorder-tabbox snippet-tab w-tab-pane"><div class="recorder-tabdetail"><div class="code-embed w-embed"><pre class="codeblock"><code><span>&lt;svelte<label class="hl-green">:head</label>&gt;</span>
95<span>{<label class="hl-green">#if </label>!import.meta.env.PROD}</span>
96  <span>&lt;<label class="hl-green">script</label></span>
97   <span><label class="hl-purple">data-project-id</label>=&quot;<label class="hl-recording-token">...</label>&quot;</span>
98   <span><label class="hl-purple">data-is-production-environment</label>=<label class="hl-orange">&quot;false&quot;</label></span>
99   <span><label class="hl-purple">src</label>=<label class="hl-orange">&quot;https://snippet.meticulous.ai/v1/meticulous.js&quot;</label></span>
100  <span>&gt;&lt;/<label class="hl-green">script</label>&gt;</span> 
101 <span>{<label class="hl-green">/if</label>}</span>
102<span>&lt;svelte<label class="hl-green">:head</label>&gt;</span></code><button type="button" class="copycode-icon" aria-label="Copy code"><img src="/images/copy.svg" width="19" height="21" loading="eager" alt="Copy"/></button></pre></div></div></div></div></div></div></div><div id="w-node-_74bf56dc-59c3-2e5a-fadf-ab2b0e0ab253-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">Install snippet</h3><p class="p-lite mb24">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.<br/><br/>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.<br/><br/>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.</p><div class="flow-note">This snippet instruments the web browser and captures all the user interactions, like click events, scroll events.</div><div class="flow-note">For more information on redaction, please see ‘How does redaction work?’.</div><div class="flow-note">For more information on security, please see our security portal.</div><a href="https://app.meticulous.ai/docs" target="_blank" rel="noopener noreferrer" class="primary-link mt40 w-inline-block"><div>See All Snippets</div><div class="arrow-icon"><img src="/images/arrow-orange.svg" loading="eager" width="13" height="13" alt="Arrow Orange" class="btn-arrow"/><img src="/images/arrow-liteorange.svg" loading="eager" width="13" height="13" alt="Arrow Lite" class="btn-arrow-hover"/></div></a></div></div></div><div class="flow-item"><div id="w-node-a7533985-2952-d692-c5c3-345061b41d7c-0e0f37e4" class="flow-image align-left"><div class="installbox"><img src="/images/ci-install.png" loading="eager" height="550" alt="CI" width="559" class="image"/></div></div><div id="w-node-a7533985-2952-d692-c5c3-345061b41d7e-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">Install our CI integration</h3><p class="p-lite mb24">The final integration point is to grant Meticulous permissions to post comments on your pull requests or merge requests.</p></div></div></div></div></div></div></div><div class="flow-mainitem"><div class="subheading-1 flow-heading">Execute</div><div class="flow-block"><div class="flow-countbox"><div class="flow-countbox-text">02.</div></div><div class="w-layout-blockcontainer container w-container"><div class="flow-row"><div class="flow-item"><div id="w-node-_831c7470-6f4e-716c-3417-71817419d77e-0e0f37e4" class="flow-image"><img src="/images/execute.png" loading="eager" height="510" alt="Execute" width="600" class="image"/></div><div id="w-node-_831c7470-6f4e-716c-3417-71817419d780-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">Meticulous executes your tests, parallelized across our compute cluster</h3><p class="p-lite mb24">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-e
102nd 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.</p><p class="p-lite mb24">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.</p></div></div></div><div class="flow-item"><div id="w-node-_831c7470-6f4e-716c-3417-71817419d793-0e0f37e4" class="flow-image"><img src="/images/meticulous-snapshots.png" loading="eager" height="420" alt="Snapshots" width="600" class="image"/></div><div id="w-node-_831c7470-6f4e-716c-3417-71817419d795-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">Meticulous detects all behavioural, logical and visual changes</h3><p class="p-lite mb24">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.<br/></p><p class="p-lite mb24">The browser is augmented to be deterministic in order to eliminate flakes - Meticulous is the only product which has this.<br/><br/>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.<br/><br/>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.</p></div></div></div><div class="flow-item"><div id="w-node-_2b00aa47-0783-cdd6-3d46-b5da7f3677ae-0e0f37e4" class="flow-image"><img src="/images/network-report.png" loading="eager" height="420" alt="Network Reports" width="600" class="image"/></div><div id="w-node-_2b00aa47-0783-cdd6-3d46-b5da7f3677b0-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">By default Meticulous mocks out any network requests to your backend</h3><p class="p-lite mb24">Whenever the application goes to make a network request, Meticulous automatically mocks out that network call. This guarantees that there are no side effects.<br/></p></div></div></div></div></div></div></div><div class="flow-mainitem last-item"><div class="subheading-1 flow-heading">Review</div><div class="flow-block"><div class="flow-countbox"><div class="flow-countbox-text">03.</div></div><div class="w-layout-blockcontainer container w-container"><div class="flow-row"><div class="flow-item"><div id="w-node-d22b9abe-16f2-ff3e-436f-bc782c196dbb-0e0f37e4" class="flow-image"><div class="flow-pr-img"><img src="/images/pull-request.png" loading="eager" height="621" alt="Pull Request" width="556" class="image"/></div></div><div id="w-node-d22b9abe-16f2-ff3e-436f-bc782c196dbd-0e0f37e4" class="flow-detailbox"><div class="flow-box"><h3 class="subheading-3">See your visual diffs on every PR</h3><p class="p-lite mb24">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.<br/><br/>The end result: you and your agent can see the<em>full</em>impact of the change before you merge it, concisely visualized across every edge case. Ship as fast as your AI can code.</p><a class="primary-link mt40 w-inline-block" href="/book-a-demo"><div>Get Started Now</div><div class="arrow-icon"><img src="/images/arrow-orange.svg" loading="eager" width="13" height="13" alt="Arrow Orange" class="btn-arrow"/><img src="/images/arrow-liteorange.svg" loading="eager" width="13" height="13" alt="Arrow Lite" class="btn-arrow-hover"/></div></a></div></div></div></div></div></div></div></div></section><section class="client-testimonial-section"><div class="w-layout-blockcontainer container w-container"><div class="client-testimonial-tittle"><h3 class="h3 client-title">
102What developers say</h3><div class="vertical-line client-line"></div></div><div class="client-testimonial-list"><div class="client-testimonial-item"><div class="client-review-box"><div>What makes meticulous different from other testing tools for me is the amount of effort we&#x27;re putting in for the value. We&#x27;re getting a lot of feedback points across our application for no investment.</div></div><div class="client-details-box"><div class="client-info"><div class="client-profile company-logo"><img src="/images/engine-logo.png" loading="eager" alt="Engine" class="image-cover"/></div><div class="client-info-box"><div class="client-profile is-grey"><img src="/images/Colin-Hanna.jpeg" loading="eager" alt="Colin Hanna" class="image-cover"/></div><div class="client-detail"><div class="client-name">Colin Hanna</div><div class="client-designation">Principal Software Engineer at Engine</div></div></div></div></div></div><div class="client-testimonial-item"><div class="client-review-box"><div>We piloted the tool, were immediately impressed and rolled it out across the entire engineering organization. Meticulous is unlike anything else, developers love it and it is now an essential guardrail of our software development process.</div></div><div class="client-details-box"><div class="client-info"><div class="client-profile company-logo"><img src="/images/Notion-logo-icon.png" loading="eager" alt="Notion" class="image-cover"/></div><div class="client-info-box"><div class="client-profile is-grey"><img src="/images/Erdem-Alparslan.webp" loading="eager" alt="Erdem A." class="image-cover"/></div><div class="client-detail"><div class="client-name">Erdem A.</div><div class="client-designation">Head of Developer Experience at Notion</div></div></div></div></div></div><div class="client-testimonial-item"><div class="client-review-box"><div>Engineers loved it instantly—no more debugging after merge, zero maintenance, and no flakes. Once we started using Meticulous, we couldn&#x27;t imagine working without it.</div></div><div class="client-details-box"><div class="client-info"><div class="client-profile company-logo"><img src="/images/dropbox_icon.png" loading="eager" alt="Dropbox" class="image-cover"/></div><div class="client-info-box"><div class="client-profile is-grey"><img src="/images/tony-xu.webp" loading="eager" alt="Tony Xu" class="image-cover"/></div><div class="client-detail"><div class="client-name">Tony Xu</div><div class="client-designation">Engineering Leader at Dropbox</div></div></div></div></div></div></div></div></section><section class="faq-section"><div class="w-layout-blockcontainer container-lg w-container"><div class="faq-inner"><div class="faq-head"><h5 class="subheading-2">FAQ</h5><p class="p-lite">Feel free to chat directly with us by clicking the message box in the bottom right corner.</p></div><div class="faq-list"><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-0"><span class="faq-title">Is Meticulous SOC2 compliant?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-0" class="faq-details w-richtext" hidden=""><p>Yes, we are SOC2 Type II compliant. Please visit our security portal at<!-- --> <a href="https://security.meticulous.ai/">security.meticulous.ai</a> to learn more or reach out to<!-- --> <a href="mailto:[email protected]">[email protected]</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-1"><span class="faq-title">What integrations and frameworks does Meticulous support?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-1" class="faq-details w-richtext" hidden=""><p>Meticulous supports dozens of frameworks, including React, Vue, Angular, Vite, Svelte, Next12, Next13, Next14 and more. Meticulous has 
102integrations with GitHub, GitLab and Vercel but works on any CI provider.</p><p>Please see our<!-- --> <a href="https://app.meticulous.ai/docs">documentation</a> for more details or reach out to<!-- --> <a href="mailto:[email protected]">[email protected]</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-2"><span class="faq-title">How does enterprise pricing work?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-2" class="faq-details w-richtext" hidden=""><p>Please reach out to us at<!-- --> <a href="mailto:[email protected]">[email protected]</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-3"><span class="faq-title">What makes Meticulous different from other tools?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-3" class="faq-details w-richtext" hidden=""><p>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.</p><p>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.</p><p><a href="/how-it-works">Learn more about how Meticulous works here</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-4"><span class="faq-title">Will this cause side effects?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-4" class="faq-details w-richtext" hidden=""><p>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.</p><p><a href="/how-it-works">Learn more about how Meticulous works here</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-5"><span class="faq-title">What industry experts are backing this?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-5" class="faq-details w-richtext" hidden=""><p>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.</p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-6"><span class="faq-title">What’re your security policies?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-6" class="faq-details w-richtext" hidden=""><p>See our security portal at<!-- --> <a href="https://security.meticulous.ai/">security.meticulous.ai</a></p></div></div><div class="faq-item"><button type="button" class="faq-titlebox" aria-expanded="false" aria-controls="faq-answer-7"><span class="faq-title">Does Meticulous catch logical, behavioral or functional changes?</span><span class="faq-icon" aria-hidden="true"><img src="/images/faqbottom-arrow_1.svg" loading="eager" width="24" height="24" alt="" class="faq-img"/><img src="/images/faqtop-arrow.svg" loading="eager" width="24" height="24" alt="" class="faq-activeimg"/></span></button><div id="faq-answer-7" class="faq-details w-richtext" hidden=""><p>Yes. Meticulous catches any logical or behavioral change, such as a broken button, a broken modal, a refactored component or a dependency upgrade.</p><p><a href="/how-it-works">Learn more about how Meticulous works here</a></p></div></div></div></div></div></section><div class="boxh30"></div><section class="getstart-section"><div class="w-layout-blockcontainer container-lg w-container"><div class="getstart-wrap"><h2 class="h1 mb18">Ready to start?</h2><p class="getstart-p">Set up in minutes and generate tests to cover your whole application.</p><div class="tworow-btn"><a class="primary-btn w-inline-block" href="/book-a-demo"><div>Get Started</div><div class="arrow-icon"><img src="/images/arrow-btn.svg" loading="eager" width="14" height="14" alt="Arrow" class="btn-arrow"/><img src="/images/arrow-btn.svg" loading="eager" width="14" height="14" alt="Arrow" class="btn-arrow-hover"/></div></a></div></div></div></section><section class="footer"><div class="w-layout-blockcontainer container w-container"><div class="footer-wrap"><a class="footer-logo w-inline-block" href="/"><img src="/images/meticulous.svg" loading="eager" width="182" height="26" alt="Meticulos"/></a><div class="footer-row"><div class="footer-nav"><div class="footer-navlist"><div class="footer-subtitle">What</div><a aria-current="page" class="footer-link w--current" href="/how-it-works" data-status="active">How it Works</a><a href="https://security.meticulous.ai/" target="_blank" rel="noopener noreferrer" class="footer-link">Security</a><a href="https://app.meticulous.ai/docs" target="_blank" rel="noopener noreferrer" class="footer-link">Docs</a></div><div class="footer-navlist"><div class="footer-subtitle">who</div><a class="footer-link" href="/about-us">About Us</a><a class="footer-link" href="/blog">Blog</a></div><div class="footer-navlist"><div class="footer-subtitle">Connect</div><a href="https://www.linkedin.com/company/alwaysmeticulous/" target="_blank" rel="noopener noreferrer" class="footer-link">Linkedin</a><a href="https://twitter.com/meticulousgabe" target="_blank" rel="noopener noreferrer" class="footer-link">Twitter</a></div></div></div></div><div class="footer-bottom"><div>© 2026 Meticulous. All rights reserved.</div><div class="footer-navbottom"><a class="navbottom-link" href="/terms-conditions">Terms</a><a class="navbottom-link" href="/privacy-policy">Privacy</a></div></div></div></section>
102<script>(function(a,f){let l;try{l=JSON.parse(sessionStorage.getItem(a)||"{}")}catch{return}const n=l?.[f||history.state?.__TSR_key];let c=!1;for(const t in n){const e=n[t],o=e?.scrollX,s=e?.scrollY;if(Number.isFinite(o)&&Number.isFinite(s)){if(t==="window")scrollTo(o,s),c=!0;else if(t)try{const r=document.querySelector(t);r&&(r.scrollLeft=o,r.scrollTop=s)}catch{}}}if(c)return;const i=location.hash.slice(1);if(i){const t=history.state?.__hashScrollIntoViewOptions??!0;if(t){const e=document.getElementById(i);e&&e.scrollIntoView(t)}return}scrollTo(0,0)})("tsr-scroll-restoration-v1_3");document.currentScript.remove()</script>
102<!--/$-->
102<script data-tsr-stream-part="">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]};$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/index-Cy4eGKU4.js"],scripts:$R[5]=[$R[6]={attrs:$R[7]={type:"module",async:!0,src:"/assets/index-Cy4eGKU4.js"}}]},"/how-it-works":$R[8]={preloads:$R[9]=["/assets/how-it-works-D8jH6MjO.js","/assets/Tabs-DiFX9v5f.js","/assets/MarketingPage-BdNh-Pd-.js"]}}},matches:$R[10]=[$R[11]={i:"__root__�",u:1790976336565,s:"success",ssr:!0},$R[12]={i:"�how-it-works�how-it-works",u:1790976336565,s:"success",ssr:!0}]})($R["tsr"]);$_TSR.e();{let s=document.currentScript,p;while((p=s.previousElementSibling)&&p.hasAttribute('data-tsr-stream-part'))p.remove();s.remove()}</script>
102<script type="module" async="" src="/assets/index-Cy4eGKU4.js"></script>
102<script>document.currentScript.remove();/*$tsr-stream-boundary*/</script>
102</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.