Not able to click on an option of a table

Question

I am trying to automate a task that uses a third party website. In this website, we have to select an option from a list of items.

It is a text area, that when it is clicked, JS creates a table with options to take. I have been able to click on the text area to show this list and can correctly identify the items in the list. The problem is that when I click on the items, nothing is happening.

The table looks like this:

<div class="MenuTableContainer">
    <table class="MenuTable" style="width: 175px;" cellSpacing="0" cellPadding="0">
        <tbody class="MenuTableBody">
            <tr class="MenuTableRow">
                <td class="MenuEntryName" noWrap="">1-Extensive/Widespread</td>
                <td class="MenuEntryNoSub" ARValue="1-Extensive/Widespread"></td>
            </tr>
            <tr class="MenuTableRow">
                <td class="MenuEntryName" noWrap="">2-Significant/Large</td>
                <td class="MenuEntryNoSub" ARValue="2-Significant/Large"></td>
            </tr>
            <tr class="MenuTableRow">
                <td class="MenuEntryName" noWrap="">(clear)</td>
                <td class="MenuEntryNoSub" ARValue=""></td></tr>
        </tbody>
    </table>
</div>

The input field that I am trying to fill out looks like this without any values:

<div class="df arfid1000000163 ardbnImpact EnumSel" id="WIN_2_1000000163" style="left: 10px; top: 82px; width: 292px; height: 21px; z-index: 990;" ardbn="Impact" artype="EnumSel" arid="1000000163" arlbox="0,4,112,17" arwindowid="2">
    <label class="label f9" id="label1000000163" style="left: 0px; top: 4px; width: 112px; height: 17px;" for="x-arid_WIN_2_1000000163">
        Impact*
    </label>
    <div class="selection" style="left: 117px; top: 0px; width: 175px; height: 21px;" arselmenu='[{ci:1000,v:"1-Extensive/Widespread"},{ci:2000,v:"2-Significant/Large"},{ci:3000,v:"3-Moderate/Limited"},{ci:4000,v:"4-Minor/Localized"}]'>
        <input title="" class="text " id="arid_WIN_2_1000000163" style="left: 0px; top: 0px; width: 154px; height: 21px;" type="text" readOnly="">
        <a class="btn btn3d selectionbtn" style="left: 154px; top: 0px; width: 21px; height: 21px;" href="javascript:">
            <img class="btnimg" alt="" src="../../../../resources/images/mt_sprites.gif">
        </a>
    </div>
</div>

And like this once a value has been selected:

<div class="df arfid1000000163 ardbnImpact EnumSel" id="WIN_2_1000000163" style="left: 10px; top: 82px; width: 292px; height: 21px; z-index: 990;" ardbn="Impact" artype="EnumSel" arid="1000000163" arlbox="0,4,112,17" arwindowid="2">
    <label class="label f9" id="label1000000163" style="left: 0px; top: 4px; width: 112px; height: 17px;" for="x-arid_WIN_2_1000000163">
        Impact*
    </label>
    <div class="selection" style="left: 117px; top: 0px; width: 175px; height: 21px;" arselmenu='[{ci:1000,v:"1-Extensive/Widespread"},{ci:2000,v:"2-Significant/Large"},{ci:3000,v:"3-Moderate/Limited"},{ci:4000,v:"4-Minor/Localized"}]'>
        <input title="2-Significant/Large" class="text " id="arid_WIN_2_1000000163" style="left: 0px; top: 0px; width: 154px; height: 21px;" type="text" readOnly="">
        <a class="btn btn3d selectionbtn" style="left: 154px; top: 0px; width: 21px; height: 21px;" href="javascript:">
            <img class="btnimg" alt="" src="../../../../resources/images/mt_sprites.gif">
        </a>
    </div>
</div>

The only difference is the value of the title attribute in the input tag.

I tried setting the attribute (and reading it afterwards to confirm), but once the save button was clicked, it failed because the field was empty:

        sImpactString="2-Significant/Large";
        oImpactField.setAttribute("title", sImpactString);
        string attr = oImpactField.getAttribute("title");

I also tried clicking on the TR and TD tags without success. I do not see any reference to a JS function in the HTML, so I am a little lost in terms of what I am missing here.

