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.
setValue
command on an input field of a Shadow DOM isn't supported by Firefox.