Make blinking input carets transparent to avoid flakiness (#241)

oblador · Jun 3, 2020 · 8f5f5fe · 8f5f5fe
1 parent 0963842
commit 8f5f5fe
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 0 deletions.
diff --git a/examples/react/.loki/reference/chrome_a4_FocusedInput_default.png b/examples/react/.loki/reference/chrome_a4_FocusedInput_default.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_FocusedInput_default.png b/examples/react/.loki/reference/chrome_iphone7_FocusedInput_default.png
diff --git a/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png b/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png
diff --git a/examples/react/src/FocusedInput.js b/examples/react/src/FocusedInput.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const FocusedInput = () => <input type="text" autoFocus />;
+
+export default FocusedInput;
diff --git a/examples/react/src/stories/index.stories.js b/examples/react/src/stories/index.stories.js
@@ -16,6 +16,7 @@ import NonIntViewport from '../NonIntViewport';
 import FetchComponent from '../FetchComponent';
 import ZeroHeightWithPadding from '../ZeroHeightWithPadding';
 import Hover from '../Hover';
+import FocusedInput from '../FocusedInput';
 
 storiesOf('Welcome', module).lokiSkip('to Storybook', () => (
   <Welcome showApp={linkTo('Button')} />
@@ -73,3 +74,5 @@ storiesOf('Zero height', module).add('with padding', () => (
 ));
 
 storiesOf('Hover', module).add('default', () => <Hover />);
+
+storiesOf('FocusedInput', module).add('default', () => <FocusedInput />);
diff --git a/packages/browser/src/disable-input-caret.js b/packages/browser/src/disable-input-caret.js
@@ -0,0 +1,16 @@
+const disableInputCaret = window => {
+  const DISABLE_INPUT_CARET_STYLE = `
+  * {
+    caret-color: transparent !important;
+  }
+  `;
+
+  // Make blinking input carets transparent to avoid flakiness.
+  window.document.addEventListener('DOMContentLoaded', () => {
+    const styleElement = window.document.createElement('style');
+    window.document.documentElement.appendChild(styleElement);
+    styleElement.sheet.insertRule(DISABLE_INPUT_CARET_STYLE);
+  });
+};
+
+module.exports = disableInputCaret;
diff --git a/packages/browser/src/index.js b/packages/browser/src/index.js
@@ -2,6 +2,7 @@ const addLokiSessionMarker = require('./add-loki-session-marker');
 const awaitLokiReady = require('./await-loki-ready');
 const createStorybookConfigurator = require('./configure-storybook');
 const disableAnimations = require('./disable-animations');
+const disableInputCaret = require('./disable-input-caret');
 const disablePointerEvents = require('./disable-pointer-events');
 const getSelectorBoxSize = require('./get-selector-box-size');
 const getStories = require('./get-stories');
@@ -11,6 +12,7 @@ module.exports = {
   awaitLokiReady,
   createStorybookConfigurator,
   disableAnimations,
+  disableInputCaret,
   disablePointerEvents,
   getSelectorBoxSize,
   getStories,

diff --git a/packages/target-chrome-core/src/create-chrome-target.js b/packages/target-chrome-core/src/create-chrome-target.js
@@ -1,6 +1,7 @@
 const debug = require('debug')('loki:chrome');
 const {
   disableAnimations,
+  disableInputCaret,
   disablePointerEvents,
   getSelectorBoxSize,
   getStories,
@@ -164,6 +165,7 @@ function createChromeTarget(
         await evaluateOnNewDocument(`(${disableAnimations})(window);`);
       }
       await evaluateOnNewDocument(`(${disablePointerEvents})(window);`);
+      await evaluateOnNewDocument(`(${disableInputCaret})(window);`);
 
       debug(`Navigating to ${url}`);
       await Promise.all([Page.navigate({ url }), awaitRequestsFinished()]);