Элемент CSS скрывает элемент Xpath

Question

Временный элемент CSS скрывает элемент xpath, на котором я хочу щелкнуть.

Использование Selenium в Visual Studio Я пишу тестовый сценарий, в котором нужно щелкнуть элемент.Но когда я запускаю этот тестовый пример, я получаю сообщение об ошибке, в котором говорится:

OpenQA.Selenium.ElementClickInterceptedException Element <a href="#/app/customer/handling/devices"> is not clickable at point (105,221) because another element <div class="showbox layout-align-center-center layout-row ng-star-inserted"> obscures it

Затеняющий элемент выглядит как элемент CSS.Но когда я захожу на эту страницу вручную, проверяю код и ищу этот элемент css <div class="showbox layout-align-center-center layout-row ng-star-inserted"> Я не получаю результатов.

Поэтому я предполагаю, что этот элемент CSS является временным и может быть идентифицирован только для парысекунд, пока страница загружается.Это предположение подтверждается тем фактом, что если я добавлю метод статического ожидания Task.Delay(4000).Wait(); в этот тестовый сценарий, я смогу завершить этот тестовый сценарий.

Но меня не интересует решение, в котором я использую статическое ожиданиеметод в моем коде.Я хочу дождаться исчезновения временного css, чтобы я мог щелкнуть по желаемому элементу xpath.

Это мой код:

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));

wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));
//Waiting for temporary CSS element to be visible
            wait.Until(ExpectedConditions.InvisibilityOfElementLocated(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));
//Waiting for temporary CSS element to disappear

wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div/div[2]/nav[2]/div/ul/li[1]/a"))).Click();
//Click on "Handle Tools" link

Как вы можете прочитать в комментарияхв моем коде я делаю три вещи здесь:

1. I wait for the temporary CSS to be loaded
2. I wait for it to disappear
3. I click on the xpath element.

Когда я делаю это, я получаю сообщение об ошибке, сообщающее, что селектор CSS, который я пытаюсь найти, недействителен.

Если я пропускаюПервый шаг и просто подождите, пока CSS исчезнет / станет «невидимым», он проверит это слишком быстро и посмотрит, прежде чем элемент CSS начал загружаться.

Так что либо я неправильно пишу формат By.CssSelector,Или элемент CSS называется как-то иначе, чем Visual Studio вызывает его в сообщении об ошибке, которое я цитировал выше.

Поэтому, пожалуйста, скажите мне, если я использую неправильный способ идентификации этого элемента CSS здесь:

wait.Until(ExpectedConditions.InvisibilityOfElementLocated(By.CssSelector("div class='showbox layout-align-center-center layout-row ng-star-inserted'")));

ИЛИ

Есть ли другой способ динамического ожидания временных элементов CSS?

ИЛИ

Можно ли как-то подтвердить, что имя скрывающего элемента CSSна самом деле называется "div class = 'showbox layout-align-center-center layout-row ng-star-вставлен'"?

Answer 1

Проблема в этом случае заключалась в том, что мой селектор CSS действительно был недействительным. В начале удалите "div class =" и добавьте "." решил проблему.

До:

"div class='showbox layout-align-center-center layout-row ng-star-inserted'"

После того, как:

".showbox.layout-align-center-center.layout-row.ng-star-inserted"

Спасибо Asyranok за предоставленный мне правильный формат для моего селектора CSS. В этом случае мне не нужен остальной ваш код, вместо этого я просто скопировал правильный код CSS из вашего кода в свое решение, и это сработало. :)

Я обычно использую xpath только при попытке идентифицировать элемент, так что я не привык к CSS и какому формату использовать.

Также спасибо Джеффу за подтверждение моего подозрения, что мне нужно дождаться первой загрузки затемняющего элемента и , а затем снова подождать, пока он исчезнет.

Answer 2

Так что я не уверен на 100%, что вы подразумеваете под элементом CSS. Но я думаю, что это просто неправильное название, которое вы, возможно, подобрали. Но CSS это каскадные таблицы стилей. Именно разметка определяет внешний вид элемента объектной модели документа (DOM).

XPath - это подход к определению местоположения элемента для драйвера, чтобы найти его и взаимодействовать с ним. Селекторы Css - это альтернативный подход к поиску элементов в XML или HTML DOM. Таким образом, не существует такого понятия, как «элемент Css» или «элемент XPath». Они просто "элементы".

Что касается решения проблемы, которую вы видите, вы можете попробовать это:

    //This is called an extension method. It adds methods to an existing class. This should go in a static class that is accessible to your driver.
    private static void WaitUntil(this IWebDriver driver, Func<bool> Condition, float timeout)
    {

        float timer = timeout;
        while (!Condition.Invoke() && timer > 0f)
        {

            System.Threading.Thread.Sleep(500);
            timer -= 0.5f;

        }
        System.Threading.Thread.Sleep(500);

    }

driver.WaitUntil(() => driver.FindElementsBy(By.CssSelector(".showbox.layout-align-center-center.layout-row.ng-star-inserted").length == 0);

Также отметим, что ваши CSS-селекторы в вашем описании абсолютно недействительны. Я предлагаю прочитать их в учебнике, подобном этому .