From db7a5fc9efa2dcddb5241857353c1bf7fa070296 Mon Sep 17 00:00:00 2001
From: Jeremy Sfez <jeremy@smooth-code.com>
Date: Thu, 21 Sep 2023 22:05:35 +0200
Subject: [PATCH] feat: disable input spellcheck

---
 fixtures/dummy.html |  4 ++++
 src/index.ts        | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/fixtures/dummy.html b/fixtures/dummy.html
index 1daadb2..eb2de7d 100644
--- a/fixtures/dummy.html
+++ b/fixtures/dummy.html
@@ -82,6 +82,10 @@ <h3>Image</h3>
       <div class="hint">Hint: the image should be loaded.</div>
       <img id="image" src="https://placebear.com/500/600" />
 
+      <h3>Input</h3>
+      <div class="hint">Hint: spellcheck should be disabled</div>
+      <input value="an orrange carrot" autofocus />
+
       <h3>Paragraph</h3>
       <div class="hint">
         Hint: the font should be loaded and the scrollbar hidden.
diff --git a/src/index.ts b/src/index.ts
index d9c7898..52691c7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,7 +24,7 @@ const GLOBAL_STYLES = `
     font-family: monospace !important;
     opacity: 0 !important;
   }
-  
+
   [data-visual-test="removed"] {
     display: none !important;
   }
@@ -42,6 +42,15 @@ function waitForImagesLoading() {
   return allImages.every((img) => img.complete);
 }
 
+// Disable spellcheck to avoid red underlines
+function disableSpellCheck() {
+  const query =
+    "[contenteditable]:not([contenteditable=false]):not([spellcheck=false]), input:not([spellcheck=false]), textarea:not([spellcheck=false])";
+  const inputs = document.querySelectorAll(query);
+  inputs.forEach((input) => input.setAttribute("spellcheck", "false"));
+  return true;
+}
+
 type LocatorOptions = Parameters<Page["locator"]>[1];
 
 type ScreenshotOptions<
@@ -78,10 +87,11 @@ export async function argosScreenshot(
   // Wait for all busy elements to be loaded
   await page.waitForSelector('[aria-busy="true"]', { state: "hidden" });
 
-  // Wait for all images and fonts to be loaded
+  // Code injection to improve the screenshot stability
   await Promise.all([
     page.waitForFunction(waitForImagesLoading),
     page.waitForFunction(waitForFontLoading),
+    page.waitForFunction(disableSpellCheck),
   ]);
 
   await handle.screenshot({