feat: disable input spellcheck

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

@@ -42,6 +42,13 @@ function waitForImagesLoading() {
   return allImages.every((img) => img.complete);
 }
 
+// Disable spellcheck on all inputs to avoid red underlines
+async function disableSpellCheck() {
+  const inputs = document.querySelectorAll("input");
+  inputs.forEach((input) => input.setAttribute("spellcheck", "false"));
+  return true;
+}
+
 type LocatorOptions = Parameters<Page["locator"]>[1];
 
 type ScreenshotOptions<
@@ -78,10 +85,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({