Selenium Webdriver 检查是否使用 id 显示图像

Question

我一直在尝试使用图像 ID 检查图像是否显示在我的页面上。我浏览了类似的帖子，但找不到解决我问题的帖子。

我不知道为什么我的错误消息显示 css 选择器，我正在尝试使用其 ID 查找元素。

任何想法都很好，谢谢？

测试：

public void CheckBannerImage()
{
    var UrlRefLibrary = new UrlStrings();
    string HomeUrl = UrlRefLibrary.GetHomePageLocalHostUrl();
    using IWebDriver driver = new ChromeDriver();
    IWebElement BannerImageElement = driver.FindElement(By.Id("HomePageBanner"));

    driver.Navigate().GoToUrl(HomeUrl);
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));

    Assert.True(BannerImageElement.Displayed);

}

Index.cshtml

@model HomeViewModel
@{
    ViewData["Title"] = _loc[Model.PageTabTitle];
}
<div class="text-center">
    @section header_image{
        <div class="bg-img" id="HomePageBanner">
    }
</div>
</div>

_Layout.cshtml

<body>
    <header>
        @RenderSection("header_image", required: false)
    </header>
</body>

错误：

Message: 
    OpenQA.Selenium.NoSuchElementException : no such element: Unable to locate element: {"method":"css selector","selector":"#HomePageBanner"}
      (Session info: chrome=83.0.4103.61)
  Stack Trace: 
    RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse)
    RemoteWebDriver.Execute(String driverCommandToExecute, Dictionary`2 parameters)
    RemoteWebDriver.FindElement(String mechanism, String value)
    RemoteWebDriver.FindElementById(String id)
    <>c__DisplayClass16_0.<Id>b__0(ISearchContext context)
    By.FindElement(ISearchContext context)
    RemoteWebDriver.FindElement(By by)
    TestHomepageComponentsArePresent.CheckBannerImage() line 21

Answer 1

几句话：

理想情况下，您需要在调用 Navigate().GoToUrl() 后才开始查找。所以顺序是：

driver.Navigate().GoToUrl(HomeUrl);
IWebElement BannerImageElement = driver.FindElement(By.Id("HomePageBanner"));

尽管您已将 WebDriverWait 的实例声明为 wait，但您在查找元素时并未使用它。
最后，根据 other then xpath all the other locator strategies are converted in to css-selectors while execution 中的讨论。

解决方案

要检查网页上是否显示图像，您必须为 ElementIsVisible 引入 WebDriverWait，您可以使用以下任一解决方案：

使用 Id:

public void CheckBannerImage()
{
    var UrlRefLibrary = new UrlStrings();
    string HomeUrl = UrlRefLibrary.GetHomePageLocalHostUrl();
    using IWebDriver driver = new ChromeDriver();
    driver.Navigate().GoToUrl(HomeUrl);
    IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.Id("HomePageBanner")));
    Assert.True(BannerImageElement.Displayed);
}

使用 CssSelector:

public void CheckBannerImage()
{
    var UrlRefLibrary = new UrlStrings();
    string HomeUrl = UrlRefLibrary.GetHomePageLocalHostUrl();
    using IWebDriver driver = new ChromeDriver();
    driver.Navigate().GoToUrl(HomeUrl);
    IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("#HomePageBanner")));
    Assert.True(BannerImageElement.Displayed);
}

使用 XPath:

public void CheckBannerImage()
{
    var UrlRefLibrary = new UrlStrings();
    string HomeUrl = UrlRefLibrary.GetHomePageLocalHostUrl();
    using IWebDriver driver = new ChromeDriver();
    driver.Navigate().GoToUrl(HomeUrl);
    IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//*[@id='HomePageBanner']")));
    Assert.True(BannerImageElement.Displayed);
}

更新

如果您使用 nuget 包，您需要按如下方式使用 SeleniumExtras.WaitHelpers.ExpectedConditions：

使用 Id:

IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.Id("HomePageBanner")));
Assert.True(BannerImageElement.Displayed);

使用 CssSelector:

IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.CssSelector("#HomePageBanner")));
Assert.True(BannerImageElement.Displayed);

使用 XPath:

IWebElement BannerImageElement = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.XPath("//*[@id='HomePageBanner']")));
Assert.True(BannerImageElement.Displayed);

参考资料

您可以在以下位置找到一些相关讨论：

Selenium Webdriver 检查是否使用 id 显示图像

Selenium Webdriver check if image is displayed using id

selenium

xpath

css-selectors

selenium-webdriver

webdriverwait

解决方案

更新

参考资料