Example: User Registration
abstract
Set up an example to showcase Data Drive concepts of Flowcharts
goal
Automate a User Registration flow on the Open Cart sample website.
Create User Registration flowchart
- Start Sahi Dashboard
- Click on the
FlowCharts
link. - Either create a new project or open an existing project.
Here we will continue with our existing project :Open Cart
.
Open theOpen Cart
project by clicking on it on the Welcome/Projects page. - Start a new flowchart by clicking on the
Create New
button.
Add nodes to User Registration flowchart
- Add a
Label
Node:Registration
- Add an action node:
Go to Registration page
- Click on
Registration
node, chooseAdd Node
>Action
- Specify the page to navigate to, indicating where the action will be performed:
User Registration
and then click OK.
- Click on
- Add another action Node:
Enter $user details
infoNote: Here user is an entity and hence we add a$
symbol before it. - Add an outcome node:
Verify $user created
- Add another action Node:
Logout
- We have added all the required nodes.
Save User Registration Flowchart
- On the Flowcharts window, click on the
Save
button. - Enter the flowchart name
User Registration
and clickOK
. - As soon as the flowchart gets saved, the name will appear in the following two places:
info Since we have completed the creation of Registration flow, we now need to automate it. Follow the below steps for automation.
Launcher Settings
- On the Flowcharts window, click on the dropdown arrow next to Launch and then select
Launcher Settings
. Launcher Settings
dialog opens.- Select the browser: Chrome
- Type or paste the URL for the destination webpage (The website for which you are making this automated flowchart). In this case URL will be: http://demoapps.testflowchart.com/opencart/
- Click on
Launch
to launch the webpage to confirm that the browser opens with the desired URL and close the browser.
It will automatically save the settings.
Open Automate dialog
- Click on any node of the flowchart and select automate.
- Automate dialog opens up.
- Observe that the keyword associated with the selected node, where you clicked to automate, is displayed in bold on the left pane, while the right pane provides space for adding detailed information.
- You can select any keyword by clicking on it on the left pane as per the need.
Add Steps
info
To implement the keyword, we can either record the steps or add them manually.
These steps will be performed automatically at the execution/run.
These steps will be performed automatically at the execution/run.
- Record steps for
Go to Registration page
keyword:
- Select the first keyword i.e;
Go to Registration page
by clicking on it. It will be displayed in bold to show the selection. - Click on Start Record button.
- The OpenCart website opens up in a new browser.
- Click on the
My Account
button, then click onRegister
- Notice that in the right pane of the automate dialog, your clicks are recorded and shown as below.
Click onSave Keyword
button to save your progress. - At this stage you can
Stop recording
or continue for next keywords.
info You can set the Flowcharts window and the OpenCart browser window side by side for the ease. While doing so, drag the automation dialog to the visible portion.
infoAt any stage of Recording the steps, you can stop the recording and start recording again as needed. This gives the user a buffer to make any corrections or to plan further course of action. - Select the first keyword i.e;
- Record steps for
Enter $user details
keyword:
- Select
Enter $user details
keyword . - Click on
Start Record
button (if it is not in recording mode). - Navigate to
OpenCart
window and enter user details similar to the image below. - Click on
Continue
button. - Notice that in the right pane of the
Automate
dialog box, the steps have been recorded and shown as below. - Click on Save Keyword.
- Notice that, now the implemented keyword has changed its colour to black.
infoEnter the required fields in correct format and note down any password entered for future reference.
Check or uncheck any given check boxes or select the option buttons as per the requirement as these get recorded as steps too. - Select
- Add manual steps for
Verify $user created
keyword:- Select
Verify $user created
keyword. - Click on
Add Step
button or the button. - The
Add Step dialog
opens. Navigate toInspect Element
tab by clicking on it. - Navigate to the OpenCart browser window and press
Ctrl
key and hover the mouse on the "Your Account Has Been Created" message (Ctrl+Mouse Hover). It gets highlighted by a red outline.
- Select
- Notice that the
Inspect Element
tab has got populated with the success message details in UI Element and UI Element Value. - Message can change in the future and elements should not be identified through the message so we will choose the alternatives. Select the option heading with index number.
- Click on the (select action/assert) button.
- Select
Assert Text Equals
from the pop-up menu. - Notice the changes in left pane of the
Add Step dialog
.- The
Action
has been set toGet Text
. - El has been set to the identified element from the website.
- The
Assert
has been set to Equals and it has the value of the success message. - The above means that, to perform the action of getting the text from the
El
and check if it is equal to the text given inAssert
.
- The
- Click on
Update
button. - Click on
Continue
button on the Opencart window. - The added step looks like this:
- Click on
Save Keyword
.
Logout
Keyword :
- Select
Logout
Keyword. - Start recording by clicking on
Start Record
button (if it is not in recording mode). - On the OpenCart website browser, click on
Logout
. - Notice the recorded steps in the
Automate
dialog and click onSave Keyword
.
Run
- On the
Automate
dialog click onRun
button. This will run the path you are working on. . - The Run Settings dialog opens. Check the settings and make any changes if required.
SelectRun Normal Path
and clickRun
. - During the process of execution/running the flow, the following can be observed:
- The target webpage will be launched in a browser.
- All the added steps will execute.
- Here the user registration page will open and the user details will be filled automatically.
- Finally it will verify the success message. But, here we get a failure message.
info The Run fails because the email-id has already been registered. It can not take the same email-id again.
View Report
- Click on the
Reports
button.. - The Report opens in a new browser.
- The Suite Report opens up.
warning
Running this path will result in a failure.
info
We notice that running this path results in a failure. This is because the form requires a unique email address.
To fix it, we need to apply some data drive principles. But before that we need to organize our automations artifacts to allow data drive.
To fix it, we need to apply some data drive principles. But before that we need to organize our automations artifacts to allow data drive.