Using Mermaid + ChatGPT for Test Case generation and management
Introduction
This is a brief walkthrough of how Mermaid diagramming can be used to support user journey mapping and test case generation, for your applications.
Platforms
Mermaid Diagram
I’ve generated a diagram based on a website with a Homepage, Login and Registration flow, and a logged in area:
flowchart TD
A[Homepage] -->|Click Login| B(Login Modal)
A -->|Click Sign up| C(Registration Page)
C -->|Click back| A
B -->|Enter valid username and password| D[Login Button]
B -->|Enter incorrect details| B
B -->|Close Modal| A
D -->|Click Login| E[Logged in lobby]
C -->|Enter valid details| F[Submit Button]
C -->|Enter incorrect details| C
F -->|Click Submit| E
E --> G[Logout Button] -->|Click Logout| A
As you can see there are quite a number of conditions and paths through the application, all of which could require test coverage.
Let’s start off by understanding the complexity of our application and the potential testing effort required.
Prompt:
‘What is the cyclomatic complexity of this diagram’
flowchart TD
A[Homepage] -->|Click Login| B(Login Modal)
A[Homepage] -->|Click Sign up| C(Registration Page)
C -->|Click back| A
B[Login Modal] --->|Enter valid username and password| D[Login Button]
B -->|Enter incorrect details| B
B -->|Close Modal| A
D -->|Click Login| E[Logged in lobby]
C -->|Enter valid details| F[Submit Button]
C -->|Enter incorrect details| C
F -->|Click Submit| E
E --> G[Logout Button] -->|Click Logout| AResponse:
Let’s calculate the cyclomatic complexity for the provided flowchart:
- Number of Edges (E): 17
- Number of Nodes (N): 12
- Number of Connected Components (P): 1
Now, calculate the Cyclomatic complexity:
V(G) = 17–12 + 2(1) = 17–12 + 2 = 5 + 2 = 7
The Cyclomatic complexity of the given flowchart is 7. This metric represents the number of independent paths through the flowchart, and it can be used to estimate testing effort and identify potential areas of complexity in the software.
Based on this response we can see our test journeys are moderately complex, based on the guideline of 0–5 being simple, 5–10 being moderate and 10+ high.
Next let’s generate some test cases to cover these paths through our application.
Prompt:
‘Generate test cases based on this diagram, without test steps’
Here's a list of possible test cases based on the provided flowchart, without the specific test steps:
Successful login with valid credentials.
Failed login with incorrect credentials.
Successful registration with valid details.
Failed registration with incorrect or incomplete details.
Successful logout from the "Logged in lobby."
Navigating from the homepage to the login modal.
Navigating from the homepage to the registration page.
Closing the login modal without attempting to log in.
Closing the registration page without submitting any details.
Closing the registration page after entering incorrect or incomplete details.
Closing the login modal after entering incorrect details.
Navigating back to the homepage from the registration page.
Navigating back to the homepage from the login modal.
Successful submission of the registration form.
Successful submission of the login form after previously failing.
Clicking the "Logout" button from the "Logged in lobby."
Navigating to the "Logged in lobby" after successful registration.
Navigating to the "Logged in lobby" after successful login.
Navigating to the "Logged in lobby" from the homepage and then logging out.
Navigating back to the homepage from the "Logged in lobby" after logging out.It’s generated us a good number of test cases very quickly, which would normally take quite a lot of thought to follow the user through each journey, and see if we need to consider failure conditions, as well as the user navigating back through the journey.
Finally, lets cover some critical paths that touch the most nodes in our diagram — for this we want more detailed test cases with test steps included. We can add these to our test management tool and test suite.
Prompt:
‘For the journeys which cover the most nodes, generate test cases with steps’
Among the journeys that cover the most nodes in the provided flowchart, we can identify the following key scenarios. For these scenarios, I'll generate test cases with steps:
Journey 1: Successful Login (Covering Nodes A, B, D, and E)
Test Case 1: Successful Login with Valid Credentials
Description: Verify that a user can successfully log in with valid credentials.
Test Steps:
Navigate to the homepage (A).
Click on the "Login" button.
Enter valid username and password in the Login Modal (B).
Click the "Login Button" (D).
Expected Results:
The user should be directed to the "Logged in lobby" (E).
Journey 2: Successful Registration (Covering Nodes A, C, and E)
Test Case 2: Successful Registration
Description: Verify that a user can successfully register.
Test Steps:
Navigate to the homepage (A).
Click on the "Sign up" button.
Enter valid registration details in the Registration Page (C).
Click the "Submit Button" (F).
Expected Results:
The user should be directed to the "Logged in lobby" (E).
Journey 3: Successful Logout (Covering Nodes E and G)
Test Case 3: Successful Logout
Description: Verify that a logged-in user can log out successfully.
Test Steps:
Ensure that the user is logged in at the "Logged in lobby" (E).
Click on the "Logout Button" (G).
Confirm the logout action by clicking "Logout" (A).
Expected Results:
The user should be logged out and redirected to the homepage (A).
These test cases cover the most nodes in the flowchart and represent critical user journeys in the application, including login, registration, and logout. The actual test steps and expected results may need further detail based on the specific requirements of the application.What next?
- Generate automation test scripts in your preferred language, based on the test scenarios generated
- Expand upon the complexity of your user journey diagram and include test data that you would be using
- Compare the test coverage and complexity to your existing test suite, are there gaps?
