Toggle-Eingabe Typ = "Bereich" in Robot Framework

Question

Ich habe eine Schaltfläche mit drei Status toggleable. Es ist ein Eingangstyp = Bereich, ich muss einen automatischen Test für meine Anwendung schreiben. Kann mir jemand helfen, einen Weg zu finden, wie man den Knopf im Roboterrahmen umschaltet? Gibt es ein Stichwort für solche Dinge? Hier

ist der Code meiner Taste:

function togglebutton(range) { 
 

 
     var val = range.value; 
 

 
     if (val == 1) { 
 

 
      //change color of slider background 
 
      range.className = "no"; 
 
      range.id = "radio-no"; 
 
      range.checked = true; 
 

 
      //alter text 
 
      document.getElementById('span-selector').setAttribute("class", "wrong"); 
 
      document.getElementById('label-selector').setAttribute("for", "radio-no"); 
 

 
     } else if (val == 2) { 
 
      //change color of slider background 
 
      range.className = "neutral"; 
 
      range.id = "radio-neutral"; 
 
      range.checked = true; 
 

 
      //alter text 
 
      document.getElementById('span-selector').setAttribute("class", "natural-icon"); 
 
      document.getElementById('label-selector').setAttribute("for", "radio-natural"); 
 

 
     } else if (val == 3) { 
 
      //change color of slider background 
 
      range.className = "yes"; 
 
      range.id = "radio-yes"; 
 
      range.checked = true; 
 

 
      //alter text 
 
      document.getElementById('span-selector').setAttribute("class", "correct"); 
 
      document.getElementById('label-selector').setAttribute("for", "radio-yes"); 
 
     } 
 
    }

.radio-wrapper { 
 
    width: 70px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: rgba(114, 191, 68, 0.4); 
 
    border-radius: 30px; 
 
    position: relative; 
 
    margin-left: 1%; 
 
} 
 

 
.correct { 
 
    left: 15px; 
 
    top: -5px; 
 
} 
 

 
.wrong { 
 
    right: 17px; 
 
    top: -5px; 
 
} 
 

 
.neutral-icon { 
 
    left: 69px; 
 
    top: -8px; 
 
    opacity: .5; 
 
} 
 

 
label { 
 
    z-index: 9; 
 
} 
 

 
input[type=range] { 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
    width: 100%; 
 
    padding: 0; 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
input[type=range]::-ms-fill-lower { 
 
    background: #777; 
 
    border-radius: 10px; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
    background: #ddd; 
 
    border-radius: 10px; 
 
} 
 

 
input[type="range"]::-moz-range-track { 
 
    background: none; 
 
    border: none; 
 
} 
 

 
i { 
 
    z-index: 99; 
 
    font-size: 18px; 
 
} 
 

 
.neutral-icon i { 
 
    font-size: 10px; 
 
} 
 

 
.neutral + label { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 37%; 
 
    transition: transform 1s; 
 
} 
 

 
.neutral::-moz-range-thumb, .no-style::-moz-range-thumb { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: rgb(238, 238, 238); 
 
    background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
.yes + label { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    text-align: center; 
 
} 
 

 
.yes::-moz-range-thumb { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: rgb(32, 213, 50); 
 
    background: -moz-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(32, 213, 50, 1)), color-stop(100%, rgba(28, 195, 1, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%); 
 
    -moz-animation-duration: 0.4s; 
 
    -moz-animation-name: slidein; 
 
    -webkit-animation-duration: 0.4s; 
 
    -webkit-animation-name: slidein; 
 
    animation-duration: 0.4s; 
 
    animation-name: slidein; 
 
    -webkit-transform: translateZ(0); 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
.no + label { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    right: 0px; 
 
    text-align: center; 
 
    margin-right: 0 !important; 
 
} 
 

 
.no::-moz-range-thumb { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: red; 
 
    -moz-animation-duration: 0.4s; 
 
    -moz-animation-name: slideno; 
 
    -webkit-animation-duration: 0.4s; 
 
    -webkit-animation-name: slideno; 
 
    animation-duration: 0.4s; 
 
    animation-name: slideno; 
 
    -webkit-transform: translateZ(0); 
 
    background: rgb(230, 108, 103); 
 
    background: -moz-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 108, 103, 1)), color-stop(100%, rgba(221, 79, 75, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%); 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    border: none; 
 
} 
 

 
@keyframes slidein { 
 
    from { 
 
     transform: translate(25px, 0); 
 
    } 
 
    to { 
 
     transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@keyframes slideno { 
 
    from { 
 
     transform: translate(-25px, 0); 
 
    } 
 
    to { 
 
     transform: translate(0px, 0px); 
 
    } 
 
} 
 

 
@keyframes returnLeft { 
 
    from { 
 
     transform: translate(-50px, 0); 
 
    } 
 
    to { 
 
     transform: translate(0px, 0); 
 
    } 
 
} 
 

 
@keyframes returnRight { 
 
    from { 
 
     transform: translate(50px, 0); 
 
    } 
 
    to { 
 
     transform: translate(0px, 0); 
 
    } 
 
}

<span class="pull-left"><?php echo Language::T('Confirm'); ?></span> 
 
        <span class="pull-right"><?php echo Language::T('Reject'); ?></span> 
 
        <div class="radio-wrapper"> 
 
         <span id="span-selector"></span> 
 
         <?php if ($row['state'] == 0) 
 
         { 
 
          $state = 2; 
 
         } 
 
         elseif ($row['state'] == 1) 
 
         { 
 
          $state = 3; 
 
         } 
 
         else 
 
         { 
 
          $state = 1; 
 
         } ?> 
 
         <input type="range" class="no-style" name="data[orderId][<?= $row['orderId'] ?>]" 
 
           onchange="togglebutton(this);" 
 
           min="1" max="3" value="<?= $state ? $state : 2 ?>"> 
 
        </div>

Gibt es eine Stichwort für solche Dinge zu tun?

Answer 1

Irgendwo in Ihrem HTML müssen Sie einen absoluten oder relativen Pfad zu Ihrer JavaScript-Datei haben. Wenn Sie einen absoluten Pfad erhalten können, wird dies ziemlich einfach.

Da ich Ihren absoluten Pfad nicht kenne, nehme ich an, dass die .js-Datei auf Ihrem lokalen Rechner gespeichert ist und ich nehme an, dass der Pfad (in Robot Framework-Syntax) C:/Users/user01/Desktop/javascriptcode.js ist.

Robot Framework hat ein Stichwort namens Execute JavaScript. Es läuft eine Zeile JavaScript, genau was es auf der Dose steht. Es kann einen Wert zurückgeben, aber das ist für diese Antwort nicht wichtig.

Sie werden den vollständigen Pfad verwenden möchten, um nicht nur den Dateinamen, sondern auch die genaue Methode in der Datei wie folgt:

Execute JavaScript C:/Users/user01/Desktop/javascriptcode.js.togglebutton(${range}) 

, dass der Wert der Variablen ${range} sendet zu Ihrer togglebutton() Funktion, die Auslösung des Codes innerhalb es zu laufen und schalten Sie Ihren Schalter.