In this tutorial we'll be covering how to get started with TestModeller.io for Cypress.
This is aimed for first-time users along with users who have an existing Cypress automation framework.
A demonstration of Test Modeller for Cypress covered in this tutorial.
1. How it works
TestModeller.io is a browser-based solution that enables users to:
Model a system under test as BPMN-style flowcharts.
Automatically generate test cases from the model, optimising testing for time and risk.
Define test data at the model-level and generate data at the same time as test cases.
Define test automation, automatically executing tests generated in The VIP Test Modeller.
Analyse test results and manage existing artefacts, with visual dashboards and a file management system that introduces traceability between test assets.
This quick start guide provides an overview for new users to get started with creating automation for a Cypress based automation framework to quickly start creating models and associated automation.
For Cypress this means creating models which automatically generate javascript code which can be directly plugged into your Cypress automation framework.
TestModeller.io a modelling tool which creates the perfect set of tests into a wide array of test case management systems, and automation frameworks. Along with overlaying the right test data to support your testing.
This section is by no means comprehensive and intended as a quick start guide. If you wish to learn more about modelling we recommend you review our knowledge base along with our video tutorials for a comprehensive guide to creating models and test automation.
The goal is to equip the reader with the working knowledge needed to get started with creating Cypress test automation to test their own systems and integrate into their own automation frameworks. With TestModeller.io, this means automatically generating complete automated test suites from models that are quick to build and easy to maintain.
2. Prerequisites
Install Prerequisites
Here we'll be installing all the prerequisites you need to get started with test automation in Cypress through TestModeller.io.
Download our example Cypress project (if you don't have your own).
You can download the framework from out GitHub repo here.
In this tutorial we'll be using the xpath extension to cypress. Follow instructions here to add xpath support. This is already included in our sample project.
Test It's Working
Make sure to restart the Terminal or Command line prompt to load the new environment variables.
Run sample automation library
Navigate to the framework directory (this should contain the node_modules folder).
Run npm install. This will pull down all the associated libraries required.
On Linux / MacOS - Run ./node_modules/cypress/bin/cypress open to start the interactive cypress engine.
On Windows we have added an npm script to start Cypress. Run npm run cypress:open from the command prompt.
You should now see the tests present which you can execute interactively in cypress.
3. Scan an existing web app
Scan an existing web app
4. Build a model
Build a Model
Start creating an automation model of the system under test.
If you'd like to learn more about building models we recommend reviewing our knowledge base articles on creating models here.
5. Generate cypress automation scripts
Generate Automation
Generate associated Cypress scripts for your model.
Generate Coverage Focused Tests
Test cases are equivalent to paths through the model of a system under test. They are generated automatically from a model, with or without test data and test automation associated with them. Coverage techniques are also available to generate the smallest set of test cases needed to test given features with a required level of rigour.
To generate test cases, navigate to the Generate tab of the menu and click “Generate”
TestModeller.io will provide status updates as the tests are generated.
To browse the generated tests, click “Tests” in the Generate tab of the menu. This will open the Test Cases side bar, displaying any created tests.
Clicking on a test will highlight the path through a model’s logic which that test reflects.
Tip
Test Coverage
The tests generated by TestModeller.io are the optimal set of tests to maximise coverage across the model. You can learn more about test coverage and how to edit coverage settings within TestModeller.io at our knowledge base here.
Export Test Automation Code
Once you have created a model with overlaid automation, and a test suite containing associated paths, you are ready to create automation scripts for the framework being consumed, in this case javascript code to be integrated into your Cypress framework.
Click the execute button in the test path side bar.
Select the automation server you have configured. If you are using our Partner or Cloud workspace you can use our 'Community Server' which is already configured for your workspace. Note: The community server is a shared instance and may get busy at peak times. You may want to create your own automation server for a faster experience. Documentation is available here for creating your own server.
Select the job 'Create Tests' from the dialog window.
Select the code template to use. In this case we will use 'Cypress'.
Once the job is complete there will be an option to download 'Result.zip'. This contains associated data spreadsheets, log files and most importantly the generated automation code.
6. Execute tests
Executing Tests
Now you've generated your javascript automation scripts for Cypress, let's import them into Cypress and run them.
7. Create custom code snippets (Advanced)
Create Custom Code Snippets
TestModeller.io is built with flexibility in mind. You'll often want to embed your own custom code or make calls to external libraries in your Cypress scripts. To facilitate that you can customise and create your own code snippet actions which can be overlaid on the model.
