4

When I run a Cypress test, every time the test executes some action the URL is shown in the Info Panel on the left. Unfortunately the URL is very long and it makes the Info Panel unreadable. Is there a way to hide to URL?

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

enter image description here

Paolo
  • 3,530
  • 7
  • 21
Hans Geber
  • 111
  • 8
  • what test? at the very least show us the test code. – hanshenrik Jan 05 '23 at 12:13
  • I can't show you the site, since it is not public. But basically cy.visit("www.very-long-url.com") would yield the same result. The whole URL is then logged in the info panel, but I wan't the URL to be hidden. And if I click on an element the URL shows up again – Hans Geber Jan 05 '23 at 16:10
  • @hanshenrik I made an example so you can see exactly what I mean – Hans Geber Jan 05 '23 at 16:24

1 Answers1

6

This feels a bit hacky - the gist is to watch for log changes and truncate the long ones.

You could make the criteria more precise to your needs, but this works

// top of the test, or in /cypress/support/e2e.js

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) + '...'
  }
})

enter image description here

Paolo
  • 3,530
  • 7
  • 21
  • oh that's a great idea, unfortunately I get the following error trying to use it for "[...logs]": Type 'NodeListOf' is not an array type – Hans Geber Jan 06 '23 at 08:09
  • 1
    That's why I use `[...logs]`, it converts the NodeList to an array. If it's Typescript giving you the error, `logs.item(logs.length - 1)` is an alternative that should be type-safe. Ref [Web/API/NodeList/item](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item) – Paolo Jan 06 '23 at 09:03