Watin. how to show invinsible class

Question

HTML code:

<div class="col-sm-9">
<input name="NewCardOrAccountNumber" class="form-control ui-autocomplete-input" id="NewCardOrAccountNumber" type="text" value="" autocomplete="off">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
</div>
<div class="unvisible" id="clientInfoNew">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">FIRST NAME</label>
                            <div class="col-sm-9" id="FnameNew"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">LAST NAME</label>
                            <div class="col-sm-9" id="LnameNew"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">BIRTH DATE</label>
                            <div class="col-sm-9" id="BirthDateNew"></div>
                        </div>

Watin code:

[TestMethod]
    [TestCategory("Rimi Change card page")]

    public void Rimi_4444_Change_Card_and_Assert()
    {

        //Web Address
        using (IE ie = new IE(this.Rimi))
        {
            //IE ie = new IE(RimiChangeCard);
            ie.BringToFront();
            ie.ShowWindow(WatiN.Core.Native.Windows.NativeMethods.WindowShowStyle.Maximize);
            ie.TextField(Find.ById("NewCardOrAccountNumber")).TypeText("9440385200600000020");

If I write card number from keyboard, the invisible class appear, and you can see FIRST NAME, LAST NAME and so on. But if I do this with watin, it does not appear, and you only see card number which you input. Its like hidden fields of information. I do not know how to make that I could see this fields when I input card number.

Answer 1

There would be a JavaScript function, which gets executed when you manually enter the data in the text field.Go through the Java Script functions on the same page which refer to that element using it's ID NewCardOrAccountNumber.

Refer to this link for sample application. Where msg_to is element, and has a KeyUp event associated. When that filed gets a , value, there is a div section inside which a `Subject' field is shown.

Similarly, after executing the TypeText, try to trigger related event mentioned in the Java Script event using Java script execution.

EDIT: I see that the javascript functions gets executed after bulr event is fired. This means the textbox field should loose the focus. Try the below options.

// 1.  Try focusing out of control.
ie.TextField(Find.ById("NewCardOrAccountNumber")).TypeText("9440385200600000020");
ie.TextField(Find.ById("OldCardOrAccountNumber")).Click();
ie.WaitForComplete();

// 2. Try Using Send Keys method to tab out.
ie.TextField(Find.ById("NewCardOrAccountNumber")).TypeText("9440385200600000020");
System.Windows.Forms.SendKeys.SnedWait("{TAB}"); // Need to add System.Windows.Forms reference to the project.

Answer 2

I put image on the internet, so click on this link Image and you will see on first image how look page, second picture - what have to happen when you input card number (from keyboard), third - what happen when card namuber is input from watin (does not appear information about card).

HTML code:

<div class="ibox-content">
        <br>
        <div class="form-horizontal">
            <div class="row">
                <div class="col-md-5">

                    <div class="form-group">
                        <label class="col-sm-3 control-label">NEW CARD</label>
                        <input name="NewCardId" id="NewCardId" type="hidden" value="0" data-val-required="The NewCardId field is required." data-val-number="The field NewCardId must be a number." data-val="true">
                        <div class="col-sm-9"><span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span><input name="NewCardOrAccountNumber" class="form-control ui-autocomplete-input" id="NewCardOrAccountNumber" type="text" value="" autocomplete="off"></div>
                    </div>

                    <div class="unvisible" id="clientInfoNew">

                        <div class="form-group">
                            <label class="col-sm-3 control-label">FIRST NAME</label>

I maybe find what you looking for Sham, but I do not know how to use it :

<script type="text/javascript">

    $(document).ready(function() {

        var NewCardId = "#NewCardId";
        var OldCardId = "#OldCardId";
        var NewCardNumber = "#NewCardOrAccountNumber";
        var OldCardNumber = "#OldCardOrAccountNumber";



        $(NewCardNumber).autocomplete(
        {
            source: function(request, response) {

                $.ajax({
                    url: '/LoyaltyWebApplication/Suggestion/GetCardSuggestions',
                    dataType: "json",
                    data: {
                        str: $(NewCardNumber).val()
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            var label = "";
                            if (item.Fname != null) label += item.Fname;
                            if (item.Lname != null) label += " " + item.Lname;
                            if (label.trim() != '') label = " (" + label.trim() + ")";
                            return {
                                value: item.CardNumber,
                                label: item.CardNumber + label
                            }
                        }));
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            },
            select: function(event, ui) {
                getCardDetails($(NewCardNumber), $(NewCardId), 'newCardSegments', true);
                $("#newCardSegments").hide();
                $("#clientInfoNew").show();
            },
            minLength: 2
        }).blur(function() {
            getCardDetails($(NewCardNumber), $(NewCardId), 'newCardSegments', true);
        });

        $(OldCardNumber).autocomplete(
        {
            source: function(request, response) {
                $.ajax({
                    url: '/LoyaltyWebApplication/Suggestion/GetCardSuggestions',
                    dataType: "json",
                    data: {
                        str: $(OldCardNumber).val()
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            var label = "";
                            if (item.Fname != null) label += item.Fname;
                            if (item.Lname != null) label += " " + item.Lname;
                            if (label.trim() != '') label = " (" + label.trim() + ")";
                            return {
                                value: item.CardNumber,
                                label: item.CardNumber + label
                            }
                        }));
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            },
            select: function(event, ui) {
                getCardDetails($(OldCardNumber), $(OldCardId), 'oldCardSegments', false);
                $("#oldCardSegments").hide();
            },
            minLength: 2
        }).blur(function() {
            getCardDetails($(OldCardNumber), $(OldCardId), 'oldCardSegments', false);
        });

        function getCardDetails(cardNumHolder, cardIdHolder, segmentTablePlace, isNew) {
            $.getJSON('/LoyaltyWebApplication/LOV/SetId?lovType=ReplacementLOV&lovValue=' + cardNumHolder.val(), null,
                function(data) {
                    $("#clientInfo" + ((isNew) ? "New" : "Old")).show();
                    if (cardNumHolder.val() == '') {
                        return;
                    }
                    var i;
                    for (i = 0; i < data.otherNames.length; i++) {
                        $("#" + data.otherValues[i] + (isNew ? "New" : "Old")).text(data.otherNames[i]);
                    }
                    cardIdHolder.val(data.Id);
                    $.getJSON('/LoyaltyWebApplication/Replacement/ClientSegmentsList?clientId=' + data.Id + "&no_cache=" + Math.random, function(data) {
                        $("#" + segmentTablePlace).find('tbody').empty();
                        if (data.length > 0) {
                            $.each(data, function(index) {
                                $("#" + segmentTablePlace).find('tbody').append("<tr><td>" + data[index].SegmentCode + "</td><td>" + data[index].SegmentName + "</td></tr>");
                            });
                            $("#" + segmentTablePlace).show();
                        }
                    });
                });
        }

        $("#resetVal").click(function() {

            $("#NewCardOrAccountNumber").attr("value", "");
            $("#NewCardOrAccountNumber").val("");

            $("#NewCardId").attr("value", "");
            $("#NewCardId").val("");

            $("#clientInfoNew").hide();

            $("#OldCardOrAccountNumber").attr("value", "");
            $("#OldCardOrAccountNumber").val("");

            $("#OldCardId").attr("value", "");
            $("#OldCardId").val("");

            $("#clientInfoOld").hide();

            return false;

        });

    });
</script>