Cypress Tips September 2022

Safari WebKit browser support, Studio is back, and online training

Hi there, Cypress users,

The past 4 weeks have been a non-stop feed of Cypress feature releases and fixes. The main story this month is the long-anticipated Safari WebKit browser support. I still have not played with it, but here is my challenge to you: if you find an issue that only shows up in the WebKit browser but not in Chrome/Electron, send it to me, because I doubt it will be helpful to run all your tests in Chrome AND WebKit browsers.

Cypress Studio is back in version 10.7.0. I have been recording a few tests myself, trying to understand how I would recommend using Studio. Right now, I think you can record the actions (with some quirks), but you still have to sprinkle meaningful assertions into the generated test code to create a solid test.

Training

Sometimes I get messages / emails / tweets / letters like this one asking me about Cypress learning resources:

I am eager to learn Cypress for Automation purposes. It would be of great help if you could share some resources with me which could help me learn Cypress from Beginner to Advanced Level.

Here is my advice to everyone:

• read Cypress documentation at https://docs.cypress.io/. There are lots of guides introducing Cypress, explaining its philosophy, showing how to install it, writing your first test, etc.

• browse through the tutorials at https://learn.cypress.io/ and free and paid courses at https://on.cypress.io/courses.

• attend my Cypress workshop at the “Testing For Good” event in October by registering at https://hopin.com/events/testing-for-good-workshops/registration

  

• to progress beyond the Cypress basics to an advanced level, I recommend taking my paid advanced hands-on Cypress courses available at https://cypress.tips/courses

Component Testing

Recently I taught people Angular Component testing using Cypress. As I wrote more and more tests, I realized how little Angular / React / Vue / Svelte code one had to write to mount the component and test it. You just mount it and pass properties, and then use standard Cypress commands, nothing framework-specific about it. Here is a typical component test passing a service object to the navigation component. You can understand what the test does even if you have never coded Angular!

import { NavComponent } from './nav.component'
import { SigninService } from '../signin.service'

describe('NavComponent', () => {
  it('should create and show the links', () => {
    const signinService = new SigninService()
    cy.spy(signinService, 'login').as('login')
    cy.spy(signinService, 'logout').as('logout')
    cy.mount(NavComponent, {
      componentProperties: {
        signinService,
      },
    })

    cy.contains('a', 'HOME')
    cy.contains('button', 'LOG IN').should('be.visible').wait(1000).click()
    cy.get('@login').should('have.been.called')

    cy.contains('a', 'HOME')
    cy.contains('a', 'PROFILE').should('be.visible')
    cy.contains('button', 'LOG OUT').should('be.visible').wait(1000).click()
    cy.get('@logout').should('have.been.called')

    cy.contains('a', 'HOME')
    cy.contains('button', 'LOG IN').should('be.visible')
  })
})

The above test comes from my blog post “Cypress Component Testing vs Angular Test Harness“, and comparing the Cypress version against Karma/TestBed tests is instructive.

Wow, Cypress component testing really makes the tests simple, doesn’t it? By the way, the code screenshots of “test using X vs test using Cypress” were inspired by Murat Ozcan tweets showing MSW / RTL / Jest tests vs Cypress React component tests:

PS: Murat had his own corner in July’s newsletter, but he has since moved to the shed outside to finish his e-book on React testing using Cypress, so wish him luck.

Don’t be these people

If Murat is my hero, then here is a funny example NOT to follow. A while ago, a company wanted to get some buzz about itself by posting a provocative (and just plain weird “Cypress cannot test tables”) post titled “Cypress is dead”:

A company with a name that reminds you of rigor mortis calling another successful open source tool “dead” is rich enough, but here is the kicker. Recently, I got the following private message:

I am still waiting for a follow-up.

Don’t be this person and company. Instead of bringing other projects down, learn from others and celebrate their success. Let the users compare the tools and their features. The users will be more objective, and you will not come off as a jerk.

For example, Cypress WebKit support uses the Playwright’s WebKit browser 🎉 The initial implementation came from a user’s pull request 🎉🎉. Now everyone is happy 🎉🎉🎉

Happy testing!