Cypress Tip: Get the Cypress Dashboard App

Mike Cataldo — Wed, 03 Feb 2021 17:04:36 +0000

If you're familiar with the Cypress Dashboard, you might immediately suspect that I'm clickbaiting you, but stay with me!

In Chrome, there's a way to add shortcuts to ordinary sites (like dashboard.cypress.io) as "apps". Firefox calls these "site-specific browsers" but sadly they're dropping SSB and PWA support, while other Chromium-based browsers are making it more of a mainstay. Edge on Windows supports this feature and will soon allow you to manage/uninstall those apps just like native ones.

Why would we do this? If you're like me, you check on runs frequently throughout the day. You also have a lot of apps and Chrome tabs - like the dashboard - open (because you're uber-productive). Hunting around for the dashboard either takes longer than it should or you have to navigate there every time.

Do this now (trust me):

Open the Cypress Dashboard in Chrome
At the top right, click More (⋮)
Click More Tools
Click Create shortcut
Input Cypress Dashboard as the name for the shortcut
Check the Open as window checkbox
Click Create

Now getting to the Cypress Dashboard is as easy as opening and switching apps!

If you're not familiar with the Dashboard or if you haven't used it in a while, I suggest giving it a try - at least on the free tier. Check out the FAQ if you have a question. Cypress has been making a ton of improvements on it as of late (and more on the way), so it's a worthy investment. I love it!

Cypress Tip: In-Spec Functions

Mike Cataldo — Wed, 03 Feb 2021 17:00:04 +0000

Let's imagine you have a bunch of repeatable code in your tests:

it('should do this thing', () => {
  // ...
  cy.get('#thisElement')
    .then($el => {
      // some unusual hackery here
    })
  // ...
})
it('should do that thing', () => {
  // ...
  cy.get('#thatElement')
    .then($el => {
      // some unusual hackery here
    })
  // ...
})
it('should do another thing', () => {
  // ...
  cy.get('#anotherElement')
    .then($el => {
      // some unusual hackery here
    })
  // ...
})

What a mess, right? You might be tempted to immediately break this out into a custom command...

it('should do this thing', () => {
  // ...
  cy.get('#thisElement')
    .doSomething()
  // ...
})

...but it's not necessarily the best solution for a number of reasons. The alternative? I'm calling it an in-spec function. It's an abstraction in the form of a hoisted function contained in the spec file:

describe('some feature', () => {
  it('should do this thing', () => {
    // ...
    cy.get('#thisElement')
      .then(doSomething)
    // ...
  })
    // ...
})
function doSomething($el) {
  // some unusual hackery here
}

Here's why you might want to use an in-spec function:

Like an abstraction into a custom command, this will make your tests much easier to reason about, but if it's only required in a single spec, why bother with a command when you can use plain JavaScript?
It's hoisted from the bottom so that it's out of the way, but because it's in the spec, it's easier to access in the event you need to debug, update or refactor it.
If you need this function outside the spec, it's likely easier to prototype it as an in-spec function first. Then when it's working the way you want, you can convert it to a command.

DEV Community: iheartjs

Cypress Tip: Get the Cypress Dashboard App

Cypress Tip: In-Spec Functions