How to use SetCSP method of PuppeteerSharp.TestServer.SimpleServer class

If your code used to work, and it stopped working all of a sudden.

You won't believe it! Chrome version matters so basically if you are using Version 83.0.4103.61 (Official Build) (64-bit), it will fail and show "Navigation failed because browser has disconnected!" Error.

downgrade your chrome to Version 81.0.4044.138 (Official Build) (64-bit) or below 7X.XX.XXXX.XXX

Note: Make sure you do the same in your server as well. Not just locally

From the examples in the docs, it looks like you have to do this:

// select the tag first
var element = await _page.QuerySelectorAsync("h1 > strong > a");

// then get the attribute
var url = await element.EvaluateFunctionAsync<string>("e => e.getAttribute('href')");
// OR
var url = await _page.EvaluateFunctionAsync<string>("e => e.getAttribute('href')", element);
// OR
var url = await (await element.GetPropertyAsync("href")).JsonValueAsync<string>();

// OR all in one
var url = await _page.EvaluateExpressionAsync<string>($"document.querySelector({"'h1 > strong > a'"}).getAttribute('href')");

You gotta apply this to the value of a select option, of course. Probably 'value' instead of 'href' and the correct selector.

Set the Headless to true nad try

var options = new LaunchOptions
{
    Headless = true,
    ExecutablePath = @"C:\Program Files\Mozilla Firefox\firefox.exe",
    Args = argumentsWithoutExtension
};

You can use the PdfOptions.Height and PdfOptions.Width.You might find that it's not pixel perfect but that's more on the Chromium's side than on Puppeteer's.

await page.SetViewportAsync(new ViewPortOptions()
{
    Height = 1024,
    Width = 1280
});
await page.GoToAsync("https://github.com/kblok/puppeteer-sharp/");
int height = await page.EvaluateExpressionAsync<int>("document.body.offsetHeight");
int width = await page.EvaluateExpressionAsync<int>("document.body.offsetWidth");
await page.PdfAsync(Path.Combine(Directory.GetCurrentDirectory(), "test.pdf"), new PdfOptions
{
    Width = width.ToString() + "px",
    Height = height.ToString() + "px",
});

Based on Line 43 of the LanchOptions.cs you can specify arguments to the launch process.

Now connecting this with the native JavaScript (using the --load-extension flag) the output should look similar to the following:

var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Args = new string[1] { "--load-extension=/Path/To/Extension/Folder" }
});

Note: that I put path to folder, not the .zip as you have in your sample.. if you want to load multiple extensions then just separate the paths using a comma.

Here's a full list of possible arguments that can be passed in to Chromium.

So my problem was happening because errors are apparently not serializable in javascript land, so we need to get the browser to run a function to extract the message and any other details we need from the error and return that.

This is what's working for me right now:

_page.Console += async (sender, args) =>
{
    switch (args.Message.Type)
    {
        case ConsoleType.Error:
            try
            {
                var errorArgs = await Task.WhenAll(args.Message.Args.Select(arg => arg.ExecutionContext.EvaluateFunctionAsync("(arg) => arg instanceof Error ? arg.message : arg", arg)));
                _logger.LogError($"{args.Message.Text} args: [{string.Join<object>(", ", errorArgs)}]");
            }
            catch { }
            break;
        case ConsoleType.Warning:
            _logger.LogWarning(args.Message.Text);
            break;
        default:
            _logger.LogInformation(args.Message.Text);
            break;
    }
};

I got the idea from a comment from one of the puppeteer contributors here and ported it to pupeteer-sharp.

The way it's supposed to be done atm is like this:

page.on('console', async msg => {
  // serialize my args the way I want
  const args = await Promise.all(msg.args.map(arg => arg.executionContext().evaluate(arg => {
    // I'm in a page context now. If my arg is an error - get me its message.
    if (arg instanceof Error)
      return arg.message;
    // return arg right away. since we use `executionContext.evaluate`, it'll return JSON value of
    // the argument if possible, or `undefined` if it fails to stringify it.
    return arg;
  }, arg)));
  console.log(...args);
});

If you want to get an element from the browser you should get an ElementHandle, which is a pointer to an element in the browser, using EvaluateExpressionHandleAsync:

var element = await page.EvaluateExpressionHandleAsync($"document.querySelectorAll('[{attributeName}=\"{attributeValue}\"]')[0];");

For local path, need to use file protocol like below:

await page.GoToAsync("file://" + Path.Combine(context.FunctionAppDirectory, "www", "index.html"));

Yarp Reverse proxy with Direct Forwarding is the answer:

Server code: (ASP.NET core minimal API):

Dictionary<string, string> routes = new();

app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.Map("/connect/{**catch-all}", async httpContext =>
    {
        var route = httpContext.Request.GetDisplayUrl();

        await app.Services.GetRequiredService<IHttpForwarder>().SendAsync(
            httpContext,
            routes.TryGetValue(Path.GetFileName(new Uri(route).AbsolutePath), out string targetRoute) ? targetRoute : route,
            new HttpMessageInvoker(new SocketsHttpHandler()
            {
                UseProxy = false,
                AllowAutoRedirect = false,
                AutomaticDecompression = DecompressionMethods.None,
                UseCookies = false,
                ActivityHeadersPropagator = new ReverseProxyPropagator(DistributedContextPropagator.Current)
            })
        );
    });
});

app.MapGet("/", async () =>
{
    var b = await Puppeteer.LaunchAsync(new()
    {
        ExecutablePath = browserPath // set your chrome directory
    });

    var id = Path.GetFileName(b.WebSocketEndpoint);

    routes.Add(id, b.WebSocketEndpoint);

    return $"ws://your-server-ip-address/connect/{id}";
});

app.Run();

Client code:

await Puppeteer.ConnectAsync(new() { BrowserWSEndpoint = await httpClient.GetStringAsync("http://your-server-ip-address") })