无法在网页中找到定位器(Xpath,Css)

Question

我正在尝试自动化应用程序，首先尝试找到 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();");

我的场景我想单击搜索表单并输入一些目的地详细信息，如果可能的话，我可以使用定位器建议我处理这种情况

Answer 1

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

Shadow DOM 允许隐藏的 DOM 树附加到常规 DOM 树中的元素——这个 shadow DOM 树从一个影子根开始，在它下面可以附加到任何你想要的元素，就像普通 DOM 一样。

请参阅此以获取有关它的详细信息或更多详细信息谷歌它。

现在处理 Shadow 元素，参考这篇博客。 我已尝试使用以下代码按您的预期输入文本，并且对我有用。

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可能不会触发搜索结果自动建议。