Cypress

Cypress

Table of Contents

Test. Automate. Accelerate.

With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds.

That’s what they say!

Installing Cypress

For linux systems Cypress needs extra packages.

System Requirements

They have added other distros than Fedora lol!

But they had a command with dnf so I have installed these packages

sudo dnf install -y xorg-x11-server-Xvfb gtk3-devel nss alsa-lib

After this I need to have some sort of Node based project so that Cypress can be installed on it.

Inside a project

yarn add cypress --dev

I did felt that Cypress must be a big package. I guess it was about 210MB

Open the App

yarn cypress open

alt text

It’s an app!

Just read and Continue, the first wizard will create a cypress directory having files.

alt text

I guess that would be it.

This opened up another window, I think that’s Electron!

Let’s play

alt text

I create a Cypress test file via this:

alt text

If you choose a file suppose /app/page.tsx

it will create /app/pageHome.cy.tsx for you alt text

Component Testing

Okay So I added :


import React from 'react'
import DatingProfileForm from './page'

describe('<DatingProfileForm />', () => {
  it('renders', () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(<DatingProfileForm />)
      cy.get("h2").should("have.text", "Find Love");
  })
})

alt text

alt text

Well when I create form using Transformer so I created test file with it too!!

This was cool introduction.

I liked how it tested the file!

My repo here

And yes, Happy new Year!!

Tags :