Playwright(Java版) - 8: Playwright 元素交互的高级应用

在自动化测试中，处理复杂的页面交互是常见的需求。例如，应对动态加载的元素、处理弹窗与对话框、模拟拖放操作，甚至在绘图板上进行绘图操作。

1 动态元素与弹窗处理

1.1 动态元素的加载与等待

动态页面可能会导致元素在操作时尚未完全加载，为避免报错，需要使用 Playwright 的自动等待机制或显式等待功能。

示例：等待动态加载的元素可见

page.navigate("https://example.com/dynamic-content");
// 等待元素出现
page.waitForSelector("#dynamic-element", new Page.WaitForSelectorOptions().setState(WaitForSelectorState.VISIBLE));
String dynamicText = page.textContent("#dynamic-element");
System.out.println("动态元素内容: " + dynamicText);

1.2 处理弹窗与对话框

示例：处理浏览器的弹窗

page.onDialog(dialog -> {System.out.println("弹窗内容: " + dialog.message());dialog.accept(); // 点击确认
});
page.click("#trigger-dialog");

示例：输入对话框内容

page.onDialog(dialog -> {if (dialog.type().equals("prompt")) {dialog.accept("输入的值");}
});
page.click("#trigger-prompt");

---

2 模态窗口与对话框的操作

模态窗口（Modal Dialog）是网页常用的交互形式，通常在特定操作后出现，且会阻止用户与其他页面元素交互。

2.1 处理模态窗口

示例：验证模态窗口内容

// 点击触发模态窗口的按钮
page.click("#open-modal");
// 等待模态窗口的内容加载
page.waitForSelector("#modal-content");
String modalText = page.textContent("#modal-content");
System.out.println("模态窗口内容: " + modalText);
// 关闭模态窗口
page.click("#close-modal");

2.2 模态窗口中的表单操作

示例：在模态窗口中填写表单并提交

page.click("#open-modal");
// 等待表单加载
page.waitForSelector("#modal-form");
page.fill("#modal-form #username", "testuser");
page.fill("#modal-form #email", "[e-mail]");
page.click("#modal-form button[type='submit']");

---

3 拖放操作与绘图板模拟

3.1 实现拖放操作

拖放操作在处理交互性强的页面时十分重要，例如拖拽文件、重排序列表等。

示例：拖放操作

// 定位拖放的起始元素和目标元素
Locator source = page.locator("#draggable");
Locator target = page.locator("#droppable");
// 执行拖放操作
source.dragTo(target);

3.2 在绘图板上模拟绘图

绘图板（Canvas）是一种 HTML 元素，用于实现图形绘制和用户绘图。本示例通过模拟鼠标事件绘制简单图形。

示例：在 Canvas 上绘制直线

page.navigate("https://example.com/drawing-board");// 获取 Canvas 的位置和尺寸
BoundingBox canvasBox = page.locator("#drawing-canvas").boundingBox();// 模拟绘制一条直线
page.mouse().move(canvasBox.x + 10, canvasBox.y + 10);
page.mouse().down();
page.mouse().move(canvasBox.x + 100, canvasBox.y + 100);
page.mouse().up();

---

4 自定义元素选择器

在某些复杂页面中，默认的选择器可能无法满足需求。Playwright 支持自定义选择器，帮助精准定位元素。

4.1 使用文本选择器

示例：通过文本内容选择元素

Locator button = page.locator("text=提交");
button.click();

4.2 使用 CSS 和 XPath

示例：通过 CSS 选择器定位元素

Locator element = page.locator("div.container > ul > li:nth-child(2)");
System.out.println("元素文本: " + element.textContent());

示例：通过 XPath 定位元素

Locator element = page.locator("xpath=//ul/li[contains(text(), '示例')]");
System.out.println("元素文本: " + element.textContent());

4.3 自定义选择器引擎

如果标准选择器无法满足需求，可以注册自定义选择器引擎。

示例：注册自定义选择器引擎

page.context().registerSelectorEngine("my-engine", new MySelectorEngine());
Locator customElement = page.locator("my-engine=my-selector");
customElement.click();

---

5 实际案例：复杂页面元素交互

案例描述：处理动态加载、弹窗和拖放操作的综合场景

1. 动态加载页面，等待加载完成。
2. 处理弹窗确认操作。
3. 拖放元素完成指定任务。

综合案例代码

page.navigate("https://example.com/complex-interaction");// 等待动态元素加载
page.waitForSelector("#dynamic-content");
System.out.println("动态内容: " + page.textContent("#dynamic-content"));// 触发并处理弹窗
page.onDialog(dialog -> {System.out.println("弹窗信息: " + dialog.message());dialog.accept();
});
page.click("#trigger-dialog");// 拖放操作
Locator draggable = page.locator("#draggable");
Locator droppable = page.locator("#droppable");
draggable.dragTo(droppable);
System.out.println("拖放完成");