Laravel Dusk填充日期输入框报错，如何正确实现填充？

这个报错其实挺常见的——原生的date类型输入框在多数浏览器里是系统级控件，并非普通的可编辑文本框，所以type()方法会因为元素不满足“用户可编辑”的条件，抛出Element must be user-editable in order to clear it错误。下面给你几个靠谱的解决方案：

方法1：使用setValue()方法（推荐） #

Laravel Dusk自带的setValue()方法可以直接设置元素的value属性，完全绕开“可编辑”的限制，特别适合处理date、datetime这类特殊输入框：

$browser->setValue('cooked_at', (new Carbon())->format('Y-m-d'));

这里要注意，HTML5的date输入框要求值必须是Y-m-d格式（比如2024-05-20），Carbon的这个format刚好完美匹配，不用额外调整。

方法2：通过JavaScript直接修改DOM #

如果setValue()因为某些特殊场景不生效（比如项目用了封装的自定义日期组件），可以用Dusk的script()方法执行原生JS来强制设置值：

$date = (new Carbon())->format('Y-m-d');
$browser->script("document.querySelector('input[name=\"cooked_at\"]').value = '$date';");

如果你的输入框不是通过name属性定位，也可以换成id或其他CSS选择器，比如#cooked_at。

方法3：模拟手动选择（不推荐，兼容性差） #

如果上面两种方法都不行，你可以尝试模拟点击日期控件并输入日期，但这种方法依赖浏览器的控件样式，不同系统/浏览器表现可能不一致，仅作为备选：

$browser->click('input[name="cooked_at"]')
        ->keys((new Carbon())->format('Ymd')); // 这里要用无分隔符的日期格式

额外注意事项 #

• 先确认你的选择器（cooked_at）是否正确：比如输入框的name属性确实是cooked_at，或者换成id选择器如#cooked_at试试；
• 一定要保证Carbon生成的日期格式是Y-m-d，用其他格式比如d/m/Y的话，date输入框是不会识别的；
• 如果是第三方UI框架的日期组件（比如Element UI、Bootstrap的日期选择器），可能需要针对组件的特定API操作，但原生date输入框用前两种方法就足够解决问题。

内容的提问来源于stack exchange，提问作者rap-2-h