How to run GeckoFx “GetElementById” funtion in C#?

Question

I've started a new project recently and it was working properly with the default Visual Studio 2015 "webBrowser". Unfortunately the default browser doesn't support some web elements that I need it to run. Therefor I decided to look for a Browser alternative that could run this elements.

After doing some research I decided to go with GeckoFx, mainly because I read that it's command functions work pretty much like the original webBrowser (commands like; GetElementById).

I'm trying to create a program that logs me in to "login.live.com" automatically. I'm not sure why but when it runs the code, the "password" value entry seams to work, but the email one does not. Please help me figure out why!

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace XLP_2_11_16__2_
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        //This is not the actual folder location. Part of it was suppstituded by "..." for safety reasons.
            Gecko.Xpcom.Initialize(@"C:\...\bin\Debug\xulrunner");
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            geckoWebBrowser1.Navigate("https://login.live.com");
        }

        private void button1_Click(object sender, EventArgs e)
        {
        //Actual email and password was substituted for safety reasons.
            string email = "myemail@email.com";
            string pass = "mypassword";

            geckoWebBrowser1.Document.GetElementById("i0116").SetAttribute("value", email);
            geckoWebBrowser1.Document.GetElementById("i0118").SetAttribute("value", pass);
            geckoWebBrowser1.Navigate("javascript:void(document.forms[0].submit())");
        }

        private void geckoWebBrowser1_Click(object sender, EventArgs e)
        {

        }

        private void geckoWebBrowser1_DocumentCompleted(object sender, Gecko.Events.GeckoDocumentCompletedEventArgs e)
        {

        }

        public void Delayed(int delay, Action action)
        {
            Timer timer = new Timer();
            timer.Interval = delay;
            timer.Tick += (s, e) => {
                action();
                timer.Stop();
            };
            timer.Start();
        }
    }
}

This is the form design:

If anyone knows of a better way to do this please let me know PLEASE HELP!!

Answer 1

I was able to replicate the behavior you witnessed. I believe it is because the input field type is "email" which triggers validation. I was able to populate the field by using the GeckoInputElement type from the Gecko.DOM module.

The following code works for me:

var emailField = new Gecko.DOM.GeckoInputElement(geckoWebBrowser1.Document.GetHtmlElementById("i0116").DomObject);
emailField.Value = @"test@test.com";

var passwordField = new Gecko.DOM.GeckoInputElement(geckoWebBrowser1.Document.GetHtmlElementById("i0118").DomObject);
passwordField.Value = @"test_password";