在Robot Framework中切换输入类型=“范围”

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语法中）是{{1 }}

Robot Framework有一个名为C:/Users/user01/Desktop/javascriptcode.js的关键字。它运行一系列JavaScript，正如它在罐头上所说的那样。它可以返回一个值，但这对这个答案并不重要。

您希望不仅使用文件名的完整路径，还要使用文件中的确切方法，如下所示：

Execute JavaScript

这会将变量Execute JavaScript C:/Users/user01/Desktop/javascriptcode.js.togglebutton(${range}) 的值发送到您的${range}函数，触发其中的代码以运行并切换您的开关。