Laravel Dusk在表单确认后删除输入值
Laravel Dusk在表单确认后删除输入值
提问于 2019-06-07 09:51:10
我正在使用Laravel Dusk进行浏览器测试。我还是个新手，还在学习它是如何工作的。我使用了很多JavaScript来帮助我做我需要做的事情。
我有一个需要填写的模式上的表单，我可以使用JS来完成。但是，验证失败，因为当Dusk按下按钮提交字段时，它首先清除输入，导致表单抛出错误，因此验证失败。
我试着搜索其他有同样问题的人，但我找不到其他人。我没有尝试任何东西，因为没有关于问题根源的痕迹。
$browser->script('document.querySelector("#body-nav > div:nth-child(1) > select").selectedIndex=1');
$browser->pause(5000);
$insertJobTitle = <<<js
document.querySelector("#body-nav > div:nth-child(2) > input").value="{$jobTitle}"
js;
$browser->script($insertJobTitle);
$browser->pause(1000);
$insertDateTime = <<<js
document.querySelector("#body-nav > div:nth-child(3) > input").value="2019-07-25"
js;
$browser->script($insertDateTime);
$browser->pause(1000);
$insertEstimatedTimeToFill = <<<js
document.querySelector("#body-nav > div:nth-child(4) > div:nth-child(1) > input").value={$numberHigh}
js;
$browser->script($insertEstimatedTimeToFill);
$browser->pause(1000);
$insertNumberOfPositions = <<<js
document.querySelector("#body-nav > div:nth-child(4) > div:nth-child(2) > input").value={$numberLow}
js;
$browser->script($insertNumberOfPositions);
$browser->pause(1000);
$browser->script('document.querySelector("#body-nav > div:nth-child(5) > div:nth-child(1) > input").value=500');
$browser->pause(1000);
$browser->script('document.querySelector("#body-nav > div:nth-child(5) > div:nth-child(2) > input").value=200');
$browser->pause(1000);
$browser->script('document.querySelector("body > div.modal.fade.show > div > div > div.modal-footer > div > div > button.btn.btn-primary").click()'); //******** */
$browser->pause(50000);预期的结果是让Dusk提交表单。Error message是一个显示为javascript error: Cannot read property 'click' of null的JavaScript错误，它是由表单在输入错误后超时引起的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-13 04:36:18
所以，事实证明，我并不像我想的那样需要JavaScript。发生的事情是，我试图使用JS在HTML元素中插入文本，该元素实际上是一个Vue组件。当我按下按钮提交时，它不会识别这些值。
问题是我试图在一个模式上插入数据。我很难在模式中使用选择器。我最终使用了这个结构：
$browser->whenAvailable('body > div.modal.zoomin.show > div > div > div.modal-body', function($modal){
$modal->click('body > div.modal.zoomin.show > div > div > div.modal-footer > div > div > label.ml-auto.mb-0.vue-js-switch > div');
$modal->press('body > div.modal.zoomin.show > div');
});解决方案是，当您访问模式中的项时，您必须使用whenAvailable方法，该方法然后接受一个函数，在该方法中，您将引用模式中项的选择器，但仅在模式可用之后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56487041
复制相关文章
相似问题
腾讯云开发者
