Selenium Webdriver check if image is displayed using id

Question

I have been trying to check if an image is displayed on my page using the image id. I have looked through similar posts but cannot find one that solves my problem.

I don't know why my error message says css selector, I am trying to find the element using its id.

Any ideas would be great, thanks?

Test:

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>

Error:

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

undetected Selenium · Accepted Answer · 2020-06-07T17:06:00.210

A few words:

Ideally, you need to start finding the WebElement only after you invoke Navigate().GoToUrl(). So the sequence would be:
```
driver.Navigate().GoToUrl(HomeUrl);
IWebElement BannerImageElement = driver.FindElement(By.Id("HomePageBanner"));
```
Though you have declared an instance of WebDriverWait as wait you but haven't utilized it while looking out for the element.
Finally, as per the discussion in Official locator strategies for the webdriver other then xpath all the other locator strategies are converted in to css-selectors while execution.

Solution

To check if an image is displayed on the webpage you have to induce WebDriverWait for the ElementIsVisible and you can use either of the following solutions:

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

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

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

Update

Incase you are using nuget packages you need to use SeleniumExtras.WaitHelpers.ExpectedConditions as follows: