PuppeteerSharp isn’t loading CSS or images

Issue

This Content is from Stack Overflow. Question asked by cullimorer

I have already implemented the solution in Puppeteer nodejs and it works perfectly but I can’t seem to get it to work with PuppeteerSharp. The issue is that in PuppeteerSharp it doesn’t load the CSS stylings or images. Here is the code for nodejs and c#.

The call is designed to hit the login page and submit the users username and password which will then redirect to the page that the screenshot needs to be taken on. Please note, I have omitted url and customer facing data.

NodeJS working code:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({
      width: 1920,
      height: 1080,
      deviceScaleFactor: 1,
    });

    await page.setCacheEnabled(false);
    
    // Allows you to intercept a request; must appear before
    // your first page.goto()
    await page.setRequestInterception(true);

    page.once('request', request => {
        var data = {
            'method': 'POST',
            'postData': '',
            'headers': {
                ...request.headers(),
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        };

        request.continue(data);

        // Immediately disable setRequestInterception, or all other requests will hang
        page.setRequestInterception(false);
    });

    await page.goto('http://test.test.com/Authentication/Login?ReturnUrl=%2FPortal%2FCustomerGroupSummary%3Fcustomer%3DTEST%26AccountNumber%3DALL%26AccountName%3DALL%26Site%3DALL%26Period%3DLastweek&UserName=#####@ardenthire.com&password=######');

    await page.screenshot({path: 'example2.png'});

    await browser.close();
})();

C# code that doesn’t return CSS styling or images:

using (var browserFetcher = new BrowserFetcher())
{
    await browserFetcher.DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
    var browser = await Puppeteer.LaunchAsync(new LaunchOptions());

    var page = await browser.NewPageAsync();

    await page.SetViewportAsync(new ViewPortOptions()
    {
        Width = 1920,
        Height = 1080,
        DeviceScaleFactor = 1
    });

    await page.SetRequestInterceptionAsync(true);

    page.Request += async (sender, e) =>
    {
        var payload = new Payload()
        {
            Method = HttpMethod.Post,
            PostData = ""
        };
        await e.Request.ContinueAsync(payload);
    };

    await page.GoToAsync("http://test.test.com/Authentication/Login?ReturnUrl=%2FPortal%2FCustomerGroupSummary%3Fcustomer%3DTEST%26AccountNumber%3DALL%26AccountName%3DALL%26Site%3DALL%26Period%3DLastweek&UserName=#####&password=######",
        new NavigationOptions() { WaitUntil = new WaitUntilNavigation[] { WaitUntilNavigation.Networkidle0 } });

    await page.ScreenshotAsync(@"C:Development CodeRobinSourceReposNode filesSample.png", new ScreenshotOptions() { FullPage = true });

    await browser.CloseAsync();
}



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?