玩转浏览器自动化（4）Playwright 与元素交互

在前面的章节中，我们已经学习了如何使用Playwright定位元素，但是仅仅定位并不足够，我们还需要对元素进行操作。Playwright的定位器（Locator）提供了非常全面的方法，可以用于处理用户交互，并支持多种类型的控件，如列表、下拉菜单、单选按钮和复选框等等。

在本章中，我们将探索如何使用这些方法来完成与不同元素的交互。.

单击

单击操作是最常见的交互方式之一。在 Playwright 中，我们可以使用 ClickAsync 方法来单击一个元素，这个方法是所有元素的公共方法，因此可以在任何元素上调用。

在下面的示例中，我们使用 text 定位器来定位到一个按钮，然后使用 ClickAsync 方法来单击这个按钮：

var playwright = await Playwright.CreateAsync();

await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, SlowMo = 1000 });

var page = await browser.NewPageAsync();

await page.GotoAsync("https://www.w3schools.cn/howto/howto_js_toggle_hide_show.asp");

var element = page.Locator("text=/^切换隐藏和显示$/");

await element.ClickAsync();

await page.ClickAsync("text=/^切换隐藏和显示$/");

为了方便查看效果，我们使用 SlowMo 选项降低所有交互方法的执行速度。

除了单击，我们也可以使用 ClickAsync 方法来模拟鼠标的其他操作，比如双击、单击右键等。在下面的示例中，我们使用 ClickAsync 方法来模拟鼠标的双击操作：

await element.ClickAsync(new LocatorClickOptions { ClickCount = 2 });

在下面的示例中，我们使用 ClickAsync 方法来模拟鼠标的单击右键操作：

await element.ClickAsync(new LocatorClickOptions { Button = MouseButton.Right });  

另外，Playwright 将常用的交互方法也定义到了 Page 类中，因此我们可以直接在 Page 实例上调用这些快捷方法。下面的示例演示了如何使用 page.ClickAsync 方法来单击一个按钮：

await page.ClickAsync("text=/^切换隐藏和显示$/");

严格模式

严格模式是 Playwright 定位器的默认模式。这意味着，如果有多个元素匹配给定的选择器，定位器上的所有操作将抛出异常。例如，在使用 text 定位器定位到一个按钮时，如果页面上有多个元素都匹配这个选择器，那么在定位器上使用 ClickAsync 方法会抛出异常。

var element = page.Locator("text=切换隐藏和显示");

await element.ClickAsync();

为了避免这种异常，我们可以使用 Locator.First、Locator.Last 或者 Locator.Nth(index) 方法来获取指定索引的匹配元素。例如，下面的示例演示了如何在非严格模式下使用 ClickAsync 方法：

var element = page.Locator("text=切换隐藏和显示").Last();

await element.ClickAsync();

输入

输入是Web应用程序与用户交互的重要方式之一。Playwright 提供了 FillAsync 方法，可以用于填充文本框、文本区域和密码框等元素。例如，在百度搜索框中输入“Playwright”，可以使用以下代码片段：

await page.GotoAsync("https://www.baidu.com");  
  
var element = page.Locator("id=kw");  
  
await element.FillAsync("Playwright");  

需要注意的是，FillAsync 方法会一次性输入所有文本，如果需要逐个输入字符，则可以使用 TypeAsync 方法。此方法允许用户设置输入字符之间的延迟时间，从而更好地模拟真实用户的操作。例如：

await element.TypeAsync("Playwright", new LocatorTypeOptions { Delay = 1000 });  

此代码片段中的 Delay 参数表示在每个字符之间等待 1 秒钟。

如果需要输入特殊字符，可以使用 PressAsync 方法。例如，如果需要按下回车键，则可以使用以下代码：

await element.PressAsync("Enter");  

需要注意的是，Playwright 没有提供 ClearAsync 方法来清空文本框的内容。如果需要清空文本框的内容，则可以使用 FillAsync 方法并传入空字符串，或者使用 PressAsync 方法，例如：

await element.FillAsync("");  
  
// 或者  
  
await element.PressAsync("End");  
await element.PressAsync("Shift+Home");  
await element.PressAsync("Backspace");  

