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

Question

I am trying to automate application,tried first to find xpath or CSS locators unable to find looks no frame also inside the element.

I am able to handle using JavaScript but unable to enter full text in the search box,it's trimming some text,,please help me.

JavaScript which i tried.

((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();");

My scenario i want to click search form and enter some destination details,If possible anyway i can handle this case using locators suggest me

Answer 1

Shadow DOM Elements are used in this website. Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.

Refer this To get details about it or for more details Google it.

Now handle Shadow element take reference from this blog . I've tried the below code to enter text as you expected and its working for me.

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;
}

Updated

As an alternative of sendKeys() , JavascriptExecutor can be used to set the value of text box. Use below code

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

I've tested this so many time and this is working fine in each case.

Note: using JavascriptExecutor may not trigger the search result auto suggestion.