selenium - 使用 Selinum + Capybara 模拟剪贴板复制/粘贴

Question

我的前端用户界面中有一个“复制链接”按钮。单击时，输入框中的 URL 会使用以下 JS 复制到用户的剪贴板:

const copyTextarea = document.querySelector("#copy-link-button");
copyTextarea.focus();
copyTextarea.select();
document.execCommand('copy');

当我在本地尝试时，此功能运行完美，因此我知道该功能本身运行正常。

但是我无法用 capybara 测试副本。我从this post知道Capybara 不提供剪贴板 API，但我的解决方法是 -

1. 使用“复制链接”按钮复制链接
2. 导航到其他输入/文本字段
3. 使用 CTRL+V 粘贴到字段中并读取字段内容进行验证

我的测试:

# Copy the link
page.find("#copy-link-button").click
wait_for_ajax

# Visit some other page that I know has an input/text field
visit account_settings_path

input = page.find("#user_email")

# Clear the field
fill_in("user[email]", with: "")

# Paste in the contents of the clipboard
input.base.send_keys([:control, "v"])

# Validate
expect(input.value).to eq("some value");

但是，没有任何内容粘贴到该输入中(input.value 和 input.text 返回 "")。

这是一种有效的方法吗？这里的问题是首先复制文本还是我在粘贴数据时出错了？

谢谢!

Answer 1

注意:由于此 Chrome 的原始发布已更改可用的权限类型。对于 headless 解决方案，请访问 https://chromedevtools.github.io/devtools-protocol/tot/Browser/#type-PermissionType查看当前可用的权限类型

<小时/>

关于访问剪贴板内容有很多安全规则，因此尝试从 Capybara 进行粘贴确实是一项令人沮丧的练习。此外，当 ctrl/command v 作为击键发送时，大多数浏览器实际上不会执行任何操作，因为它是系统触发的操作而不是浏览器。

但是，由于您只想验证复制是否有效，因此实际上不需要触发粘贴，因此您只需绕过使用剪贴板 API 的权限要求即可。如果您使用的是 Chrome(在非 headless 配置中 - 目前无法 headless 工作)，您可以通过在驱动程序注册中设置 profile.content_settings.exceptions.clipboard 首选项

Capybara.register_driver :chrome do |app|
  options = Selenium::WebDriver::Chrome::Options.new
  options.add_preference('profile.content_settings.exceptions.clipboard', {
    '*': {'setting': 1}
  })
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

如果您在 headless 模式下运行，并在 Chrome 中使用最新的 Capybara 和 selenium，另一个选择是使用 CDP 授予权限

page.driver.browser.execute_cdp('Browser.grantPermissions', origin: page.server_url, permissions: ['clipboardRead', 'clipboardWrite'])

确定权限后，您可以使用evaluate_async_script访问剪贴板数据

clip_text = page.evaluate_async_script('navigator.clipboard.readText().then(arguments[0])')

注释:

1. 无需使用base在元素上调用send_keys，只需在元素上调用即可
2. expect(input.value).to eq("some value") 将导致片状测试，相反，您应该使用 Capybara 提供的匹配器，例如 expect(page).to have_field (with: 'some value') 或 expect(input).to match_selector(:field, with: 'some value')