cy2e

What

Visual unit and integration testing for web-based applications.

Example

Test Case 1 - Load a webpage with the an anchor element that says 'Learn React'

• Load a hosted page at http://localhost:3000
• Verify there is an HTML element 'anchor'
• Verify that the anchor has a text value of 'Learn React'

Basic Test Case

it('should work', () => {
	cy.visit('http://localhost:3000');
	cy.get('a').should('have.text', 'Learn React');
})

test-video-example.mp4

---

Status

How

Using command line interface:

(extends yarn)

Commands

yarn run

    - build
        react-scripts build
    - cypress:open
        npm run cypress:start:wait -- "cypress open"
    - cypress:run
        npm run cypress:start:wait -- "cypress run"
    - cypress:start:app
        BROWSER=none react-scripts -r @cypress/instrument-cra start
    - cypress:start:wait
        start-server-and-test cypress:start:app http://localhost:3000
    - eject
        react-scripts eject
    - start
        react-scripts start

---

Extending Tests with Video Record Playback

yarn run cypress run --record --key af144ab3-4d1b-41f5-813e-92b36c586c7d

Adding recording to package.json

a) Include the ENV variable inline inside the package.json file:

"cypress:run": "CYPRESS_RECORD_KEY='af144ab3-4d1b-41f5-813e-92b36c586c7d' npm run cypress:start:wait -- \"cypress run --record\"",

b) Set it globally, via

export CYPRESS_RECORD_KEY='af144ab3-4d1b-41f5-813e-92b36c586c7d'

---

Running baseline test with video recording

$ yarn run cypress run --record
$ cy2e/cyp-cra/.bin/cypress run --record
yarn run v1.22.5

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    6.2.0                                                                              │
  │ Browser:    Electron 87 (headless)                                                             │
  │ Specs:      1 found (app.spec.tsx)                                                             │
  │ Params:     Tag: false, Group: false, Parallel: false                                          │
  │ Run URL:    https://dashboard.cypress.io/projects/7bhvns/runs/1                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  app.spec.tsx                                                                    (1 of 1)


  ✓ should work (334ms)

  1 passing (523ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     app.spec.tsx                                                                     │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF                                                     
  -  Finished processing: cy2e/cyp-cra/cypress/videos/a    (0 seconds)
                          pp.spec.tsx.mp4                                                           


  (Uploading Results)

  - Done Uploading (1/1) cy2e/cyp-cra/cypress/videos/app.spec.tsx.mp4

====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.spec.tsx                             521ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        521ms        1        1        -        -        -  


───────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                       
  Recorded Run: https://dashboard.cypress.io/projects/7bhvns/runs/1                                    

✨  Done in 20.05s.

---

Code Coverage