Cypress and Applitools
A Solid combination for visual E2E testing.
Earlier I have used Python with Selenium, this time I decided to try out two new tools: Cypress to automate and test in a browser and Applitools for visual testing. The end result is a test on a calendar of events in less than 40 lines of code.
System under test
The National Museum Of Agriculture in Czech Republic is a wonderful place and I have enjoyed the tractor exhibition, the farmer’s market and the view from the museum roof garden. The museum describes their mission very succinctly on their homepage
For a hundred years we have been collecting documents on agriculture as one of humankind’s most important activities, which fundamentally changed human society
I am testing the capabilities of the museum events calendar and asserting that the filter for Prague events during August 2020 shows the relevant results.
Cypress and Applitools in action
Apart from a few config files the body of all test logic is in one file: event_calendar.spec.js.
Applitoools methods
The poetically named cy.eyesOpen() method starts the test. Next the cy.eyesCheckWindow() method takes a screenshot and sets it as a baseline image. Subsequent invocations of this method creates another screenshot which is compared with the baseline. Finally cy.eyesClose ends the test.
Cypress methods
cy.visit() opens an URL to be tested (Similar to get() in Selenium). The base URL is set in a separate config file and the cy.visit() methods only needs the path as a parameter.
cy.get() Incidentally not at all the same as Selenium get()) is used to locate elements and chain actions with methods for clicking a link or entering text for example.
After asserting the correct URL with the Cypress should() method there is still a number assertions that remain concerning the filtered results. A reliable test of the event calendar should include:
- Length of the result list == 3
- Correct image and text content for each calendar event
- Relevant results in the desired date range and location are present
- Non-relevant results outside the date range are absent
These test scenarios, especially verifying the absence of non-relevant results, are all good candidates for visual testing.
event_calendar.spec.js
/// <reference types="Cypress" />describe("Event calendar", () => {
beforeEach(() => {
cy.eyesOpen({
// appname: 'nzm, Czech Republic',
testName: 'Looking at the event calendar',
browser: {
width: 1000,
height: 660,
}
})
})
// GIVEN The user is at the National Museum of Agriculture's (NZM) events calendar
// WHEN The user chooses Prague as location, August 1, 2020 as start date and August 31, 2020 as end date
it("Fills in date range and location", () => {
Cypress.config()
cy.visit("/kalendar-akci")
cy.get('.select2-selection__arrow').click()
cy.get('.select2-search__field').type('Praha{enter}')
cy.get('#DatumOD').type('01.08.2020')
cy.get('#DatumDO').type('31.08.2020')
cy.get('.btn > .fa').click()// THEN The user can see NZM events that take place in Prague during August 2020cy.url().should('include', 'coHledate')
cy.eyesCheckWindow()})afterEach(() => {
cy.eyesClose();
});})
Cypress time travel
The GIF below shows how hovering over the test body gives us “time travel”. If a test should fail I can view the state of the page it failed. This is excellent for debugging a test.
The github repo can be found here.
