Address/URL bar

The location of the browser interface that displays the current URL, and where testers can view, modify the URL, or enter a new URL that will navigate the tester to a different site.

The navigation bar or navigation system also refers to the graphical interface designed to help access information. A common example is a file browser, as they provide paths and bread crumbs and other information. For more refer to this resource

Navigation Bar

A navigation bar is an element of a user interface the serves as the main hub from which a user can navigate to different locations in the UI. Typically, navigation bars will lead users to the primary functionalities of the application they’re using and such functionalities are indicated by text or icons. Navigation bars are often combined with details about where it is located. i.e Top Navigation bar may be abbreviated to "TopNav" and similarly Side Navigation Bar may be abbreviated to "SideNav".

Below is the navigation bar of Rainforest’s main website: 

Example step: 

Action: Click on “Case Studies” in the navigation bar at the top of the page

Question: Were you brought to a page with a list of case studies?

Toggle button 

A toggle button or toggle switch is a UI element that allows the end user to switch between two different states of a function or feature. Typically this button can be clicked and will change between two polar states like “On/Off”. 

Example Step:

Action: Click on the toggle button located next to the “Flashlight” header.Question: Did the button move and change from “off” to “on”?

Browser Window / Tab / Window

Although in conversation the terms 'browser' and 'tab' are commonly used interchangeably, they do not mean the same thing in Rainforest testing. 

To testers, a ‘browser’ or ‘window’ is shorthand for a single ‘browser window.’ While the two terms are interchangeable, we recommend choosing one term throughout test instructions to avoid any unnecessary confusion. 

'Tab' refers to the multiple panels or pages that can be opened within a single browser window. Some test cases will call for use of opening new tabs vs opening a new browser window. 

'Browser' is best used in use cases that call for opening a browser (Chrome/Safari) when switching from a phone application to web application on a native phone device. 

Sample Instructions: 

Action: Enter “www.example.com” in your window’s URL field and navigate to the web address. 

Action: Open a new tab in the same browser window and navigate to “www.example.com/bestexampleever”?

Menu /Sidebar Menu button/ Hamburger button

The menu button has many different names, but typically results in displaying other options when it is clicked open. It is often found on the top of the screen, but due different browser and app configurations there is no one standard location.

It is a best practice to indicate to testers where to find the button, however, due to non-standardization, testers should do their best to locate the button in the given platform being tested even if instructions are not specific. 

Textbox/Text Field:

‘Textbox’ and ‘Text field’ are elements that enable testers to input a certain amount of text. They can be of any size and usually cause the mouse cursor to change when hovering over it, or display a vertical line when selected. 

The terms are interchangeable terms and like browser vs window, we highly suggest maintaining a consistent use of one term throughout your tests, unless there is a reason that the two designate very different elements in an application.

In certain cases, a text box/field may also turn into a drop-down menu which may have preloaded values. In this case, it is a best practice to instruct testers to expect a dropdown. 

Example Steps:

Action: In the text field below “Summary”, copy and paste this step’s instructions (excluding the step’s question) into it.
Question:
Did this text field populate with the text you entered?

Action: In the text field next to “Shifts”, enter “{{random.first_name}}”
Question:
Did a drop-down appear with “{{random.first_name}} {{random.last_name}}” as the first row?

Tech Terms to define:

Breadcrumb:

A breadcrumb is an element in the user interface that users use to keep track of their locations within programs, documents, or websites. Usually, a breadcrumb element will display in the navigational order of how testers arrived a location on a webpage. Breadcrumbs typically follow a format similar to:

  •   Home page > Section page > Subsection page 

Example step: 

Action: Click on the “Homepage” text of the breadcrumb of site pages in the top left hand corner of the page.
Question:
Were you brought back to the Homepage?

Radio/Option Button: 

A Radio button, or option button, is an element in a user interface that allows the user to choose only one of a predefined set of options. That is, when one option is clicked from the list of options, clicking another option from the same list will override the selection of the previously submitted option. Visually, most radio buttons look similar to: 

Example step: 

Action: Click on the radio button next to the first option in the list and then click on the third option from the list.
Question
: When you clicked on the radio button next to the third option, was radio button from the first option deselected?

Checkbox

A checkbox is a small box on a form into which a check or other mark is entered as the response to a question. In a customer’s UI, how many checkboxes can be selected at once can vary from form to form; it is possible to have forms where only one checkbox can be checked at a time (similar to a radio button in function) and it is equally possible to check multiple or even all checkboxes.

Example Step

Action: Click on the the checkbox next to “Enable email notifications” under the “Email Preferences” header.
Question:
Was the checkbox filled in with a white checkmark against a blue background?

Dropdown/Dropdown Menu

A dropdown menu - also called a drop-down list, drop-down menu, drop menu or pull-down list or simply a drop down - is an UI element that allows the user to choose one value from a list of values. Typically, they can be accessed by clicking on a downward facing triangle or arrow, which reveals the menu from a search-bar-like field. 

Example Step:

Action: Access the dropdown menu under the “Timezone preferences” and select any option that begins with “America/”.
Question:
Did the field populate with the option you selected? 

Funnel Icon 

A funnel icon is a button that allows a user to filter options to locate an object matching the filter’s criteria. Generally they look like a downward point triangular or cone-shaped top half and a narrow rectangular stem piece attached to what the point of the triangular/cone would be. 

Example Step:

Action: Click on the funnel icon above the matrix.
Question:
Did a modal appear with different dropdown menus?

Tooltip

The tooltip or infotip or a hint is UI element used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.

Example Step:

Action: Hover over the question icon next to the text “Runs”
Question:
Does a modal appear when you hover over this question icon?

pill-button (allegedly seen in Quid jobs)*

Folder/File tree

Folder tree or File tree is how an operating system organizes folders and files. Generally there is a hierarchical structure of which folders and files live, and how that hierarchical structure is usually displayed is the tree structure.

Example Step

Action: In the left navigation, click on “Help”
Question:
were you redirected to a new page with a folder tree on the left where the left navigation used to be?

Return vs. Enter key

The “return” or “enter” key refers to the key on a computer keyboard that allows users to end an ‘entry’ in a command line, form, or dialogue. Functionally there is no difference between a return and enter key; the only difference is that the former is the name of the key on Macintosh (Mac) and the latter is the Windows name. 

In Rainforest, we make special note of the enter/return key because it can be confusing as it shares terms with the executable action ‘enter’ or ‘enter in’. When testers should finalize an action by hitting the enter key on their keyboard, it is a best practice to explicitly refer to the key in the instruction.

Example step: 

Action: Click on the “Message” field and enter “This is easy!”. Then hit the enter/return key on your keyboard.
Question:
Did your cursor move to the field under “Name”?

If you have any questions about how you should describe something while writing your Rainforest tests, please reach to us at support@rainforestqa.com.

Did this answer your question?