Question

我正在使用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提交表单。错误消息是JavaScript错误javascript error: Cannot read property 'click' of null，它是由于输入错误后表单超时导致的。

Answer 1

因此，事实证明，我并不需要我想的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方法，该方法随后接受一个函数，在此方法中，您将引用模式中项目的选择器，但仅在模式可用之后。

Laravel Dusk在表单确认后删除输入值

1 个答案: