当输入字段上方有 Shadow-Root 层时，如何正确抓取 VISA 货币页面？

Question

我一直在尝试自动填充VISA货币计算器页面来计算汇率。不幸的是，我无法访问这些字段，因为它们上面似乎有一个 Shadow-Root 层。

我被困住了。谁能帮我这个？我正在使用 C#，并且已经尝试过 Selenium 和 PuppeteerSharp。我在其他网站上没有遇到任何问题。

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Threading;

class Program
{
    static void Main(string[] args)
    {
        ChromeOptions options = new ChromeOptions();
        options.AddArgument("--disable-infobars");
        options.AddArgument("--disable-extensions");
        options.AddArgument("--disable-gpu");
        options.AddArgument("--no-sandbox");
        options.AddArgument("--disable-dev-shm-usage");
        options.AddArgument("--start-maximized");

        using (var driver = new ChromeDriver(options))
        {
   
            driver.Navigate().GoToUrl("https://www.visa.co.uk/support/consumer/travel-support/exchange-rate-calculator.html");

          
            string shadowRootId = (string)((IJavaScriptExecutor)driver).ExecuteScript("return document.querySelector('dm-calculator').shadowRoot.querySelector('*').id");

            // ID des Shadow-Root-Elements ausgeben (optional)
            Console.WriteLine($"Shadow Root ID: {shadowRootId}");

            // Eingabe des Transaktionswertes
 

            // Eingabe der Währung für "From"
           

            // Eingabe der Währung für "To"
            List<string> targetCurrencies = new List<string>
            {
                "AFN", "ALL", "DZD", "AOA", "ARS", "AMD", "AWG", "AUD", "AZN", "BSD",
                "BHD", "BDT", "BBD", "BYN", "BZD", "BMD", "BTN", "BOB", "BAM", "BWP",
                "BRL", "BND", "BGN", "BIF", "KHR", "CAD", "CVE", "KYD", "XOF", "XAF",
                "XPF", "CLP", "CNY", "COP", "KMF", "CDF", "CRC", "CUP", "CZK", "DKK",
                "DJF", "DOP", "XCD", "EGP", "SVC", "ETB", "EUR", "FKP", "FJD", "GMD",
                "GEL", "GHS", "GIP", "GBP", "GTQ", "GNF", "GYD", "HTG", "HNL", "HKD",
                "HUF", "ISK", "INR", "IDR", "IQD", "ILS", "JMD", "JPY", "JOD", "KZT",
                "KES", "KWD", "KGS", "LAK", "LBP", "LSL", "LRD", "LYD", "MOP", "MKD",
                "MGA", "MWK", "MYR", "MVR", "MRU", "MUR", "MXN", "MDL", "MNT", "MAD",
                "MZN", "MMK", "NAD", "NPR", "ANG", "NZD", "NIO", "NGN", "NOK", "OMR",
                "PKR", "PAB", "PGK", "PYG", "PEN", "PHP", "PLN", "QAR", "RON", "RUB",
                "RWF", "SHP", "WST", "STN", "SAR", "RSD", "SCR", "SLE", "SGD", "SBD",
                "SOS", "ZAR", "KRW", "SSP", "LKR", "SDG", "SRD", "SZL", "SEK", "CHF",
                "TWD", "TJS", "TZS", "THB", "TOP", "TTD", "TND", "TRY", "TMT", "UGX",
                "UAH", "AED", "USD", "UYU", "UZS", "VUV", "VES", "VND", "YER", "ZMW",
                "ZWL"
            };

            foreach (string currency in targetCurrencies)
            {



            driver.Quit();
        }
    }
}

Answer 1

这是一个如何访问影子根的简单示例。

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
ISearchContext shadow_root = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector("dm-calculator"))).GetShadowRoot();
shadow_root.FindElement(By.Id("input_amount_paid")).SendKeys("1.00");

这将访问影子根并将“您支付的金额”字段设置为“1.00”。这应该足以让您开始。