Web Elements-Every Tester must know before testing

It may help you to writing the description of Test cases & Bugs

User Interface Elements

Interface elements include but are not limited to:

• Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
• Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
• Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
• Containers: accordion

Checkboxes:- Checkboxes allow the user to select one or more options from a set.?It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary.

Radio buttons:- Radio buttons are used to allow users to select one item at a time.

Dropdown lists:- Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more compact allowing you to save space. Consider adding text to the field, such as ‘Select one’ to help the user recognize the necessary action.

List boxes:- List boxes, like checkboxes, allow users to select a multiple items at a time, but are more compact and can support a longer list of options if needed.

Buttons:- A button indicates an action upon touch and is typically labeled using text, an icon, or both.

Dropdown Button:- The?dropdown button?consists of a button that when clicked displays a drop-down list of mutually exclusive items.

Toggles:- A toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.

Text fields:- Text fields allow users to enter text.?It can allow either a single line or multiple lines of text.

1. Container
2. Leading icon (Optional element)
3. Label
4. Placeholder/Input text
5. Trailing icon (Optional element)
6. Helper text/Error text (Optional element

Breadcrumb:- Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

Pagination:- Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.

Sliders:- A slider, also known as a track bar, allows users to set or adjust a value.?When the user changes the value, it does not change the format of the interface or other info on the screen.

Notifications:- A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.

Carousel:- Carousels allow users to browse through sets of content, like images or cards, often hyperlinked to more content or sources. The biggest advantage of using carousels in UI design is that they enable more than one piece of content to occupy the same area of space on a page or screen.

Loader:- Loaders can take on many, many forms—designers enjoy getting creative with them. Loaders are designed to let users know the system is completing an action in the background and should wait.

Date/Time Picker:- Date and time pickers let users pick dates and times. The advantage of using pickers over input fields is the ability to keep all the data users enter tidy and consistently formatted in a database, making information manageable and easy to access.

Toast message:- A toast?provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.

Pop-ups:- Pop-ups are?unwanted advertisements or alerts displayed on your phone while scrolling through web pages or using an app.

Tooltip:- A tooltip is?a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.