本教程将详细介绍如何在 laravel dusk 自动化测试中管理浏览器权限，特别是处理如剪贴板访问等需要用户授权的场景。通过利用 chrome devtools driver 的 `browser.grantpermissions` 命令，开发者可以编程化地授予测试所需的权限，从而确保测试流程顺畅进行，避免因权限弹窗而中断测试。
自动化测试中的浏览器权限挑战
在进行 Web 应用程序的自动化测试时，经常会遇到浏览器权限相关的挑战。许多现代 Web 功能，如访问剪贴板、获取地理位置、发送桌面通知或使用摄像头/麦克风，都需要用户显式授权。在手动测试中，用户可以轻松点击弹窗进行授权，但在自动化测试框架（如 Laravel Dusk）中，这些交互式弹窗会中断测试流程，导致测试失败。
Laravel Dusk 基于 Selenium WebDriver，默认情况下无法直接与这些权限弹窗进行交互。为了解决这一问题，我们需要一种编程方式来预先授予或拒绝这些权限，从而确保测试能够无缝执行。
核心解决方案：利用 Chrome DevTools Driver
对于基于 Chrome 浏览器的 Dusk 测试，我们可以利用 Chrome DevTools Protocol (CDP) 来直接控制浏览器行为，包括管理权限。Facebook\WebDriver\Chrome\ChromeDevToolsDriver 类提供了与 CDP 交互的接口，允许我们执行各种低级浏览器命令。
其中，Browser.grantPermissions 命令是专门用于授予特定权限的。通过这个命令，我们可以模拟用户授权行为，让浏览器在测试开始前就拥有所需的权限，从而避免权限弹窗的出现。
实现权限授予方法
为了方便在测试用例中复用，建议在 DuskTestCase 类中添加一个辅助方法来封装权限授予逻辑。
首先，确保你的 DuskTestCase 类中导入了 ChromeDevToolsDriver：
driver;
// 创建 ChromeDevToolsDriver 实例，用于与 CDP 交互
$devtools = new ChromeDevToolsDriver($driver);
// 构建 DevTools 命令参数
$params = [
"permissions" => $permissions,
];
// 如果指定了 origin，则添加到参数中
if ($origin !== null) {
$params["origin"] = $origin;
}
// 执行 Browser.grantPermissions DevTools 命令
$result = $devtools->execute('Browser.grantPermissions', $params);
return $result;
} catch (\Exception $e) {
// 捕获异常，例如驱动不支持 DevTools 命令或参数错误
echo "Error granting permissions: " . $e->getMessage() . "\n";
return null;
}
}
// ... 其他方法
}
代码解析：
- use Facebook\WebDriver\Chrome\ChromeDevToolsDriver;: 导入用于与 Chrome DevTools 协议交互的类。
- $driver = $browser->driver;: 从当前的 Dusk Browser 实例中获取底层的 WebDriver 实例。这是与浏览器进行低级交互的关键。
- $devtools = new ChromeDevToolsDriver($driver);: 使用获取到的 WebDriver 实例初始化 ChromeDevToolsDriver。
-
$devtools->execute('Browser.grantPermissions', $params);: 这是核心操作。它调用了 Chrome DevTools 协议中的 Browser.grantPermissions 命令。
- 'Browser.grantPermissions'：指定要执行的 DevTools 命令名称。
- $params：一个关联数组，包含了命令所需的参数。
- "permissions"：一个字符串数组，列出了要授予的权限名称。例如，"clipboardReadWrite" 和 "clipboardSanitizedWrite" 用于剪贴板访问。
- "origin" (可选)：指定权限作用的 URL 源。如果不提供，通常会作用于当前页面的源。
- try...catch 块: 用于捕获在执行 DevTools 命令时可能发生的任何异常，增加了方法的健壮性。
在 Dusk 测试用例中应用
一旦 grantPermission 方法被添加到 DuskTestCase 类中，你就可以在任何 Dusk 测试用例中调用它来授予所需的权限。
以下是一个测试剪贴板功能的示例：
browse(function (Browser $browser) {
// 在执行需要剪贴板访问的操作之前，授予剪贴板读写权限
$this->grantPermission($browser, ["clipboardReadWrite", "clipboardSanitizedWrite"]);
// 导航到需要测试的页面
$browser->visit('/some-page-with-copy-button')
->assertSee('复制链接');
// 模拟点击复制按钮
$browser->click('#copy-link-button');
// 验证剪贴板内容（这通常需要JavaScript来读取）
// 例如，你可以执行JS来读取剪贴板内容并进行断言
$clipboardContent = $browser->script('return navigator.clipboard.readText();')[0];
$this->assertEquals('期望的链接内容', $clipboardContent);
// 或者，如果你的应用有UI反馈，可以断言UI变化
$browser->assertSee('链接已复制！');
});
}
}
在这个示例中，$this->grantPermission($browser, ["clipboardReadWrite", "clipboardSanitizedWrite"]); 会在测试导航到页面并尝试点击复制按钮之前，确保浏览器已经拥有了访问剪贴板的权限，从而避免了权限弹窗的干扰。
常见浏览器权限及其 DevTools 命令
除了剪贴板访问，Browser.grantPermissions 命令还可以用于管理其他多种权限。以下是一些常见的权限类型：
- 剪贴板访问: clipboardReadWrite, clipboardSanitizedWrite
- 地理位置 (Geolocation): geolocation
- 通知 (Notifications): notifications
- 摄像头 (Camera): camera
- 麦克风 (Microphone): microphone
- 媒体设备 (Media Devices): mediaDevices (通常涵盖摄像头和麦克风)
- 显示器捕获 (Screen Capture): displayCapture
你可以在 Chrome DevTools Protocol 文档中查找更详细的权限列表和相关命令。
注意事项与最佳实践
- 权限作用域 (Origin): Browser.grantPermissions 命令的权限通常是针对特定的 origin (即 URL 的协议、域名和端口) 生效的。在 grantPermission 方法中添加 origin 参数可以更精确地控制权限的作用范围。如果你的测试涉及到多个不同的源，你可能需要为每个源单独授予权限。
- 浏览器兼容性: ChromeDevToolsDriver 顾名思义，是专门用于 Chrome 浏览器的。如果你需要在其他浏览器（如 Firefox）中运行 Dusk 测试并管理权限，你需要寻找对应浏览器驱动提供的类似功能或使用其特定的 DevTools 协议接口。
- 测试隔离: 建议在每个需要特定权限的测试用例中明确调用 grantPermission 方法。这有助于确保测试的独立性和可重复性，避免一个测试的权限设置影响到另一个测试。
- 权限撤销: 在某些高级场景下，你可能需要在测试完成后撤销权限，以确保浏览器状态的纯净。Browser.revokePermissions 命令可以用于此目的，但通常在大多数自动化测试中并不常用。
- 错误处理: 确保你的 grantPermission 方法包含适当的错误处理，以便在 DevTools 命令执行失败时能够及时发现问题。
总结
通过利用 Laravel Dusk 与 ChromeDevToolsDriver 的结合，开发者能够有效地管理自动化测试中遇到的浏览器权限问题。Browser.grantPermissions 命令提供了一个强大且灵活的机制，允许我们编程化地控制浏览器行为，从而确保测试流程的顺畅和可靠性。掌握这一技术，将大大提升 Laravel Dusk 在测试复杂 Web 应用时的能力和效率。
