Search code examples
angularjsspecflowwatin

Angular model is not updated by watin


I am using watin and specflow to automate the browser testing for my angular application. I have ran into a problem with TextField.TypeText("some string") function which does not update the angular model value.

The sample code is as follows:

    public void updateTextField(string value)
    {
        GetTextField.TypeText(value);

        UpdateButton.Click();
    }

    public TextField GetTextField
    {
        get { return TextField(Find.ById(_textFieldId)); }
    }

    public Button UpdateButton
    {
        get { return Button(Find.ById(_updateButtonId)); }
    }

I can see the text being typed in the browser however the angular model does not get updated and the value typed in the text field is ignored.

I have already tried adding

GetTextField.Change();
GetTextField.TriggerEvent("onchange");

To try and force the input field to be marked changed. I had similar issue with the select dropdown as well. However radio buttons seems to work fine.

Any help will be much appreciated. Thanks.


Solution

  • I found out that TextField::TypeText() function does not trigger the change event on the element, hence the angular modal is not updated. I wrote an extension to the TextField method that will do the job.

        /// <summary>
        /// Type text and trigger change in the input field
        /// </summary>
        /// <param name="textField"></param>
        /// <param name="text"></param>
        public static void SendKeys(this TextField textField, string text)
        {
            textField.TypeText(text);
            TriggerChange(textField); 
        }
    
        /// <summary>
        /// Trigger change on the input element
        /// </summary>
        /// <param name="element">Element to trigger change on</param>
        private static void TriggerChange(Element element)
        {
            string script = String.Format(
                "$('[name={1}]').change()", 
                element.Name
            );
    
            element.DomContainer.RunScript(script);
        }
    

    And i am using it as follows:

    public void updateTextField(string value)
    {
        GetTextField.SendKeys(value);
    
        UpdateButton.Click();
    }