如何在Cypress中读取剪贴板内容并访问动态生成的测试链接

问题原因 #

{Ctrlv}是Cypress type() 命令专属的按键模拟占位符，仅在模拟用户输入场景下生效，不能直接作为cy.visit()的参数使用，因此你的写法无法生效。

可行实现方案 #

方案1：直接读取剪贴板内容（推荐）

首先修改Cypress全局配置，授予浏览器剪贴板读取权限，避免访问被拦截：

// cypress.config.js （旧版Cypress对应修改cypress.json）
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    // 你原有配置保持不变
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        // 全局授予剪贴板读写权限
        launchOptions.preferences.default['profile.content_settings.exceptions.clipboard'] = {
          'http://*,*': { setting: 1 },
          'https://*,*': { setting: 1 }
        }
        return launchOptions
      })
    },
    // 如果访问的链接跨域，需要开启如下配置
    experimentalSessionAndOrigin: true
  },
})

在复制链接的操作完成后，直接读取剪贴板内容调用访问：

// 你的复制操作代码执行完成后
cy.wait(100) // 可选，加短等待避免时序问题，确保链接已写入剪贴板
cy.window().then(async win => {
  const targetUrl = await win.navigator.clipboard.readText()
  cy.visit(targetUrl)
  // 后续加页面验证逻辑，比如校验页面元素、标题是否符合预期
  cy.get('body').should('be.visible')
})

方案2：模拟粘贴到临时输入框读取（无需改全局配置）

如果不想修改全局配置，可以在页面临时插入输入框，模拟粘贴操作后读取内容：

// 你的复制操作代码执行完成后
cy.wait(100)
// 插入临时隐藏输入框
cy.document().then(doc => {
  const tempInput = doc.createElement('input')
  tempInput.style.opacity = 0
  tempInput.id = 'temp-paste-input'
  doc.body.appendChild(tempInput)
})
// 模拟粘贴操作
cy.get('#temp-paste-input').focus().type('{ctrl+v}')
// 读取输入框内容访问
cy.get('#temp-paste-input').invoke('val').then(targetUrl => {
  cy.visit(targetUrl)
  // 页面验证逻辑
  cy.get('body').should('exist')
})
// 用完删除临时输入框
cy.get('#temp-paste-input').invoke('remove')

内容的提问来源于stack exchange，提问作者ItsNotAndy