Element Not Interactable error by Firefox

Question

I've got input elements inside a Shadow DOM. WebdriverIO is used for automated testing. The test cases include setting values for such input elements.

const element = container.shadow$('input[data-test=test]');
await element.waitForDisplayed({ timeout: 5000 });
await element.setValue('TestValue');

These tests pass in Chrome but Firefox(99) is throwing the below error.

HTTP Status: 400
{
    "message": "Element <input ...> is not reachable by keyboard",
    "error": "element not interactable"
}

Please let me know how can it be fixed.

FYI, No elements are overlapping it. It's neither hidden nor in disabled state.

Answer 1

setValue command on an input field of a Shadow DOM isn't supported by Firefox.

Ref: https://github.com/webdriverio/webdriverio/blob/4e91ae54f631d895ebe7389e7688cf4980d972f4/website/blog/2019-02-22-shadow-dom-support.md#browser-support