隐藏/删除 Internet Explorer 上文本输入的插入符号 (11)

Question

I am working with WebdriverIO selenium tests, I have cases where the screenshot comparisons fails and the tests fails because of the blinking insertion cursor.

For Chrome I have circumvented this issue by having a button for my component screenshots that I click before asserting the screenshots which hides the caret using the code

dropdownInput.style.caretColor = "#0000";

But for Intenet explorer the caret-color property is not supported, I have tried using the color: transparent;text-shadow: 0 0 0 #000; , and several other examples but I cannot get it to work.

If there is any way to solve this using JavaScript, the WebdriverIO API, or some npm package or any solution, please share with me guys thanks.

Answer 1

I have found a work around to prevent the selenium tests from failing by following on the following on the issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10655065/ .

That is, changing the background-color of the text-input to #7F7F7F , this will hide the visibility of the insertion caret. This is not an official solution as the screenshots will differ from the ones I have with the react-storybook because of this background-color , this is just to avoid the failing tests because of the blinking insertion caret on Chrome <54 and Internet Explorer/MS Edge .

I will post a rather better solution soon.

UPDATE: This is in the past, I don't know the status of this now