У браузера-синхронизатора есть функция «Синхронизация взаимодействия», которая позволяет выполнять «прокрутку», «щелчок», «обновление» и форматирование действий, которые зеркалируются между браузерами во время теста ». Однако это не так. Кажется, он работает для события onchange.browser-sync onchange событие не запущено на зеркалированных браузерах
В то время как React component `onChange` event not being triggered when synced with BrowserSync ссылается на то, что он не работает для React, он даже не работает в простом html с js.
Ряд форм, которые мы используем, имеет условно зависимые поля, и это мешает вам заполнить форму этого типа. Есть ли способ обойти это?
Я включил упрощенную версию этой формы ниже. Чтобы проверить это:
- взять копию ниже фрагмент кода и сохранить его как HTML файл
- перейдите в каталог, содержащий HTML
- открыть окно командной строки, перейдите в HTML файл, и запустить браузер синхронизации запуск --server
- браузер синхронизации запустит браузер, содержащий URL по умолчанию (HTTP: локальный: порт), добавляемый «/test.html» в URL
- скопировать URL в другой браузер
Вы увидите, что при выборе раскрывающихся зеркал событие и связанный с ним javascript не срабатывают.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hide{
display:none !important;
}
</style>
</head>
<body>
<form>
<h1>Conditional Form</h1>
<label>dependee</label>
<select name="radioGroup" id="radioGroup" onchange="displayDependent();">
<option value="-1">--</option>
<option value="radio1">radio1</option>
<option value="radio2">radio2</option>
</select>
<div id="text1Group" class="hide">
<label>text1</label>
<input type="text" name="text1">
</div>
<div id="text2Group" class="hide">
<label>text2</label>
<input type="text" name="text2">
</div>
<div id="text3Group">
<label>text3</label>
<input type="text" name="text3">
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function displayDependent() {
var dropDownSelect = document.getElementById('radioGroup').value;
// hide both
if (dropDownSelect == "-1") {
$("#text1Group").addClass("hide");
$("#text2Group").addClass("hide");
}
// show 1 hide 2
if (dropDownSelect == "radio1") {
$("#text1Group").removeClass("hide");
$("#text2Group").addClass("hide");
}
// show 2 hide 1
if (dropDownSelect == "radio2") {
$("#text2Group").removeClass("hide");
$("#text1Group").addClass("hide");
}
}
</script>
</html>