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

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 方法，该方法然后接受一个函数，您将在该函数中引用模态中项目的选择器，但仅在模态可用之后。