上述代码片段中，第一个示例使用了 FillAsync 方法传入空字符串来清空文本框的内容。第二个示例使用了 PressAsync 方法来将光标移动到文本框的末尾，然后选择文本并删除。具体来说，End 键将光标移动到文本框的末尾，Shift+Home 组合键选择了文本，Backspace 键删除了文本。

选择

对于下拉列表，Playwright提供了SelectOptionAsync方法，它可以选择列表中的选项。例如，在下拉列表中选择USA，可以使用以下代码：

await page.GotoAsync("https://www.w3schools.cn/howto/howto_css_responsive_form.asp");  
  
var element = page.Locator("id=country");  
  
await element.SelectOptionAsync("usa");  

需要注意的是，方法参数值是usa而不是USA，因为SelectOptionAsync方法默认匹配选项的value属性。

<select id="country" name="country">
    <option value="australia">Australia</option>
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
</select>

如果想要匹配选项的索引值或文本，可以传入SelectOptionValue对象。

await element.SelectOptionAsync(new[] { new SelectOptionValue() {  Index = 1  } });

// 或者 

await element.SelectOptionAsync(new[] { new SelectOptionValue() {  Label = "Australia"  } });

对于单选框和复选框，可以使用CheckAsync和UncheckAsync方法来选中或取消选中。例如，以下代码选中复选框并取消选中：

await page.GotoAsync("https://www.w3schools.cn/howto/howto_js_display_checkbox_text.asp");

element = page.Locator("id=myCheck");

await element.CheckAsync();

await element.UncheckAsync();

悬停

在Web应用程序中，悬停是一种常见的操作，通常用于显示提示信息或下拉菜单。在Playwright中，使用HoverAsync方法可以模拟悬停操作。

以下是如何使用HoverAsync方法模拟悬停的示例代码：

await page.GotoAsync("https://www.w3schools.cn/howto/howto_css_dropdown.asp");  
  
var element = page.Locator("'Hover Me'");  
await element.HoverAsync();  
  
element = page.Locator("text=/^Link 2$/");  
await element.HoverAsync();  

在上述代码中，我们首先访问了一个网站，然后模拟了将鼠标悬停在"Hover Me"按钮上，这时会显示下拉菜单。接着，我们模拟了将鼠标悬停在"Link 2"上，这时可以看到悬停时下拉菜单的颜色发生了变化。

如果需要在一个元素的特定位置悬停，可以使用LocatorHoverOptions参数。该参数包含一个Position对象，该对象具有X和Y属性，分别表示悬停的横坐标和纵坐标。

以下是如何在指定位置悬停的示例代码：

var element = page.Locator(".dropdown-content");  
var box = await element.BoundingBoxAsync();  
  
await element.HoverAsync(new LocatorHoverOptions {   
  Position = new Position { X = box.Width/2, Y = box.Height/6 }   
});  

在上述代码中，我们首先获取了下拉菜单的位置和大小，然后计算出"Link 1"中心点的横坐标和纵坐标。最后，我们使用这些坐标来模拟悬停操作。

拖拽

拖拽是指将某个元素从一个位置拖动到另一个位置。为了模拟这种操作，Playwright 提供了 DragToAsync 方法，它可以帮助我们轻松地完成拖拽功能。

例如，在一个网页上，我们可以使用以下代码片段将一个可拖动的 DIV 元素拖动到具有 class="intro" 的元素上：

await page.GotoAsync("https://www.w3schools.cn/howto/howto_js_draggable.asp");

var element = page.Locator("#mydivheader");

await element.DragToAsync(page.Locator(".intro"));

滚动

在网页中，有些元素可能会因为被遮挡而不在可视区域内。为了让这些元素显示出来，我们需要通过滚动来调整页面的位置。幸运的是，Playwright 提供了 ScrollIntoViewIfNeededAsync 方法，可以帮助我们模拟滚动操作。

下面的代码展示了如何使用 ScrollIntoViewIfNeededAsync 方法来滚动页面，以便让指定的元素可见：

await page.GotoAsync("https://www.w3schools.cn/howto/howto_css_menu_horizontal_scroll.asp");

var element = page.Locator("'Partners'");

await element.ScrollIntoViewIfNeededAsync();

