Forum Discussion

MMZ's avatar
MMZ
Occasional Contributor
1 month ago
Solved

If statement

I need help about if...then statement in keyword testing. I'va an form where an column contains two LOVs i.e., Yes & No. When user select Yes more additional fields are appearing and if user select N...
keyword tests
  • scot1967's avatar
    scot1967
    1 month ago

    Hello,

    From your previous reply,

    Condition do you need to verify:

    If a user selects "Yes," an additional two to three dependent fields appear below it. If "No" is selected, the form proceeds normally without displaying these additional fields.

    I think an 'If Object' after TC clicks Yes would work.  The' If Then' block may not be what you want?

     

MMZ's avatar
MMZ
Occasional Contributor
1 month ago

I am currently conducting system testing for a web-based application. During this process, I’ve encountered a dynamic form scenario where the visibility of certain fields depends on user input in another fields.

Specifically, there is a field called "UOB" with a drop-down list containing "Yes" and "No." If a user selects "Yes," an additional two to three dependent fields appear below it. If "No" is selected, the form proceeds normally without displaying these additional fields.

I am using TestComplete for keyword testing and am unsure how to properly handle this conditional field behavior. Could you advise on the best approach or relevant TestComplete keywords to manage such dynamic UI changes.

rraghvani's avatar
rraghvani
Icon for Champion Level 3 rankChampion Level 3
1 month ago

Here's an example - go to the following website https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test and paste in the following code on the left hand side, and click 'Run >'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        .uob-fields, .non-uob-fields {
            display: none;
        }
    </style>
</head>
<body>
    <h2>User Account: rraghvani</h2>
    <label for="uobSelect">Is UOB: </label>
    <select id="uobSelect" onchange="toggleFields()">
        <option value="no" selected>No</option>
        <option value="yes">Yes</option>
    </select>

    <!-- UOB Fields (hidden by default) -->
    <div class="uob-fields" id="uobFields">
        <h3>UOB Sample Data</h3>
        <label for="uobAccountNumber">UOB Account Number:</label>
        <input type="text" id="uobAccountNumber" value="1234567890" readonly><br><br>
        <label for="uobBalance">UOB Account Balance:</label>
        <input type="text" id="uobBalance" value="$10,000" readonly><br><br>
        <label for="uobBranch">UOB Branch:</label>
        <input type="text" id="uobBranch" value="UOB Singapore Main Branch" readonly><br><br>
    </div>

    <!-- Non-UOB Fields (hidden by default) -->
    <div class="non-uob-fields" id="nonUobFields">
        <h3>Non-UOB Sample Data</h3>
        <label for="nonUobAccountNumber">Account Number:</label>
        <input type="text" id="nonUobAccountNumber" value="9876543210" readonly><br><br>
        <label for="nonUobBalance">Account Balance:</label>
        <input type="text" id="nonUobBalance" value="£5,000" readonly><br><br>
        <label for="nonUobBranch">Bank Branch:</label>
        <input type="text" id="nonUobBranch" value="NatWest" readonly><br><br>
    </div>

    <script>
        // Function to toggle visibility based on dropdown selection
        function toggleFields() {
            var uobSelect = document.getElementById("uobSelect").value;
            var uobFields = document.getElementById("uobFields");
            var nonUobFields = document.getElementById("nonUobFields");

            if (uobSelect === "yes") {
                uobFields.style.display = "block";
                nonUobFields.style.display = "none";
            } else {
                uobFields.style.display = "none";
                nonUobFields.style.display = "block";
            }
        }

        // Initial toggle based on default selection
        toggleFields();
    </script>
</body>
</html>

You'll get the sample website appearing on the right hand side,

Keyword Test - the conditional if-statement reads like so: If Aliases.selectIsUob.wText == "No" Then Log Aliases.textboxBankBranch.Text Else Log Aliases.textboxUobBranch.Text

It will either display "NatWest" if UOB equals "No", or it will display "UOB Singapore Main Branch" if UOB is not equal to "No".

Remove "selected" from line 17 and insert it on line 18, and click 'Run >'. Run the keyword test again.

This should give you a clear starting point.