Chrome 检查，无法通过我刚刚复制的 xpath 定位元素答案

【问题标题】：Chrome inspect, cant locate element by xpath I just copiedChrome 检查，无法通过我刚刚复制的 xpath 定位元素
【发布时间】：2019-03-29 22:32:51
【问题描述】：

我在页面上动态弹出一个微调器图标，指示页面正在加载，我需要检测它何时消失（这点对我来说很清楚）

每次我在 google chrome 检查中单击此微调器，然后按复制 xpath，我都会得到这个：

/html/body/vr-root/vr-route-handler/vr-layout/mat-sidenav-container/mat-sidenav-content/div/mat-sidenav-container/mat-sidenav-content/div/div/bs-campus/div/div/bs-data-grid/div/div[2]/mat-spinner/svg/circle

但是当我尝试定位这个元素时（即使在 Chrome 检查工具中按 CTR+F，它也找不到它。

有没有其他方法可以找到它？我曾尝试使用相对 xpath 搜索它，但它也失败了：

.//div/mat-spinner

编辑：添加图片

编辑 2：当我在 Chrome Inspect -> Source -> Pause script execution 中暂停页面时，我可以通过以下方式在 chrome 检查中搜索并找到 (ctr+f) 元素：

.//mat-spinner

但是当页面正在运行时（并且元素仍然可见），它无法定位。

尝试使用 webdriver 访问时出现错误日志

org.openqa.selenium.TimeoutException: Expected condition failed: waiting for element to be clickable: By.xpath: .//div/mat-spinner (tried for 10 second(s) with 500 milliseconds interval)
        at org.openqa.selenium.support.ui.WebDriverWait.timeoutException(WebDriverWait.java:113)
        at org.openqa.selenium.support.ui.FluentWait.until(FluentWait.java:283)
        at base.StaticSeleniumDriver.getWebElement(StaticSeleniumDriver.java:362)
        at steps.BaseSteps.debugDrawSpinner(BaseSteps.java:55)
        at ?.Given Debug draw spinner(Campus.feature:190)
      Caused by: org.openqa.selenium.NoSuchElementException: Cannot locate an element using By.xpath: .//div/mat-spinner
      For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
      Build info: version: '3.14.0', revision: 'aacccce0', time: '2018-08-02T20:19:58.91Z'
      System info: host: 'BANNB061', ip: '10.0.75.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_181'
      Driver info: driver.version: StaticSeleniumDriver

使用以下代码：

WebDriverWait wait = new WebDriverWait(driver, timeOutInSeconds);
return wait.until(ExpectedConditions.elementToBeClickable(By.xpath(xpath)));

【问题讨论】：

分享你的代码。还尝试在微调器可见时单击页面上的任何元素并检查异常 - 微调器的 HTML 可能存在于日志中（也共享此 HTML）
该元素在查找时是否可见。它是如何显示和隐藏的？您使用什么技术？
@Andersson 很抱歉，但很遗憾我不能分享整个 html（它来自工作）
不，我的意思是 div 的 HTML，带有您用来处理它的微调器和代码
@kamentk 我正在使用 selenium web 驱动程序创建自动化测试，但现在它不是很相关，主要问题是：1.我确保元素可见（微调器）2.我复制它xPath 使用 chrome 检查工具 3. 我确保元素再次可见（微调器） 4. 当元素仍然可见时，我在 chrome 检查工具中按 CTR + F，使用我之前复制的 xPath 搜索元素，但即使 xPath 是同样，它没有检测到它。谢谢

标签： html google-chrome web selenium-webdriver xpath

【解决方案1】：

这是我在量角器中制作的解决方案。我的逻辑是在与网站交互后检查微调器是否存在。示例：单击元素，输入一些文本，页面导航..弹出等.. 您可以找到放置它的正确位置。希望它有所帮助，您可以将其调整为任何语言。 selenium API 很常见。

请注意，如果您找到了 .//mat-spinner，请将其用作元素的 xpath。

export async function handleSpinner() {
    console.log('Checking if loading spinner is present on the page.');

    let spinner = element(by.css('div.spinner'));
    try {
        // setting minimal timeout to search for the element
        await browser.manage().timeouts().implicitlyWait(500);

        // trigger check if there is such element on the page. will throw exception if not present
        await spinner.getWebElement();

        console.log('Spinner has been found.. waiting.... up to 10 seconds.');
        await browser.wait(ExpectedConditions.invisibilityOf(spinner), 10000, 'Spinner is still present...');
        console.log('Spinner has disappeared.');
    } catch (ex) {
        // spiner is not present so ignore the exception
    } finally {
        // Setting browser implicit timeout back to the original configuration.
        await browser.manage().timeouts().implicitlyWait(10000);
    }
}

【讨论】：