ロボットフレームワークの入力タイプ= "範囲"の切り替え

Question

トグル可能な3つのボタンがあります。それは入力タイプ=範囲です、私は自分のアプリケーションの自動テストを書く必要があります。誰かがロボットフレームワークのボタンをトグルする方法を見つける手助けをすることができますか？そのようなことをするキーワードはありますか？

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>

そのようなことを行うための任意のキーワードがあります：ここで

は私のボタンのコードはありますか？

Answer 1

HTMLのどこかに、JavaScriptファイルの絶対パスまたは相対パスのいずれかが必要です。あなたが絶対パスを得ることができれば、これはかなり簡単になります。

絶対パスがわからないので、.jsファイルがローカルマシンに格納されていると仮定します。パス（Robot Framework構文）はC:/Users/user01/Desktop/javascriptcode.jsと仮定します。

ロボットフレームワークにはExecute JavaScriptというキーワードがあります。これはJavaScriptの行を実行し、まさにそれを缶の上に表示します。それは価値を返すことができますが、それはこの答えにとって重要ではありません。

次のようにあなたは、ファイル名だけでなく、ファイルの正確な方法ではないだけに、完全なパスを使用することをお勧めします：に変数${range}の値を送信します

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

あなた togglebutton()機能を実行し、その中のコードを起動してスイッチを切り替えます。