C# Playwright 使用技巧 | 速查表

跳轉至指定網址

    
await Page.GotoAsync("https://www.google.com");
    

取得當前網址

    
string url = Page.Url;
    

設定瀏覽器大小

    
await Page.SetViewportSizeAsync(800, 600);
    

選擇元素

平時除了使用官方的錄製工具以外，我們也需要知道該如何選擇網頁上的元素，其實基本上選擇我們只要會使用 Locator 就可以了。

    
Page.Locator("#password") // id 為 password

Page.Locator(".page-body") // 具有 page-body class 的元素

Page.Locator("//*[@id='password']") // XPath

Page.Locator(".explanation > p:nth-child(1)") // CSS 選擇器
    

當然我們還可以使用進階的:

• 屬性選擇: [] 例如: [name='username']
• 所有元素: * 例如: h2 *
• 直接子元素: > 例如: ul > li
• 相鄰兄弟元素: + 例如: h2 + p
• 所有兄弟元素: ~ 例如: h2 ~ p

不過也不只有 Locator，還有:

    
// id 為 password
Page.QuerySelectorAsync("#password");

// 顯示為 click me 的 Button
Page.GetByRole(AriaRole.Button, new() { Name = "click me" });
    

操作元素

    
// 點擊按鈕
await Page.Locator("#button").ClickAsync(); 

// 取得文字
string text = await Page.Locator("#p1").InnerTextAsync();

// 取得 html 中 value 這個屬性的值
string text1 = await Page.Locator("input[id=\"Id\"]").GetAttributeAsync("value");

// 輸入內容
await Page.Locator("input[name=\"username\"]").FillAsync("1234");

// 使用快捷鍵 Ctrl + a
await Page.Locator("input[name=\"username\"]").PressAsync("Control+a");

// 使用快捷鍵 Tab
await Page.Locator("input[name=\"username\"]").PressAsync("Tab");

// 取消選擇第三個核取方塊 (第一個是 "First" 第二個是 "Nth(1)" )
await Page.GetByRole(AriaRole.Checkbox).Nth(2).UncheckAsync();

// 下拉式選單選擇值(value) 為 dd5 的選項
await Page.GetByRole(AriaRole.Combobox).SelectOptionAsync(new[] { "dd5" });
    

螢幕截圖

FullPage 代表會自動向下捲動，長截圖

    
await Page.ScreenshotAsync(new() { Path = "screen.png", FullPage = true });