docs(dotnet): ElementHandle and JSHandle examples (#6527)

docs/src/api/class-elementhandle.md

@@ -69,6 +69,24 @@ with sync_playwright() as playwright:
     run(playwright)
 ```
 
+```csharp
+using Microsoft.Playwright;
+using System.Threading.Tasks;
+
+class HandleExamples
+{
+    public static async Task Run()
+    {
+        using var playwright = await Playwright.CreateAsync();
+        var browser = await playwright.Chromium.LaunchAsync(headless: false);
+        var page = await browser.NewPageAsync();
+        await page.GoToAsync("https://www.bing.com");
+        var handle = await page.QuerySelectorAsync("a");
+        await handle.ClickAsync();
+    }
+}
+```
+
 ElementHandle prevents DOM element from garbage collection unless the handle is disposed with
 [`method: JSHandle.dispose`]. ElementHandles are auto-disposed when their origin frame gets navigated.
 
@@ -114,6 +132,11 @@ box = element_handle.bounding_box()
 page.mouse.click(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)
 ```
 
+```csharp
+var box = await elementHandle.BoundingBoxAsync();
+await page.Mouse.ClickAsync(box.X + box.Width / 2, box.Y + box.Height / 2);
+```
+
 ## async method: ElementHandle.check
 
 This method checks the element by performing the following steps:
@@ -234,6 +257,10 @@ await element_handle.dispatch_event("click")
 element_handle.dispatch_event("click")
 ```
 
+```csharp
+await elementHandle.DispatchEventAsync("click");
+```
+
 Under the hood, it creates an instance of an event based on the given [`param: type`], initializes it with
 [`param: eventInit`] properties and dispatches it on the element. Events are `composed`, `cancelable` and bubble by
 default.
@@ -276,6 +303,14 @@ data_transfer = page.evaluate_handle("new DataTransfer()")
 element_handle.dispatch_event("#source", "dragstart", {"dataTransfer": data_transfer})
 ```
 
+```csharp
+var handle = await page.EvaluateHandleAsync("() => new DataTransfer()");
+await handle.AsElement.DispatchEventAsync("dragstart", new Dictionary<string, object>
+{
+    { "dataTransfer", dataTransfer }
+});
+```
+
 ### param: ElementHandle.dispatchEvent.type
 - `type` <[string]>
 
@@ -327,6 +362,12 @@ assert tweet_handle.eval_on_selector(".like", "node => node.innerText") == "100"
 assert tweet_handle.eval_on_selector(".retweets", "node => node.innerText") = "10"
 ```
 
+```csharp
+var tweetHandle = await page.QuerySelectorAsync(".tweet");
+Assert.Equals("100", await tweetHandle.EvalOnSelectorAsync(".like", "node => node.innerText"));
+Assert.Equals("10", await tweetHandle.EvalOnSelectorAsync(".retweets", "node => node.innerText"));
+```
+
 ### param: ElementHandle.evalOnSelector.selector = %%-query-selector-%%
 
 ### param: ElementHandle.evalOnSelector.expression = %%-evaluate-expression-%%
@@ -380,6 +421,11 @@ feed_handle = page.query_selector(".feed")
 assert feed_handle.eval_on_selector_all(".tweet", "nodes => nodes.map(n => n.innerText)") == ["hello!", "hi!"]
 ```
 
+```csharp
+var feedHandle = await page.QuerySelectorAsync(".feed");
+Assert.Equals(new [] { "Hello!", "Hi!" }, await feedHandle.EvalOnSelectorAllAsync<string[]>(".tweet", "nodes => nodes.map(n => n.innerText)"));
+```
+
 ### param: ElementHandle.evalOnSelectorAll.selector = %%-query-selector-%%
 
 ### param: ElementHandle.evalOnSelectorAll.expression = %%-evaluate-expression-%%
@@ -649,6 +695,20 @@ handle.select_option("red", "green", "blue")
 handle.select_option(value="blue", { index: 2 }, "red")
 ```
 
+```csharp
+// single selection matching the value
+await handle.SelectOptionAsync(new[] { "blue" });
+// single selection matching the label
+await handle.SelectOptionAsync(new[] { new SelectOptionValue() { Label = "blue" } });
+// multiple selection
+await handle.SelectOptionAsync(new[] { "red", "green", "blue" });
+// multiple selection for blue, red and second option
+await handle.SelectOptionAsync(new[] {
+    new SelectOptionValue() { Label = "blue" },
+    new SelectOptionValue() { Index = 2 },
+    new SelectOptionValue() { Value = "red" }});
+```
+
 ### param: ElementHandle.selectOption.values = %%-select-options-values-%%
 
 ### option: ElementHandle.selectOption.noWaitAfter = %%-input-no-wait-after-%%
@@ -736,6 +796,11 @@ element_handle.type("hello") # types instantly
 element_handle.type("world", delay=100) # types slower, like a user
 ```
 
+```csharp
+await elementHandle.TypeAsync("Hello"); // Types instantly
+await elementHandle.TypeAsync("World", delay: 100); // Types slower, like a user
+```
+
 An example of typing into a text field and then submitting the form:
 
 ```js
@@ -762,6 +827,12 @@ element_handle.type("some text")
 element_handle.press("Enter")
 ```
 
+```csharp
+var elementHandle = await page.QuerySelectorAsync("input");
+await elementHandle.TypeAsync("some text");
+await elementHandle.PressAsync("Enter");
+```
+
 ### param: ElementHandle.type.text
 - `text` <[string]>
 
@@ -866,6 +937,13 @@ div = page.query_selector("div")
 span = div.wait_for_selector("span", state="attached")
 ```
 
+```csharp
+await page.SetContentAsync("<div><span></span></div>");
+var div = await page.QuerySelectorAsync("div");
+// Waiting for the "span" selector relative to the div.
+var span = await page.WaitForSelectorAsync("span", WaitForSelectorState.Attached);
+```
+
 :::note
 This method does not work across navigations, use [`method: Page.waitForSelector`] instead.
 :::

docs/src/api/class-jshandle.md

@@ -23,6 +23,10 @@ window_handle = page.evaluate_handle("window")
 # ...
 ```
 
+```csharp
+var windowHandle = await page.EvaluateHandleAsync("() => window");
+```
+
 JSHandle prevents the referenced JavaScript object being garbage collected unless the handle is exposed with
 [`method: JSHandle.dispose`]. JSHandles are auto-disposed when their origin frame gets navigated or the parent context
 gets destroyed.
@@ -71,6 +75,11 @@ tweet_handle = page.query_selector(".tweet .retweets")
 assert tweet_handle.evaluate("node => node.innerText") == "10 retweets"
 ```
 
+```csharp
+var tweetHandle = await page.QuerySelectorAsync(".tweet .retweets");
+Assert.Equals("10 retweets", await tweetHandle.EvaluateAsync("node => node.innerText"));
+```
+
 ### param: JSHandle.evaluate.expression = %%-evaluate-expression-%%
 
 ### param: JSHandle.evaluate.arg
@@ -136,6 +145,14 @@ document_handle = properties.get("document")
 handle.dispose()
 ```
 
+```csharp
+var handle = await page.EvaluateHandleAsync("() => ({window, document}");
+var properties = await handle.GetPropertiesAsync();
+var windowHandle = properties["window"];
+var documentHandle = properties["document"];
+await handle.DisposeAsync();
+```
+
 ## async method: JSHandle.getProperty
 - returns: <[JSHandle]>