Невозможно найти локаторы (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 обеспечивает инкапсуляцию для JavaScript, CSS и создание шаблонов в веб-компоненте.

Shadow DOM позволяет прикреплять скрытые деревья DOM к элементам в обычном дереве DOM - этот теневой DOM Дерево начинается с тени root, под которой можно прикрепить любые элементы, которые вы хотите, так же, как и обычный DOM.

См. this Чтобы получить подробную информацию о это или для более подробной информации Google это.

Теперь обрабатывать элемент 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 может не сработать автоматическое предложение результатов поиска.