feat: disable spellcheck in argosScreenshot (#12)

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.

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({