Cypress 按事件类型过滤日志

Question

这是我的问题：我有一个大表单，我想在其中执行 e2e 测试。当用户更改其字段中的值时，此表单会填充 URL 查询参数。

当我使用 Cypress 来检查它时，每次在表单中输入内容时，它都会生成大量日志（例如（新 URL）见下文），使得测试难以阅读。

http://localhost:3000/demande-immersion?email=&firstName=Archib&lastName=&phone=&financiaryHelp=&emergencyContact=&emergencyContactPhone=&birthdate=&agencyDepartment=86&siret=&businessName=&businessAdvantages=&etFirstName=&etLastName=&etJob=&etPhone=&etEmail=&erFirstName=&erLastName=&erPhone=&erEmail=&immersionAddress=&agencyId=1411b4b7-a7a8-4d69-92ac-1eca1ac75c50&immersionActivities=&immersionSkills=&sanitaryPreventionDescription=&workConditions=&dateStart=2023-04-27&dateEnd=2023-04-28&schedule=%7B%22totalHours%22%3A14%2C%22workedDays%22%3A2%2C%22isSimple%22%3Atrue%2C%22selectedIndex%22%3A0%2C%22complexSchedule%22%3A%5B%7B%22date%22%3A%222023-04-27T00%3A00%3A00.000Z%22%2C%22timePeriods%22%3A%5B%7B%22start%22%3A%2208%3A00%22%2C%22end%22%3A%2212%3A00%22%7D%2C%7B%22start%22%3A%2213%3A00%22%2C%22end%22%3A%2216%3A00%22%7D%5D%7D%2C%7B%22date%22%3A%222023-04-28T00%3A00%3A00.000Z%22%2C%22timePeriods%22%3A%5B%7B%22start%22%3A%2208%3A00%22%2C%22end%22%3A%2212%3A00%22%7D%2C%7B%22start%22%3A%2213%3A00%22%2C%22end%22%3A%2216%3A00%22%7D%5D%7D%5D%7D

有没有办法过滤 Cypress 登录应用程序的事件（使用cypress open）？

Answer 1

您可以使用删除 fetch 和 xhr

cy.intercept({ resourceType: /xhr|fetch/ }, { log: false })

请参阅代理日志记录

it('can disable fetch logs', () => {
  const logs: any[] = []

  cy.intercept({ resourceType: 'fetch' }, { log: false }).as('fetch')
    .then(() => {
      cy.on('log:added', (log) => {
        if (log.name !== 'request') return
          logs.push(log)
      })

      return fetch(`/foo?${Date.now()}`)
    })
    .wait('@fetch')
    .then(() => {
      expect(logs).to.have.length(0)
    })
  })
})

如果您想删除命令或查询，请{log: false}逐案使用或全局覆盖命令，这将从日志中删除网络流量。

您还可以按照此答案截断长条目在赛普拉斯信息面板中隐藏 URL

Cypress.on('log:changed', (log, interactive) => {
  const logs = window.top.document.querySelectorAll('.command-message-text')
  const last = [...logs][logs.length - 1]
  if (last.innerText.length > 20) {
    last.innerText = last.innerText.slice(0, 20) + '...'
  }
})