时间戳

首页 > 解决方案 > Laravel Dusk 在表单确认后删除输入值

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

问题描述

我正在使用 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，它是由输入错误后表单超时引起的。

标签： javascriptphplaravellaravel-dusk

解决方案

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

推荐阅读