Hello Playwright：(6)与元素交互

在上一节我们已经了解到如何定位到元素，那么接下来就可以与元素进行交互了。

下面的例子都是以百度首页作为测试页面

输入文本

FillAsync方法用于模拟用户选中元素并输入文本，这会触发元素的 input 事件。该方法只适合<input>、<textarea>等可输入的元素。

例如，下面的代码在搜索框中输入文本：

await page.Locator("id=kw").FillAsync("MyIO Hello Playwright");

点击鼠标

ClickAsync方法用于模拟用户点击元素，同时会将元素滚动到浏览器当前可视范围内。

例如，点击搜索按钮：

await page.Locator("id=su").ClickAsync();

悬停鼠标

HoverAsync方法用于模拟用户将鼠标悬停在元素上，同时会将元素滚动到浏览器当前可视范围内。

例如，悬停鼠标在“设置”链接上弹出菜单：

await page.Locator("//*[@id=\"u\"]/a[2]").HoverAsync();

选中单选按钮

CheckAsync方法用于选中和取消选中复选框或单选按钮。

例如，在“搜索设置”窗口将“搜索历史记录”设为显示：

await page.Locator("id=sh_1").CheckAsync();

最后整体交互效果如下图：

var playwright = await Playwright.CreateAsync();
var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, SlowMo = 1000, Channel="chrome", ChromiumSandbox=true  });

var page = await browser.NewPageAsync();
await page.GotoAsync("https://www.baidu.com");

await page.Locator("id=kw").FillAsync(Guid.NewGuid().ToString());

await page.Locator("id=su").ClickAsync();

await Task.Delay(2000);

await page.Locator("//*[@id=\"u\"]/a[2]").HoverAsync();

await page.Locator("//*[@id=\"u\"]/div/a[1]/span").ClickAsync();
await page.Locator("id=sh_1").CheckAsync();

添加微信号【MyIO666】，邀你加入技术交流群