التخطي إلى المحتوى الرئيسي

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.


التسميات:

تعليقات

إرسال تعليق

POST Answer of Questions and ASK to Doubt

المشاركات الشائعة من هذه المدونة

Uncontrolled form input in React-JS

  Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component {     constructor ( props )     {         super ( props );         this . fun = this . fun . bind ( this ); //event method binding         this . input = React . createRef ();...
إرسال تعليق
قراءة المزيد

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...
إرسال تعليق
قراءة المزيد

JDBC using JSP and Servlet

JDBC means Java Database Connectivity ,It is intermediates from Application to database. JDBC has different type of divers and provides to communicate from database server. JDBC contain four different type of approach to communicate with Database Type 1:- JDBC-ODBC Driver Type2:- JDBC Vendor specific Type3 :- JDBC Network Specific Type4:- JDBC Client-Server based Driver  or JAVA thin driver:- Mostly we prefer Type 4 type of Driver to communicate with database server. Step for JDBC:- 1  Create Database using MYSQL ,ORACLE ,MS-SQL or any other database 2   Create Table using database server 3   Create Form according to database table 4  Submit Form and get form data into servlet 5  write JDBC Code:-     5.1)   import package    import java.sql.*     5.2)  Add JDBC Driver according to database ide tools     5.3)  call driver in program         ...
4 تعليقات
قراءة المزيد