Incorporating Custom JS and Variables in Loops
For this use case, we're going to verify that our site's drop-down menu category options direct users to the correct category pages. We’d like to verify that each link works, no matter how many there are or what they are named in case more are added or edited in the future. To accomplish this, we need to construct a variable that contains information about each option so we can iterate over that variable using a Loop with Custom JS.
Let's set up the test to open the menu and click the matching link for each category listed in the menu. This Loop will repeat until we've gone through each menu category once.
Note: This can be created while recording your test in Architect, but we chose to record the basic Actions and add all the customized expressions from the Test Detail Page.
- First, we'll set some Variables using Custom JS expressions in the Expression Builder.
// Find all child elements in product-categories
let listElements = Array.from(document.getElementsByClassName("product-categories")[0].childNodes);
// Save the text of the links to a list functionize variable
fze.local.categorylisttexts = [];
for (let i = 0; i < listElements.length; i++) {
if (listElements[i].firstChild != null && listElements[i].firstChild.textContent != null) {
fze.local.categorylisttexts.push(listElements[i].firstChild.textContent.trim());
}
}
// Save the hrefs of the links to a list functionize variable
fze.local.categorylisthrefs = [];
for (let i = 0; i < listElements.length; i++) {
if (listElements[i].firstChild != null && listElements[i].firstChild.hasAttribute('href')) {
fze.local.categorylisthrefs.push(listElements[i].firstChild.getAttribute('href'));
}
} - This creates two Functionize variables: fze.local.categoryListTexts and fze.local.categoryListHrefs. These are lists containing one element for each menu category to be viewed and clicked on as we iterate through. The value in the Variables tab (accessible via the Results tab of the Action Settings) displays the full array of menu category labels and links.
- Next we'll create the Loop to iterate through each link name in categoryListTexts until the iteration is no longer less than the length of the list. Instead of hard coding a number of iterations, we'll use the following Custom JS to define the Loop:
return fze.iteration < fze.local.categorylisttexts.length; - Once the Loop is defined, we can add the Actions to open the Category menu and then click the link. We want to click on the link with the correct text for the current iteration. In the Text field of the Action Settings Advanced tab we'll enter the following:
{{fze.local.categorylisttexts[fze.iteration]}}The fze.iteration expression comes in handy again to get each next link name in categoryListTexts. The Functionize ML Engine's element selection will prioritize variable values (i.e. the Text field value above) in order to select an element close to the modeled element containing dynamic text.
- Once the link is clicked, we can check the appropriate page opens directly from the Pageinit Action. Again we'll use the built-in iterator (i.e. fze.iteration), this time to select the nth link contained in categoryLinkHrefs and set it as the URL that should open upon clicking the Category name.
{{fze.local.categorylisthrefs[fze.iteration]}} - Once the test is executed, the expanded Loop iterations display which menu item was clicked and which URL was opened.