Check List for HTML Component in Software Testing, Manual Testing Test Case Step for HTML Form Elements example in Software Testing

Check List for HTML Component in Software Testing, Manual Testing Test Case Step for HTML Form Elements example in Software Testing:-

The HTML component is used to design web pages and form elements.

In this session, I am discussing various checklists for HTML form elements.

1)  TextField:-

It is used to take input from user's using single-line text

Syntax of text field:-

<input type="text"  placeholder="Enter content" name="txt1" id="txt1"   />

<input type="password"  placeholder="Enter content" name="txt1" id="txt1"   />

<input type="email"  placeholder="Enter content" name="txt1" id="txt1"   />

<input type="number"  placeholder="Enter content" name="txt1" id="txt1"   />

<input type="date"  placeholder="Enter content" name="txt1" id="txt1"   />

Checklist for textfield:-

1)  it supports alphabets, numeric and special char according to form requirements.

2)  check width, height, color, and background-color attribute

3)  check the max length and minimum length char size

4)  check cursor position of the text field

5)  check the type of text that is accepting plain text, email text, or password type text according to form requirement.

6)  check the case of the text field that is accepting lower case by default, if special requirements then the text field can support upper case char also.

7)  Check the placeholder attribute of a text field to provide a hint to users?

8)  when double-click on internal text then the text should be selected and when we right-click on it then the context menu should be opened.

9)  if the text field is read-only then the content should not be editable

10)  if the text filed is numeric up-down type then it will increase or decrease data according to requirement.

     it has a default incrementor that will increase the value by one.

11)  if the text field is date type then check the date range according to the form requirement. we can check min to max date range, before date, after date, current date, date format, etc.

2)  Checklist for Hyperlink or Anchor Tag:-

   It is used to provide navigation from one web page to another, when we click on the menu item then it is used to provide a link option on the menu.

<ul><li><a href=''index.html">Home</a></li></ul>

Checklist for anchor tag:-

1)  it should be clickable

2)  it should be redirected to the desired page according to the URL

3)  Cursor icon should be hand cursor

4)  check hover color based on the requirement

5)  check tab position that anchor URL will be overridden or shifted to the next tab

3)  Check List of Radio Button:-

It is used to provide click on the single option in multiple options.  for example, if we use male and female attributes for gender then we use the radio button.

<input type="radio" name="gender"  value="Male" > Male

<input type="radio" name="gender"  value="Male" > Male

Checklist for radio button:-

1)  Only a single item should be selected

2)  if the radio button should be selected then another radio button of the same group should be unselected.

3) check the alignment of all radio buttons means all radio buttons should be in the same alignment

4) Check List of Checkbox:-

It is used to provide \click on the multiple options in a group of options.  for example, if we use Manual Testing and Automation Testing Courses Selection then we use the checkbox component.

<input type="checkbox" name="chk"  value="Manual Testing" > Manual Testing

<input type="checkbox" name="chk"  value="Automation Testing" > Automation Testing

Checklist for check button or checkbox:-

1)  Multiple items should be checked or unchecked 

2)  if the checkbox should be selected then another checkbox of the same group should be selected and unselected.

3) check the alignment of all checkboxes means all checkboxes should be in the same alignment

4)  as per requirement, the default checkbox can be selected otherwise it will be unselected.

Checklist for drop-down list and Select box:-

It is used single item selection in  a group of items.

Syntax

<Select>

<option value="Select Item"></option>

<option value="1001">C</option>

<option value="1002">CPP</option>

<//Select>

1) Single items should be Selected or unselected

2)  In all list of items only one item should be selected

3) the First item of the dropdown list should show a message. (Select Item)

4)   Only one items should be shown, other items should be show when we click on list

5) It has value field and display filed attribute to show the elements.

Checklist for listbox :-

It is used to select multiple items selection in  a group of items.

Syntax

<Select mutiple="true">

<option value="Select Item"></option>

<option value="1001">C</option>

<option value="1002">CPP</option>

<//Select>

1) Multiple items should be Selected or unselected to press ctrl

2)  In all list of items multiple item should be selected

3)   multiple items should be shown, other items should be show when we scroll the scrollbar

5 It has value field and display filed attribute to show the elements.