From 8f5f5fe56b45a762beac1ad3bf36b3cf5f93c9a0 Mon Sep 17 00:00:00 2001 From: Joel Arvidsson Date: Wed, 3 Jun 2020 18:52:11 +0200 Subject: [PATCH] Make blinking input carets transparent to avoid flakiness (#241) --- .../chrome_a4_FocusedInput_default.png | Bin 0 -> 191 bytes .../chrome_iphone7_FocusedInput_default.png | Bin 0 -> 301 bytes .../chrome_laptop_FocusedInput_default.png | Bin 0 -> 191 bytes examples/react/src/FocusedInput.js | 5 +++++ examples/react/src/stories/index.stories.js | 3 +++ packages/browser/src/disable-input-caret.js | 16 ++++++++++++++++ packages/browser/src/index.js | 2 ++ .../src/create-chrome-target.js | 2 ++ 8 files changed, 28 insertions(+) create mode 100644 examples/react/.loki/reference/chrome_a4_FocusedInput_default.png create mode 100644 examples/react/.loki/reference/chrome_iphone7_FocusedInput_default.png create mode 100644 examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png create mode 100644 examples/react/src/FocusedInput.js create mode 100644 packages/browser/src/disable-input-caret.js diff --git a/examples/react/.loki/reference/chrome_a4_FocusedInput_default.png b/examples/react/.loki/reference/chrome_a4_FocusedInput_default.png new file mode 100644 index 0000000000000000000000000000000000000000..4bebfe7f6883c9c9e18623bf222bb7c432313074 GIT binary patch literal 191 zcmeAS@N?(olHy`uVBq!ia0vp^Yk^plgAGWUnB_$SsWwj+$B>N1x3?Dx9tsd~xhURt zL*!FtgVzQTvDRgRQXX8Ly$p`boxe64KM&dP=$7oXoweIHimJ@`wsqa@8?XM=e80!k zUK7{9>x&#?dgnBYMXG%noyt*Ft}a} z51Jtvv5&=LLqlu+%WzlG54I&on8mafB&upMOU2DHd9JbJvg|d>YK9e(lb<~OHFf#v z;}>-qmT#)L_vxSUQ^n4cOd>h``JSKbqZq1s#1@>%U_3QI)G?LFcfs2}etjX<5M251 luiqq|*K__p0CIjaD})NHxO(sP1)%>KJYD@<);T3K0RSDmfYty2 literal 0 HcmV?d00001 diff --git a/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png b/examples/react/.loki/reference/chrome_laptop_FocusedInput_default.png new file mode 100644 index 0000000000000000000000000000000000000000..4bebfe7f6883c9c9e18623bf222bb7c432313074 GIT binary patch literal 191 zcmeAS@N?(olHy`uVBq!ia0vp^Yk^plgAGWUnB_$SsWwj+$B>N1x3?Dx9tsd~xhURt zL*!FtgVzQTvDRgRQXX8Ly$p`boxe64KM&dP=$7oXoweIHimJ@`wsqa@8?XM=e80!k zUK7{9>x&#?dgnBYMXG%noyt* ; + +export default FocusedInput; diff --git a/examples/react/src/stories/index.stories.js b/examples/react/src/stories/index.stories.js index de96f557..0396abcb 100644 --- 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', () => ( @@ -73,3 +74,5 @@ storiesOf('Zero height', module).add('with padding', () => ( )); storiesOf('Hover', module).add('default', () => ); + +storiesOf('FocusedInput', module).add('default', () => ); diff --git a/packages/browser/src/disable-input-caret.js b/packages/browser/src/disable-input-caret.js new file mode 100644 index 00000000..1cfd5f83 --- /dev/null +++ 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 index b89ef624..18a865b9 100644 --- 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 index 42102646..15cc449a 100644 --- 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()]);