無法在網頁中找到定位器(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可能不會觸發搜索結果自動建議。