Giter Club home page Giter Club logo

cy2e's Introduction

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');
})

Basic Test Case: 'it should work'

test-video-example.mp4

Status

Docker Image CI

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

cy2e's People

Contributors

dependabot[bot] avatar kylejeske avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.