How to use Playwright Sharp in F# for Browser Automation

Question

I guess this is a classic C# to F# conversion I haven't quite got my head around.

I am trying to automate a browser using the quick start

https://playwright.dev/dotnet/docs/intro

The C# code is

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
await page.GotoAsync("http://www.bing.com");
await page.ScreenshotAsync(path: outputFile);

I've made a start but getting a bit lost already.

let playwright: Playwright = PlaywrightSharp.Playwright.CreateAsync() |> Async.AwaitTask

Incorrect type. What am I doing wrong here?

Error   FS0001  This expression was expected to have type
    'Playwright'    
but here has type
    'Async<IPlaywright>'

score 2 · Answer 1 · answered May 19 '21 at 21:33

You can use the TaskBuilder framework https://github.com/rspeele/TaskBuilder.fs

dotnet add package Taskbuilder.fs

and write

task {    
    use! playwright =  Playwright.CreateAsync() 
    let! browser =  playwright.Chromium.LaunchAsync()
    let! page = browser.NewPageAsync()
    
    let! response = page.GoToAsync("http://www.bing.com")
    let! title =  page.GetTitleAsync()

    printfn "%s" title

}
|> Task.WaitAll

score 2 · Answer 2 · answered Jan 06 '22 at 12:55

As of F# 6, tasks are now natively supported through the task computation expression. The syntax will be almost identical to the async computation expression from Brian Berns's answer, except that you no longer need to call Async.AwaitTask on each let!, use!, or do! binding.

let screenshotTask =
  task {
    use! playwright = Playwright.CreateAsync ()
    use! browser = playwright.Chromium.LaunchAsync ()
    let! page = browser.NewPageAsync ()
    let! _ = page.GotoAsync "https://www.bing.com"
    let! _ = page.ScreenshotAsync (PageScreenshotOptions(Path = "screenshot.png"))
    return ()
  }
screenshotTask.Wait ()

With `do! browser.CloseAsync()` it does not hang. – Jan Bodnar Feb 20 '22 at 23:24 — Jan Bodnar, Feb 20 '22 at 23:24

Brian Berns · Accepted Answer · 2021-05-19T21:56:51.223

One way to do this is with a F#'s built-in support for async computation expressions. The translation would look something like this:

let (~~) = Async.AwaitTask

async {
    use! playwright = ~~Playwright.CreateAsync()
    let! browser = ~~playwright.Chromium.LaunchAsync()
    let! page = ~~browser.NewPageAsync()
    do! ~~page.GoToAsync("http://www.slashdot.com") |> Async.Ignore
    do! ~~page.ScreenshotAsync(outputFile) |> Async.Ignore
} |> Async.RunSynchronously

There are a few subtleties here that you'll need to know about:

F# has its own async type, called Async<'T>. I've used Async.AwaitTask to convert from C#-style tasks, and defined a prefix operator, ~~, to make this look a bit cleaner.
F# doesn't support DisposeAsync in async computation expressions yet, so the browser doesn't get disposed of properly. If you want, you can add do! browser.DisposeAsync().AsTask() |> Async.AwaitTask at the end of the block to do this manually.
F# requires us to explicitly ignore unwanted return values, which I've done via Async.Ignore.

thank you. It works , I can't quite get my head around why/ how it works. If I try it in a function that is not in an async block with something like do page.FillAsync("#myselector","value") |> Async.AwaitTask |> ignore , it doesn't work at all - why? ( excuse my ignorance ) — Martin Thompson, May 20 '21 at 10:15
One important aspect of F# async code is that it creates a computation but doesn't actually execute it until you send it to `Async.RunSynchronously` (or one of the other [similar functions](https://fsharp.github.io/fsharp-core-docs/reference/fsharp-control-fsharpasync.html#section0)). C# tasks, by contrast, start automatically. For more details, check out "Control flow differences" in [this article](http://tomasp.net/blog/async-csharp-differences.aspx/). — Brian Berns, May 20 '21 at 14:05

How to use Playwright Sharp in F# for Browser Automation

3 Answers3