CODEWITHSUNDEEP
seleniumselenium-webdriverxpathcss-selectorswebdriverwait
DMur
DMur

Reputation: 661

Selenium Webdriver check if image is displayed using id

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

Upvotes: 1

Views: 1252

Answers (1)

undetected Selenium
undetected Selenium

Reputation: 193088

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 all the other locator strategies are converted in to 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 packages you need to use SeleniumExtras.WaitHelpers.ExpectedConditions as follows:

  • Using Id:

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

  • Using CssSelector:

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

  • Using XPath:

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

References

You can find a couple of relevent discussions in:

Upvotes: 1

Related Questions