If possible, how can I use selenium to identify elements that reside in nested frames?

Question

So in helping another user troubleshoot a Selenium/selector issue, I believe I ran in to a larger issue for which I'm wondering if there is any solution.

Basically, I have come upon (i)frame hell. Sorry to include a screenshot of the dev console, but I couldn't find a good way to copy it over.

So, as you can see if you will kindly click the above image, the HTML for this page features frames inside framesets inside frames inside....

I was able to identify the first level of frames, but of course the element we wanted to locate was in the middle of all these frames.

What I found is that using xpath, cssSelector, ID, Name, any type of locator, I could never find any element past and including anything nested beneath a #document element. I've read on quite a few sites that this is either very difficult or impossible to do, but I never came across a solution that would work for this page.

Is this possible, and if so how can one get past these #document elements?

P.S. let me know if there is an easy way to copy the actual text as pictured from the console and I will do so for the whole page.

This is not a duplicate of that question because this is regarding multiple nested Frames with #document elements that Selenium apparently cannot get past. All examples provided only have one (i)Frame. I know how to switch to iFrame, but it seems is impossible to switch to an element or frame inside nested Frames that contain #document using Selenium alone; jQuery is a solution to this problem so I accepted the below answer.

I really don't care if it erroneously gets closed as a duplicate since I have gotten a solution but I am 100% certain it is a separate issue from simply switching to an iFrame.

Answer 1

So this is ultimately the perfect use case for an extension I made. Here is the most important part of it:

  /// <summary>
        /// Selenium sometimes has trouble finding elements on the page. Give it some help by using JQuery to grab the full qualified xpath to that element.
        /// </summary>
        /// <param name="cssSelector"></param>
        /// <returns></returns>
        public static string GetFullyQualifiedXPathToElement(string cssSelector, bool isFullJQuery = false, bool noWarn = false)
        {

            if (cssSelector.Contains("$(") && !isFullJQuery) {

                isFullJQuery = true;

            }
            string finder_method = @"
                        function getPathTo(element) {
                            if(typeof element == 'undefined') return '';
                            if (element.tagName == 'HTML')
                                return '/HTML[1]';
                            if (element===document.body)
                                return '/HTML[1]/BODY[1]';

                            var ix= 0;
                            var siblings = element.parentNode.childNodes;
                            for (var i= 0; i< siblings.length; i++) {
                                var sibling= siblings[i];
                                if (sibling===element)
                                    return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
                                if (sibling.nodeType===1 && sibling.tagName===element.tagName)
                                    ix++;
                            }
                        }
            ";
            if(isFullJQuery) {

                cssSelector = cssSelector.TrimEnd(';');

            }
            string executable = isFullJQuery ? string.Format("{0} return getPathTo({1}[0]);", finder_method, cssSelector) : string.Format("{0} return getPathTo($('{1}')[0]);", finder_method, cssSelector.Replace("'", "\""));
            string xpath = string.Empty;
            try {

                xpath = BaseTest.Driver.ExecuteJavaScript<string>(executable);

            } catch (Exception e) {

                if (!noWarn)  {

                    Check.Warn(string.Format("Exception occurred while building a dynamic Xpath. Css selector supplied to locate element is \"{0}\". Exception [{1}].", cssSelector, e.Message));

                }

            }
            if (!noWarn && string.IsNullOrEmpty(xpath)) {

                Check.Warn(string.Format("Supplied cssSelector did not point to an element. Selector is \"{0}\".", cssSelector));

            }
            return xpath;

        }

With this logic, you can pass a Jquery selector into your browser via javascript executor. JQuery has no problems finding elements nested within iframes. Try something like this:

driver.FindElement(By.XPath(GetFullyQualifiedXPathToElement("#MyDeeplyNestedElement")).Click();

https://gist.github.com/tsibiski/04410e9646ee9ced9f3794266d6c5a82

Feel free to remove whatever is in that method/class that does not apply to your situation.

Why/How does this suddenly make an element findable to Selenium????

You may have noticed that if you tell selenium to find an iframe html element, and then explicitly search within the WebElement of the iframe, that you can find child elements under it. However, without first finding each child iframe, Selenium does not seem to look inside the iframes without you explicitly helping it through the DOM.

JQuery does not have this limitation. It sees every registered DOM element just fine, and will grab it normally. Once you have the element as a JQuery object, you can build out a path of tags, parent by parent, all the way up the DOM. When the logic is complete, you will have a fully-qualified XPath from the top of the DOM down to the nested child element. Then, once this explicit XPath is supplied to Selenium, you are holding its hand down the rabbit hole through one or more iframes until it runs into the object you want.