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