Manage and Control Cypress End-to-End System Tests With TestBench
Are you using Cypress to perform system testing? Simplify your life and use TestBench to improve your test management.
Cypress – An Open-Source Framework for Test Automation
Cypress is an open-source framework for test automation for testing browser-based applications, especially in the JavaScript environment, an alternative to the well-known Selenium framework.
Unlike Selenium, which addresses test objects remotely via network calls, Cypress is executed locally, in the same browser in which the application under test runs.
Cypress tests can access and manipulate all internals (DOM objects, events, etc.) of the web application under test. Although Cypress tests are designed to automate end-to-end tests, the style of tests is similar to Unit Tests.
Manage Cypress Tests
Cypress manages test scripts and test logs file-based in a folder structure. With an increasing number of scripts and with increasing team size, this can become very confusing. If there is no common code repository, many different subsets or variants or versions of the test scripts are created and exist on the individual computers of the developers. The logs have to be collected, and the test results’ structure is confusing and sometimes difficult to understand. These problems are further aggravated by the interaction of local tests and tests in a continuous delivery pipeline, which is integrated into Jenkins, for example.
By managing the team’s Cypress tests via an ALM or test management system and integrating them into the existing quality management processes, these disadvantages can be avoided.
In this article, I will show you how you can implement this quickly and easily with TestBench, starting with importing your existing tests into TestBench.
Manage Cypress Tests With TestBench
Both TestBench and Cypress offer a comprehensive API so that a far-reaching, bidirectional integration of both tools is possible. The following figure illustrates the general procedure:
As a first integration step, we import Cypress test specifications into TestBench and link them to epics and user stories.
A Cypress test script is a sequence of test instructions that are executed in the browser and (as mentioned above) control the application under test that is running in the browser. Interestingly, the test instructions can be formulated in a BDD style, i.e., based on natural language. Cypress uses the language tools of the Mocha framework, and a Cypress test script can therefore be seen as an automatically executable natural language test specification.
The following code shows an example of such a BDD-style specification for automated testing of the ‘login dialog’ of our test object:
// edit the following two variables to enter your login for the vsr.testbench.com website according to your workspace name in TestBench CS
var user = '<user name>';
var password = '<password>';
var baseUrl = 'https://vsr.testbench.com';
describe('Login', function () {
beforeEach(() => {
cy.visit(baseUrl);
})
it('page contains specified elements.', () => {
cy.log('Go to the login page.'); // log entry for the cy.visit in the beforeEach
cy.log('Check that the login field for "Username" is displayed.');
cy.get('[id=input_username]').should('be.visible');
cy.log('Check that the login field for "Password" is displayed.');
cy.get('[id=input_password]').should('be.visible');
cy.log('Check that the "Login" button is displayed.');
cy.get('[id=button_login]').should('be.visible');
});
it('page can be switched to german language.', () => {
cy.log('Go to the login page.'); // log entry for the cy.visit in the beforeEach
cy.log('Click the "german flag button" to switch to the german language.');
cy.get('[id=german]').should('be.visible').click();
cy.log('Check that the "access data" button is labeled with "Zugangsdaten" correctly.');
cy.get('[id=accessData]').should('be.visible').should('have.text', 'Zugangsdaten');
});
it('on the page is successful.', () => {
cy.log('Go to the login page.'); // log entry for the cy.visit in the beforeEach
cy.log('Enter the user name.');
cy.get('[id=input_username]').should('be.visible').type(user);
cy.log('Enter the password.');
cy.get('[id=input_password]').should('be.visible').type(password);
cy.log('Click the login button.');
cy.get('[id=button_login]').should('be.visible').click();
cy.log('Check that the customer list is available.');
cy.get('[id=navigationbar_customer_list]').should('be.visible');
});
})
When we extract the comments contained in the code, we get the test specification in natural language, which is easy to understand even for non-programmers.
To keep text extraction and the associated parser simple, we agree that the following rules are followed when creating Cypress test specifications. These rules are generally useful and helpful in developing automated tests to better support the complete test process.
- All strings are in single quotes.
- The texts are in one line (no wraps).
- The texts from “describe” and “it” each result in a complete sentence.
- The texts from “cy.log” describe the individual test steps, just as a manual tester would do.
With a simple parser written in Go, the natural language test specifications can be extracted. We provide this parser OpenSource in the TestBench GitHub repository for download . The following code block shows how the parser is used to process the above example script:
As a result of a DryRun, the parser returns the following text string:
Without a DryRun, the parser has already done its job with it. In this version:
- a checklist test case in TestBench is created, which represents the Cypress Script (the IT part),
- all cy.log entries are created as individual items of the checklist
- a user story is built from the spec as a whole
- and depending on the call of the parser, a new epic with the specified name is created.
For the VirtualShowRoom, our training and test application for everyone, the user story “Login” with the corresponding test cases are created underneath an epic:
- Login page contains specified elements.
- Login page can be switched to german language.
- Login on the page is successful.
In TestBench, Cypress is thus known as a test, and the team can use all test management features of TestBench:
- Assigning the test to an epic or user story as part of the “Definition of Done”
- Manual test execution based on the natural language test description (very useful for manual retesting of sporadically failing automated tests)
- Automatic execution from TestBench
- Collection of test results of all test executions (also manual/automated mixed)
- A comfortable, exact evaluation of test results via the TestBench Dashboard
- Generate reports
Summary
Any team already using Cypress for test automation can quickly and easily improve their test management by integrating it with TestBench and seamlessly connecting Cypress test automation with manual tests, exploratory tests, or other test automation tools. Conversely, Cypress is another test automation framework for teams using TestBench that is ideal for automating browser-based end-to-end tests.
All scripts presented are available for download in the TestBench GitHub.
A permanent free TestBench Basic license is available with a few clicks here:
Connected to this, you can also create and use your VirtualShowRoom.
Have fun using it in your project!
Written by Dipl. Inf. (FH) Holger Seidel
Holger Seidel has a degree in computer science and has been working for imbus AG since 2008. Until 2016, he was, among other things, involved in research projects as well as a project manager in customer projects at the imbus TestCenter in the area of software test automation and as the person responsible for the IT infrastructure of the imbus TestCenter. Since 2016, he has been working in the TestBench team, initially as an architect for test automation and currently as the person responsible for infrastructure and DevOps of TestBench CS, which is being developed across several locations.
Preview
Of course, there are many more ways to connect Cypress with TestBench CS.
Stay tuned for the upcoming blog posts:
- Import Cypress test logs into TestBench and evaluate them
- Deploy and start Cypress Tests from TestBench
