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 @@
Image
Hint: the image should be loaded.
+ Input
+ Hint: spellcheck should be disabled
+
+
Paragraph
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
[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({