如何在Cypress Info Panel中隐藏过长的URL？

有几种实用方法可以解决这个问题：

方法一：自定义命令覆盖，替换日志内容 #

通过重写cy.visit等命令，自定义日志显示的简短内容，替换冗长的URL：

在cypress/support/commands.js文件中添加以下代码：

// 覆盖cy.visit命令，自定义日志信息
Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => {
  // 自定义日志，只显示简短提示
  if (options.log !== false) {
    Cypress.log({
      name: 'visit',
      message: '加载目标页面', // 替换成你需要的简短描述
      consoleProps: () => ({
        完整URL: url // 控制台仍可查看完整URL，不影响调试
      })
    })
  }
  // 执行原visit逻辑，关闭默认日志
  return originalFn(url, { ...options, log: false })
})

// 若点击操作也显示长URL，可同理覆盖cy.click
Cypress.Commands.overwrite('click', (originalFn, subject, options = {}) => {
  if (options.log !== false) {
    Cypress.log({
      name: 'click',
      message: '点击目标元素',
      consoleProps: () => ({
        元素选择器: subject.selector
      })
    })
  }
  return originalFn(subject, { ...options, log: false })
})

方法二：通过CSS直接隐藏URL元素 #

如果只是想在UI层面隐藏长URL，可在cypress/support/index.js中注入样式：

// 在测试加载时注入CSS，隐藏Info Panel中的URL显示
cy.on('window:before:load', (win) => {
  const style = win.document.createElement('style')
  style.textContent = `
    /* 匹配Info Panel中的URL元素 */
    .command-container .command-info__url {
      display: none !important;
    }
  `
  win.document.head.appendChild(style)
})

方法三：直接关闭命令日志（不推荐） #

如果完全不需要该命令的日志，可在调用时关闭日志输出：

describe('Test', () => {
    it('load page', () => {
        cy.visit("https://ultimateqa.com/automation", { log: false })
        cy.get('.et_pb_text_inner > ul > :nth-child(3) > a').click({ log: false })
    })
})

这种方式会完全隐藏命令的所有日志信息，不利于调试，仅适合无需日志的场景。

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