Basic Loop Creation and Maintenance

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. 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.

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. 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 icon L1, denoting the first Loop in the test. If there are nested Loops, the second Loop in a test will therefore display L2 and so on. 

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

Browser Results tab

Slider View

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 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. Open a new Architect test case and begin recording up to the point of adding in the Loop sequence.
   
2. Record the Actions for the Loop sequence. Once you reach the end of the sequence you plan to Loop, click the plus sign icon to open the Actions panel.
   
   
   
   
3. Select Loops.
   
   
   
4. Select X Times to define the number of iterations or Custom JS for the operation of the Loop. X Times runs the loop for the specified number of iterations, and 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 Save. 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. We'll open the Verify Action and change the text value from "1" to a custom expression of "{{fze.iteration + 1}}" and save the update. This will now validate the display number against the current loop iteration being performed.
   Something to note for this specific expression, computers always start counting from 0, so we add “ + 1” to the expression. This way we can start counting the items in the cart at 1.
   
   
   
   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 that 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 designated 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. 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. Click Insert.
   
   
5. Note the vertical line on the left with a dot for the first Action, the Action banner includes the "L1" notation, and the Action footer contains a greater than symbol. Hover over the symbol to highlight the Loop. Click to 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. As with a Parent Loop, open the Insert Menu above the first Action of your Loop sequence. 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. Regardless of which Loop method you select, you will then select the Loop End Action from the drop-down menu. Then click Insert.
   
   
4. The new Child Loop will display within the Parent Loop. Note that there is a second vertical line on the left with a dot for the first Action, the Action banner includes the "L2" notation, and the Action footer contains two greater than symbols denoting the nested nature of Loop 2.
   
   
5. Hover over the symbol to the right of the pair to highlight the Loop. 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 Action will return the included Actions to their usual 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. Click Delete.
   
   
3. Confirm Deletion.
   
   
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.