Java 在网页中找不到定位器（Xpath、Css）

我正在尝试自动化应用程序，首先尝试查找xpath或CSS定位器，但在元素内部找不到任何框架

我可以使用JavaScript处理，但无法在搜索框中输入全文，它正在修剪一些文本，请帮助我

我试过的JavaScript

((JavascriptExecutor)driver).executeScript("return document.querySelector('#app').shadowRoot.querySelector('#base > wego-search-form').shadowRoot.querySelector('div > wego-hotel-search-form').shadowRoot.querySelector('#loc').shadowRoot.querySelector('#item0 > div.disable-select.city-country-name').click();");

((JavascriptExecutor)driver).executeScript("return document.querySelector('#app').shadowRoot.querySelector('#base > wego-search-form').shadowRoot.querySelector('div > wego-hotel-search-form').shadowRoot.querySelector('#dates').shadowRoot.querySelector('#depart').shadowRoot.querySelector('#btn').click();");

---

我的场景我想单击搜索表单并输入一些目的地详细信息，如果可能的话，我可以使用定位器处理此情况。建议我在此网站中使用阴影DOM元素。ShadowDOM为Web组件中的JavaScript、CSS和模板提供封装

阴影DOM允许将隐藏的DOM树附加到 常规DOM树-此阴影DOM树以阴影根开始， 下面可以附着到任何您想要的元素，在同一个 就像普通的DOM一样

有关详细信息，请参阅获取详细信息或使用谷歌搜索

现在处理阴影元素从中获取引用。我已经尝试了下面的代码来输入您期望的文本，它对我很有用

public static WebDriver driver;

public static void main(String[] args){

    System.setProperty("webdriver.chrome.driver", "driver_path");
    driver = new ChromeDriver();
    driver.get("https://www.wego.com.my/hotels");
    driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
    driver.manage().window().maximize();

    WebElement root1 = driver.findElement(By.id("app"));

    WebElement shadowRoot1 = expandRootElement(root1);

    WebElement root2 = shadowRoot1.findElement(By.tagName("wego-search-form"));
    WebElement shadowRoot2 = expandRootElement(root2);

    WebElement root3 = shadowRoot2.findElement(By.tagName("wego-hotel-search-form"));
    WebElement shadowRoot3 = expandRootElement(root3);

    WebElement root4 = shadowRoot3.findElement(By.id("loc"));
    WebElement shadowRoot4 = expandRootElement(root4);
    shadowRoot4.findElement(By.cssSelector("div.root-container div.container")).click();    

    WebElement element = shadowRoot4.findElement(By.id("searchKeywordInput"));
    Actions action = new Actions(driver);
    action.click(element).sendKeys(Keys.chord(Keys.CONTROL, "a"));
    element.sendKeys(Keys.DELETE);
    element.sendKeys("narendra");
}


public static WebElement expandRootElement(WebElement element) {
    WebElement newElement = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", element);
    return newElement;
}

已更新

作为

sendKeys（）

的替代方法，

JavascriptExecutor

可用于设置文本框的值。使用下面的代码

WebElement element = shadowRoot4.findElement(By.id("searchKeywordInput"));
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript("arguments[0].value='Your Text Goes Here';", element);

我已经测试过很多次了，在每种情况下都可以正常工作

---

注意：使用

JavascriptExecutor

可能不会触发搜索结果自动建议。

此网站中使用了阴影DOM元素。ShadowDOM为Web组件中的JavaScript、CSS和模板提供封装

阴影DOM允许将隐藏的DOM树附加到 常规DOM树-此阴影DOM树以阴影根开始， 下面可以附着到任何您想要的元素，在同一个 就像普通的DOM一样

有关详细信息，请参阅获取详细信息或使用谷歌搜索

现在处理阴影元素从中获取引用。我已经尝试了下面的代码来输入您期望的文本，它对我很有用

public static WebDriver driver;

public static void main(String[] args){

    System.setProperty("webdriver.chrome.driver", "driver_path");
    driver = new ChromeDriver();
    driver.get("https://www.wego.com.my/hotels");
    driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
    driver.manage().window().maximize();

    WebElement root1 = driver.findElement(By.id("app"));

    WebElement shadowRoot1 = expandRootElement(root1);

    WebElement root2 = shadowRoot1.findElement(By.tagName("wego-search-form"));
    WebElement shadowRoot2 = expandRootElement(root2);

    WebElement root3 = shadowRoot2.findElement(By.tagName("wego-hotel-search-form"));
    WebElement shadowRoot3 = expandRootElement(root3);

    WebElement root4 = shadowRoot3.findElement(By.id("loc"));
    WebElement shadowRoot4 = expandRootElement(root4);
    shadowRoot4.findElement(By.cssSelector("div.root-container div.container")).click();    

    WebElement element = shadowRoot4.findElement(By.id("searchKeywordInput"));
    Actions action = new Actions(driver);
    action.click(element).sendKeys(Keys.chord(Keys.CONTROL, "a"));
    element.sendKeys(Keys.DELETE);
    element.sendKeys("narendra");
}


public static WebElement expandRootElement(WebElement element) {
    WebElement newElement = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", element);
    return newElement;
}

已更新

作为

sendKeys（）

的替代方法，

JavascriptExecutor

可用于设置文本框的值。使用下面的代码

WebElement element = shadowRoot4.findElement(By.id("searchKeywordInput"));
JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript("arguments[0].value='Your Text Goes Here';", element);

我已经测试过很多次了，在每种情况下都可以正常工作

---

注意：使用

JavascriptExecutor

可能不会触发搜索结果自动建议。

感谢Narendra的回复，现在我可以找到元素了，但还是遇到了我的第一个问题，我无法在搜索框中输入全文，在输入时会进行修剪text@SinuReddy，更新了答案。请检查并让我知道是否仍然有问题。感谢Narendra的回复，现在我可以找到元素，但仍然来到我的第一个问题，我无法在搜索框中输入全文，输入时正在修剪text@SinuReddy，更新了答案。如果仍然有问题，请检查并让我知道。