I am using SHDocVw.InternetExplorer and IHtmlElement/IHtmlElementCollection.

This is how I am getting to the TD and TR tags:

 IHTMLDocument3 document = driver.Document as IHTMLDocument3;
    IHTMLElement oTableBody = null;
    bool settingsShown = false;
    do
    {
        IHTMLElementCollection tBodys = document.getElementsByTagName("tbody");
        foreach (IHTMLElement elem in tBodys)
        {
            if (string.Compare(elem.className, "MenuTableBody") == 0)
            {
                settingsShown = true;
                oTableBody = elem;
                break;
            }
        }
    } while (!settingsShown);

    int childrenPos = (int)impactRating;
    // Get the TR
    IHTMLElement oCorrectValue = oTableBody.children[0] as IHTMLElement;
    // Get the first TD
    IHTMLElement oColumn = oCorrectValue.children[0] as IHTMLElement
    //Clicking does nothing on the TR
    oCorrectValue.click()
    //Nor in the TD
    oColumn.click()

After looking into the JS I have encountered these two functions. The first one handles the mouse events, and the second ones tries to click on an item

MenuElement.prototype.HandleMouseEvent = function (d, h) {
    var g = h.element;
    var f = g.className;
    if (f == null) {
        return
    }
    if (d == 1) {
        if (g.tagName != "TD" || f.indexOf("MenuEntry") == -1) {
            return
        }
        this.EndScroll();
        g = g.parentNode.firstChild;
        this.HighlightElement(g);
        this.CheckOpenSubMenu()
    }
    else {
        if (d == 0) {
            if (f.indexOf("MenuEntry") != -1) {
                OpenedMenu.CheckClick()
            }

        }
        else {
            if (d == 2) {
                if (g.tagName != "DIV" && (f != "MenuScrollDown" || f != "MenuScrollUp")) {
                    return
                }
                var b = (f == "MenuScrollUp") ? 1 : -1;
                OpenedMenu.EnsureTopElement(this.mSerial);
                this.Scroll(b)
            }
            else {
                if (d == 3) {
                    if (g.tagName != "DIV" && (f != "MenuScrollDown" || f != "MenuScrollUp")) {
                        return
                    }
                    OpenedMenu.EnsureTopElement(this.mSerial);
                    this.EndScroll()
                }
                else {

                }

            }

        }

    }
    return
}

TableContextMenu.prototype.CheckClick = function () {
    var d = this.mElementStack;
    this.mCtrlFldId = null;
    var b = d[d.length - 1].mHighlightedElement;
    if (b != null && b.nextSibling != null) {
        this.mCtrlFldId = b.nextSibling.getAttribute("arbtnid")
    }
    TableContextMenu.superclass.CheckClick.call(this)
}

It is now clear to me that I need to interact with the TDs in the table. However, I am not sure if I need to highlight an element first. To highlight them, I just move my mouse over it. Is there a way to recreate this? And then I would just need to click on the TD?

I have tried the following code on the MenuEntryName (since that is the one that is highlighted anyway), and it is not highlighting it.

        IHTMLElement entryName = desiredRow.children[0] as IHTMLElement;
        entryName.onclick = entryName.onmouseover;
        entryName.click();

Once it is highlighted, the TD's class change to "MenuEntryNameHover" and "MenuEntryNoSubHover" respectively. Which is not happening.

Answer 1

I ended up not worrying about the JS and just sending keys to the window like this:

[System.Runtime.InteropServices.DllImport("user32.dll")]
static extern bool SetForegroundWindow(IntPtr hWnd);

public void MyMethod(InternetExplorer driver)
{
        //.....
        while (currentPos++ <= nPosition)
        {
            SetForegroundWindow((IntPtr)driver.HWND);
            System.Windows.Forms.SendKeys.SendWait(Down_Key);
            Task.Delay(100).Wait();
        }
        SetForegroundWindow((IntPtr)driver.HWND);
        System.Windows.Forms.SendKeys.SendWait(Enter_Key);
        SetForegroundWindow((IntPtr)driver.HWND);
        System.Windows.Forms.SendKeys.Flush();
}