[FIXED] Unable To Get Lazy Images To Load, Even After Scroll To Bottom Of The Page Using C# Selenium & Browserless.io

Issue

I am using the latest selenium in a .Net test using Browserless.io. I'm trying to scroll down the page slowly and allow the images to load.

When I view this page manually in my browser, you can see the images are lazy loaded in.

https://www.reuters.com/business/

I have created the following script to scroll down the page

[Fact]
public void Get_Lazy_Load_Images_Via_Chrome_Selenium()
{ 
    IWebDriver driver;
    var options = new ChromeOptions();

    // Set launch args similar to puppeteer's for best performance
    options.AddArgument("--disable-background-timer-throttling");
    options.AddArgument("--disable-backgrounding-occluded-windows");
    options.AddArgument("--disable-breakpad");
    options.AddArgument("--disable-component-extensions-with-background-pages");
    options.AddArgument("--disable-dev-shm-usage");
    options.AddArgument("--disable-extensions");
    options.AddArgument("--disable-features=TranslateUI,BlinkGenPropertyTrees");
    options.AddArgument("--disable-ipc-flooding-protection");
    options.AddArgument("--disable-renderer-backgrounding");
    options.AddArgument("--enable-features=NetworkService,NetworkServiceInProcess");
    options.AddArgument("--force-color-profile=srgb");
    options.AddArgument("--hide-scrollbars");
    options.AddArgument("--metrics-recording-only");
    options.AddArgument("--mute-audio");
    options.AddArgument("--headless");
    options.AddArgument("--no-sandbox");

    // Note we set our token here, with `true` as a third arg
    options.AddAdditionalOption("browserless:token", "MYAPIKEY");

    driver = new RemoteWebDriver(
        new Uri("https://chrome.browserless.io/webdriver"), options.ToCapabilities()
    );

    driver.Navigate().GoToUrl("https://www.reuters.com/business/");
    ScrollToBottom(driver);
    Assert.NotNull(driver.Title);
    driver.Quit();
}

private static void ScrollToBottom(IWebDriver driver)
{
    long scrollHeight = 0;
    do
    {
        var js = (IJavaScriptExecutor) driver;
        var newScrollHeight = (long) js.ExecuteScript("window.scrollTo(0, document.body.scrollHeight); return document.body.scrollHeight;");

        if(newScrollHeight == scrollHeight)
        {
            break;
        }

        scrollHeight = newScrollHeight;
        Thread.Sleep(400);
    } while (true);
}

However, no matter how much I Thread.Sleep the images just do not load? Any ideas where I am going wrong?

Solution

I tried to reproduce your scenario and came up with this simple solution

var collection = wait.Until(d => d.FindElements(By.XPath("//li[@class = 'story-collection__story__LeZ29 story-collection__default__G33_I']")));
foreach (var item in collection)
{
    js.ExecuteScript("arguments[0].scrollIntoView({block: \"center\", inline: \"center\"});", item);
    Console.WriteLine(item.FindElement(By.XPath(".//img")).GetAttribute("alt"));
}

Answered By - ggeorge