iframe>シャドウDOMの先にある要素の取得、操作 --メモ--

MDNのHTMLのリファレンスで
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
のselectタグにアクセスしたかったが、Seleniumでエラーが出て取得できなかった。
調べたら、取得したいタグは iframeの中にあり、さらにShadow DOMがあってその中にあった。
通常のシンプルなロケータではうまくいかなかったので、一工夫してみたら上手くいった。

           ChromeDriver driver = new ChromeDriver();

            try
            {
                driver.Manage().Window.Maximize();
                driver.Navigate().GoToUrl("https://developer.mozilla.org/ja/docs/Web/HTML/Element/select");
                var iframe = driver.FindElement(By.CssSelector(".interactive"));
                driver.SwitchTo().Frame(iframe);
                IWebElement shadow_output = driver.FindElement(By.TagName("shadow-output"));
                IWebElement shadow_root = (IWebElement)driver.ExecuteScript("return arguments[0].shadowRoot", shadow_output);
                IWebElement select_pet = shadow_root.FindElement(By.Id("pet-select"));
                var selectObject = new SelectElement(select_pet);
                selectObject.SelectByIndex(2);
            }
            finally
            {
                Console.ReadKey();
                driver.Quit();
            }