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);

Ожидаемый результат — Даск отправит форму. Сообщение об ошибке — это ошибка JavaScript, говорящая javascript error: Cannot read property 'click' of null, которая вызвана истечением времени ожидания формы после ошибки во входных данных.


javascript php laravel laravel-dusk
person Jared Choate    schedule 07.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Так что, как оказалось, мне не нужен был 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, который затем принимает функцию, в которой вы будете ссылаться на селекторы элементов в модальном окне, но только после того, как модальное окно станет доступным.

person Jared Choate    schedule 12.06.2019