Test Cases For Toggle Button

.

Sample Test Cases For Toggle Button

Hello Folks, 

In this tutorial, we will learn how to write Toggle Button Test Cases? We will also learn about positive test scenarios and Negative test scenarios.

How to write test cases for the toggle button?

Here!!! Important test cases for the toggle button are given ...

• First, check whether the user is able to on/off the toggle button or not.

• Check the toggle button on the user's first view.

• Verify whether the button colour getting changed or not when the user is on or off the button.

• Verify the dependent element working as expected or not when the user is on or off the toggle button.

• Verify whether the design of the toggle button is per requirement or not.

• Check the positioning of the toggle button.

• Check the size of the toggle button.

• Check the colour of the button. (on/off)

• Check that the user able to turn on/off the toggle button if there are multiple buttons is there.

Hope !!! The above test case for the toggle button is helpful for you...

Team,

QA acharya

Share Your Knowledge With Us -
Mail your content - qaacharya.in@gmail.com

Test Cases for Toggle button

How to Create a toggle Switch?

HTML CODE: 

<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

CSS :

 

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}