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