在上面的代码中，我们首先使用 GotoAsync 方法打开了一个示例页面。接着，我们通过 Locator 方法选取了一个名为 "Partners" 的按钮。最后，我们调用了 ScrollIntoViewIfNeededAsync 方法，使得页面滚动到了可以看到 "Partners" 按钮的位置。

需要注意的是，ScrollIntoViewIfNeededAsync 方法并不会强制让页面滚动到指定元素的位置。如果元素已经在可视区域内，该方法将不做任何操作。因此，该方法非常适合用于需要确保某个元素可见的场景。

操作键盘和鼠标

在我们之前的章节中，我们已经学会了如何使用 FillAsync 或 ClickAsync 等方法来模拟输入和点击元素。但实际上，还有很多场景需要我们模拟用户使用键盘、鼠标与页面进行交互。例如，在线电子表格中，我们可以使用键盘箭头键在单元格中移动，也可以使用鼠标进行拖放来复制值。

在 Playwright 中，我们使用 page.Keyboard 和 page.Mouse 对象来模拟键盘和鼠标的操作。其中，page.Keyboard 对象提供了 DownAsync、UpAsync、InsertTextAsync、PressAsync 和 TypeAsync 五个方法，分别用于模拟按下键盘上的某个键、松开键盘上的某个键、输入文本、按下并松开键盘上的某个键以及逐个输入单个字符。而 page.Mouse 对象则提供了 ClickAsync、DblClickAsync、DownAsync、UpAsync、MoveAsync 和 WheelAsync 六个方法，分别用于模拟点击鼠标按键、双击鼠标按键、按下鼠标按键、松开鼠标按键、移动鼠标以及滚动鼠标。

以下是一个键盘操作的示例代码。代码通过组合使用 PressAsync、InsertTextAsync、DownAsync、PressAsync、UpAsync 和 Backspace 等方法，模拟了在文本框中输入 "Hello Playwright!"，将光标移动到 "!" 的前面，选中 " Playwright" 并删除的过程。最终获得文本 "Hello!"。

await page.Keyboard.PressAsync("Shift+KeyH");
await page.Keyboard.TypeAsync("ello");
await page.Keyboard.InsertTextAsync(" Playwright!");

await page.Keyboard.PressAsync("ArrowLeft");

await page.Keyboard.DownAsync("Shift");
for (int i = 0; i < " Playwright".Length; i++)
    await page.Keyboard.PressAsync("ArrowLeft");
await page.Keyboard.UpAsync("Shift");

await page.Keyboard.PressAsync("Backspace");

以下是一个鼠标操作的示例代码。代码通过组合使用 BoundingBoxAsync、MoveAsync、DownAsync、MoveAsync 和 UpAsync 等方法，模拟了在页面中拖拽一个元素的过程。

await page.GotoAsync("https://www.w3schools.cn/howto/howto_js_draggable.asp");

var element = page.Locator("#mydivheader");
var box = await element.BoundingBoxAsync();

await page.Mouse.MoveAsync(box.X, box.Y);

await page.Mouse.DownAsync();
    
await page.Mouse.MoveAsync(box.X + 100, box.Y + 100);

await page.Mouse.MoveAsync(box.X + 100, box.Y - 100);

await page.Mouse.UpAsync();

另外，我们还可以使用鼠标滚轮来滚动含有滚动条的页面或元素。以下是一个滚轮操作的示例代码。

await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, SlowMo = 1000 });  
  
var page = await browser.NewPageAsync();  
  
await page.GotoAsync("https://www.w3schools.cn/howto/tryhow_js_scroll_indicator.htm");  
      
await page.Mouse.WheelAsync(0, 100);  
await page.Mouse.WheelAsync(0, 100);  

通过这些键盘和鼠标操作，我们可以模拟用户在页面上的真实交互行为，以便更好地测试页面的交互逻辑和用户体验。

总结

在本章中，我们了解到如何使用定位器与元素进行交互。我们涵盖了包括点击、输入、键盘操作、鼠标操作、拖拽、滚动和获取元素信息等多种功能。这些功能将帮助您快速准确地自动化网站测试和操作。

在下一章中，我们将继续探讨如何使用 Playwright 等待页面加载完成，以及等待元素出现。这些功能将帮助您更好地控制测试流程，确保您的测试脚本能够顺利执行，提高测试效率。