Loops Background

Thorough testing often involves repeating certain tasks on your site to confirm consistency, accuracy, and functionality. Functionize offers Page Objects as one way to store common testing tasks such as flows for logging in, running a search, or navigating to a secondary location in the site.

Another option that offers more precision and flexibility is using Loops in your test cases. Loops are methods to repeat certain actions to test a task more completely, doing this a specified number of times or until a certain condition is met or unmet.

Viewing Completed Loops

By default, all Loops on the Browser Results tab and Slider View display the final iteration.

Browser Results tab

Slider View

To view all Actions within a Loop, click Show all iterations. The number of the iteration and the pass/fail status are displayed on each Action.

Browser Results tab

Slider View

At the left of the pass/fail indicator, the Loop is labeled (L1, L2, L3, etc.) in the first Action of the sequence.

There are several visual aids to see where each Loop begins and ends at a glance. The first indicator is a Vertical Line to the left of the Actions running the length of the sequence of Loop steps. The next item is a small greater-than icon in each Action's footer. Hovering over this icon will highlight all included Actions in the sequence. This can also be clicked to keep the highlighting visible while working on your test.

The first Action in any Loop sequence will also be denoted by a small dot on the vertical line at the left. This first Action also displays an L1 icon , denoting the first Loop in the test. If there are nested Loops, the second Loop in a test will therefore display L2 icon and so on. 

See more examples below in the sections Adding Loops to an Existing Test and Nested Loops.

Use Case

Your online retail site's shopping cart had a bug early in development where the number of items added didn't match the display on the screen. As part of your test suite, you want to ensure this bug isn't reintroduced at any point. Below we will record a test in Architect to validate that as we add items to the cart, the display number increases accordingly. We'll use a Loop to add multiple items and check the display on each iteration.

An advanced use of Loops in this test would be adding a custom JavaScript Action within the Loop to verify that a projected value for the cart's total dollar amount matches the actual dollar amount on the UI once the item has been added.

Incorporating Loops in Architect

This example demonstrates the shopping cart use case mentioned above verifying that the cart's item count increases as the items are added.

1. Record a new Architect test case up to the point of adding in the Loop sequence
   
2. Record the Actions for the Loop sequence and once you reach the end of the sequence you plan to Loop, click the plus sign icon to open the Architect's Actions sidebar panel
   
   
   
3. Select Loops
   
   
   
4. Select X Times tab to define the number of iterations or Custom JS tab for the operation of the Loop - the X Times runs the loop for the specified number of iterations, and the Custom JS can be used to set a specific condition for exiting the loop such as "run while this statement is true" - for this example, X Times is selected and 10 is entered
   
   
   
5. Select the Actions to execute within the Loop, there are multiple selection methods outlined in the Loops panel, the white dot next to the first and last Actions have been selected for this example
   
   
   
6. Click the Save button on the Architect's Loops sidebar panel and the Architect now displays the Loop Actions grouped together
   
   
   
7. In this example, the verification of the number displayed on the cart should increase as we add items to the cart - open the Verify Action Architect Action details sidebar panel and change the Text Value from '1' to a custom expression of '{{fze.iteration + 1}}' - save the update on the Architect Action details sidebar panel so that this Verify Action will now validate the display number against the current Loop iteration being performed
   NOTE: For this specific expression, computers always start counting from 0, so including the '+ 1' to the expression, it will start counting the items in the cart at 1.
   
   
   NOTE: Why is this included in the test? Perhaps the mismatch bug happens only when a large number of items have been added to the cart, or maybe it appears randomly. Validating within each iteration can help track down unpredictable or unforeseen behaviors of your site.
   
   
8. Record any additional actions needed in the test, for this example, we've added a final verification of the total dollar amount displayed for the cart is equal to the total number of iterations adding the item multiplied by the price of the item being added
   
   
   
9. Save the test
   

Editing Loops

You can Edit Actions within a Loop by expanding the specific action as you normally would and perform any edits needed

You can also Insert Actions within a Loop using the standard Insert process.

Deleting an Action within a Loop is performed the standard way as well.

Adding Loops to an Existing Test

Loops may be created during test recording in Architect, and also from the Test Detail page after recording.

1. Open the Test Detail page
   
   
   
2. Open the Insert Menu above the first Action of your Loop sequence and click Loop
   
   
   
3. In the dialog box, choose Custom JS or X Times and enter the appropriate information - this is your JavaScript statement set to return a boolean true/false value or the number of iterations
   
   
   
   
4. Regardless of which Loop method you select, you will then select the Loop End Action from the drop-down menu and then click Insert
   
   
   
5. The Vertical Line on the left with a dot for the first Action of the Loop, the Loop Action banner includes the 'L1' notation, the Action footer contains a greater than symbol and hover over the symbol to highlight all of the steps in the Loop - click on symbol will retain the highlighting
   

Nested Loops

Functionize offers the ability to nest Loops in your tests. Nested Loops are not available to set within Architect, but the Actions can be recorded as part of the Parent Loop. The Child Loop can then be created and/or adjusted on the Test Detail page as shown here:

1. Open the Test Detail page
   
   
   
2. In the Parent Loop, open the Insert Menu above the first Action of your Child Loop sequence and click Loop
   
   
   
3. In the Insert Loop dialog box, choose Custom JS or X Times and enter the appropriate information - this is your JavaScript statement set to return a boolean true/false value or the number of iterations, regardless of which Loop method you select, you will then select the Loop End Action from the drop-down menu and then click Insert
   
   
   
   
4. The new Child Loop will display within the Parent Loop
   Note: There is a second vertical line on the left with a dot for the first Action of the Child Loop, the Action banner includes the 'L2' notation, and the Action footer contains two greater than symbols denoting the nested nature of Child Loop.
   
   
   
   
5. Hover over the symbol to the right of the pair to highlight the Child Loop and click the greater than symbol to retain the highlighting
   

Deleting Loops 

Loop Actions can be deleted from the test to eliminate a Loop sequence. Deleting the Loop Action will return the included Actions to their normal state.

NOTE: Deleting the Loop Action does not delete each Action that is part of the Loop sequence.

1. Open the Test Detail page and find the Loop to be deleted
   
   
   
2. Open the Action Settings for the Loop Action and click Delete
   
   
   
   
3. Confirm Deletion and click Delete button
   
   
   
4. The Loop itself has been deleted; the Actions that were part of the Loop are retained
   

What's Next

Now that you've mastered the basics, it's time to look at more complex and advanced ways to leverage Loops in your tests! To learn more, check out Loops and Conditionals Advanced Examples.