Anyone who has ever started programming knows the situation. You write a component that works at first sight, but then has a lot of bugs when you use it. In the development phase this is quite natural, but if the application is handed over to a customer without much testing, so the big bang is not far away.
Now you sit there and have to test several 1000 elements, which affect every changes. Repeating tests several times is time-consuming and nerve-racking.
But fortunately there is the test framwork Cypress, which was developed especially for Web application.
The special thing about Cypress is that everything runs automatically. Manual clicking is a thing of the past.
You can read a detailed feature description at: https://docs.cypress.io/guides/overview/why-cypress.html#Our-mission
Start with Cypress
Install Cypress
First of all, we navigate to our project folder in the terminal and then install all the necessary packages there.
$ cd/your/project/pathnpm:
$ npm install cypress --save-devyarn:
$ yarn add cypress --devOpen Cypress
npm:
$ npx cypress openyarn:
$ yarn run cypress openCypress User Interface
The main menu should look something like this:
As you can see, the tool already provides many finished examples. To check if everything works, you can simply click on a sample test and a new window will open where the test will be executed.
The Cypress Test-Runner opens and should look something like this:
The First Steps
In this section I will give you a short summary what you should know for the start.
1. create a test file
- All test files come in the folder: cypress/intergration
- naming convention: fileName_spec.js or fileName.spec.js
- describe(), it(), context() and specify() contain the actual test and you can also use them to structure your test and give it a name.
File structure in an example:
// -- Start: Our Application Code --
function add (a, b) {
return a + b
}
// -- End: Our Application Code --
// -- Start: Our Cypress Tests --
describe('Unit test our math functions', function() {
context('math', function() {
it('can add numbers', function() {
expect(add(1, 2)).to.eq(3)
})
})
// -- End: Our Cypress Tests --2. Write test
As soon as you have created the test file, Cypress automatically updates the test list and your test should be selectable in the menu.
This section shows the basic functions.
Visit the test website: cy.visit()
This function checks the link and returns a true if a 2XX status like 200 is returned. Otherwise a false is returned and the test fails.
describe('My First Test', function() {
it('Test PHMU Website', function() {
cy.visit('https://www.phmu.de/')
})
})
- As you can see, the functions in the command log are displayed as uppercase letters. Here in our example VISIT.
- A click on it, the addressed element is visually displayed in function.
- All tests are displayed as a timeline and you can “jump back” the time and see exactly when and where the test failed or invoked.
Query elements
In Cypress we can query and pick an element from our test website . if it exist a true will be retrun
The common functions for this are:
contains(content) – Returns the DOM element containing the corresponding innerText..
describe('My First Test', function() {
it('Test PHMU Website', function() {
cy.visit('https://www.phmu.de/')
})
it('Test contain PHMU slogan', function() {
cy.contains('Unser Herz schlägt digital')
})
})
get(selector) – Returns the DOM element selected with the selector.
describe('My First Test', function() {
it('Test PHMU Website', function() {
cy.visit('https://www.phmu.de/')
})
it('Test contain PHMU slogan', function() {
cy.get('img[class=image]')
//Sucht ein img element mit der CSS-Klasse image
})
})
Interacting with Elements
After you have queried the elements in the previous step, it is also possible to interact with the elements. If interaction with an element is not possible, the test will be displayed as failed.
type()
describe('My First Test', function() {
it('Test contact formular', function() {
cy.visit('https://www.phmu.de/workshops')
})
it('Test firstname input', function() {
cy.get('input[id="firstname"]').type('Tung')
})
})click()
describe('My First Test', function() {
it('Test contact formular', function() {
cy.visit('https://www.phmu.de/workshops')
})
it('Test firstname input', function() {
cy.get('button[id="submit"]').click()
})
})select()
describe('My First Test', function() {
it('Test contact formular', function() {
cy.visit('https://www.phmu.de/workshops')
})
it('Test firstname input', function() {
cy.get('select[id="title"]').select("Doctor")
})
})Assertion
With should() you can check if an element is what you expect it to be. As an example, we want to make sure that the current URL is the expected URL.
describe('My First Test', function() {
it('Test PHMU Website', function() {
cy.visit('https://www.phmu.de/')
})
it('Test workshop link', function() {
cy.get(a[href="/workshop"]).click
cy.url().should('include', '/workshop')
})
})In this blog I have only given you the most necessary information for Cypress. Cypress is too big to put everything in one blog.
As I have already mentioned, I highly recommend you to read the documentation. Besides the good documentation it also contains Best Practices to test effectively.
