Install Cypress for Mac, Linux, or Windows, then get started.

cd /your/project/path

then

npm install cypress --save-dev

or

yarn add cypress --dev

Make sure that you have already run npm init or have a node_modules folder or package.json file in the root of your project to ensure cypress is installed in the correct directory.

Open cypress with the following command inside your project file :

node_modules/.bin/cypress open

then, if it's your first time, you must see the message :

➜  cypress-workshop-Epitech git:(main) ✗ node_modules/.bin/cypress open
It looks like this is your first time using Cypress: 9.2.1

✔  Verified Cypress! /Users/your-name/Library/Caches/Cypress/9.2.1/Cypress.app

Opening Cypress...

Now, check some sample test files that demonstrate key Cypress concepts to help you get started.

Assuming you've successfully installed the Test Runner and opened the Cypress app, now it's time to write our first test. We're going to:

• Create a sample_spec.js file.
• Watch Cypress update our list of specs.
• Launch the Cypress Test Runner.

Let's create a new file in the cypress/integration folder that was created for us:

touch {your_project}/cypress/integration/sample_spec.js

Once we've created that file, we should see the Cypress Test Runner immediately display it in the list of Integration Tests. Cypress monitors your spec files for any changes and automatically displays any changes.

Even though we haven't written any tests yet - that's okay - let's click on sample_spec.js and watch Cypress launch your browser.

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
  })
})

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    
    cy.contains('type')
  })
})

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    
    cy.contains('type').click()
  })
})

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    
    cy.contains('type').click()

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it and verify that the value has been updated
    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value', '[email protected]')
  })
})

In addition to having a helpful UI, there are also special commands dedicated to the task of debugging.

For instance there is:

• cy.pause()
• cy.debug()

Youssra El-Ajli : [email protected]
Hugo Suzanne : [email protected]