Cypress Testing

Joshua Burke

@high_rigour

Github/dangeranger

What is Cypress?

  • Open source end to end test runner

  • Fully featured and integrated

  • Runs within the browser process

  • Test recording and live viewing

  • Pause and debug of tests

Installation


$ cd ~/code/my_project

$ npm init -y

$ npm install cypress --save-dev

> cypress@2.1.0 postinstall /Users/joshua/node_modules/cypress
> node index.js --exec install

Installing Cypress (version: 2.1.0)

 βœ”  Downloaded Cypress
 βœ”  Unzipped Cypress
 βœ”  Finished Installation /Users/joshua/node_modules/cypress/dist/Cypress.app

You can now open Cypress by running: node_modules/.bin/cypress open

Recorded Demo

Live Demo

Fingers crossed

Simple Smoke Test


describe('First Smoke Test', function () {
  it('Does not catch fire', function () {
    expect(true).to.equal(true);
  });
});
$ node_modules/.bin/cypress open

GET /__/ 200 38.576 ms - -
GET /__cypress/runner/cypress_runner.css 200 53.883 ms - -
GET /__cypress/runner/cypress_runner.js 200 437.514 ms - -
GET /__cypress/static/favicon.ico 200 21.566 ms - -
GET /__cypress/runner/fonts/fontawesome-webfont.woff2?v=4.7.0 200 4.311 ms - 77160
GET /__cypress/iframes/integration/sample_spec.js 200 662.715 ms - 725
GET /__cypress/tests?p=cypress/integration/sample_spec.js-875 200 1912.382 ms - 784
GET /__cypress/tests?p=cypress/support/index.js-698 200 1986.731 ms - -

Simple Smoke Test

Nothing Exploded!

πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ
πŸ”₯πŸ”₯πŸ”₯\(^ ^)/πŸ”₯πŸ”₯πŸ”₯

πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ πŸŽ‰πŸŽŠ

  • Chrome Browser launched
  • Selected Tests Ran
  • Resulting Report Shown

Expected

Handling Failures

Arrange Act AssertΒ 


describe('Arrange Act Assert', () => {
  it('Finds an element', () => {
    // Arrange - set up the initial application state
    //   - visit a web page
    //   - query for an element
    cy.visit('https://example.cypress.io');

    // Act - take an action on the state
    //   - interact with that element
    cy.contains('type').click();

    // Assert - make an assertion on the new state
    //   - assert an expectation about the page content
    cy.url().should('include', '/commands/actions');
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');
  })
});

Pause & Debug

Continuous Integration

End to End Testing with Cypress

By Joshua Burke

End to End Testing with Cypress

Installing, configuring, and running Cypress for end to end tests.

  • 624