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

  1. Start Sahi Dashboard
  2. Click on the FlowCharts link.
  3. Either create a new project or open an existing project.
    Here we will continue with our existing project : Open Cart.
    Open the Open Cart project by clicking on it on the Welcome/Projects page.
  4. Start a new flowchart by clicking on the Create New button.

Add nodes to User Registration flowchart

  1. Add a Label Node: Registration
  2. Add an action node: Go to Registration page
    1. Click on Registrationnode, choose Add Node > Action
    2. Specify the page to navigate to, indicating where the action will be performed: User Registration and then click OK.

  3. Add another action Node: Enter $user details
    infoNote: Here user is an entity and hence we add a $ symbol before it.
  4. Add an outcome node: Verify $user created
  5. Add another action Node:Logout
  6. We have added all the required nodes.

Save User Registration Flowchart

  1. On the Flowcharts window, click on the Save button.
  2. Enter the flowchart name User Registration and click OK .
  3. 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

  1. On the Flowcharts window, click on the dropdown arrow next to Launch and then select Launcher Settings.

  2. Launcher Settings dialog opens.
    1. Select the browser: Chrome
    2. 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/

  3. 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

  1. Click on any node of the flowchart and select automate.
  2. Automate dialog opens up.
  3. 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.
  4. 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.
  1. Record steps for Go to Registration page keyword:

    1. Select the first keyword i.e; Go to Registration page by clicking on it. It will be displayed in bold to show the selection.
    2. Click on Start Record button.
    3. The Opencart website opens up in a new browser.
    4. 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.

    5. Click on the My Account button, then click on Register
    6. Notice that in the right pane of the automate dialog, your clicks are recorded and shown as below.

      Click on Save Keyword button to save your progress.
    7. At this stage you can Stop recording or continue for next keywords.
    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.
  2. Record steps for Enter $user details keyword:

    1. Select Enter $user details keyword .
    2. Click on Start Record button (if it is not in recording mode).
    3. Navigate to Opencart window and enter user details similar to the image below.
    4. 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.
    5. Click on Continue button.
    6. Notice that in the right pane of the Automate dialog box, the steps have been recorded and shown as below.
    7. Click on Save Keyword.
    8. Notice that, now the implemented keyword has changed its colour to black.
  3. Add manual steps for Verify $user created keyword:
    1. Select Verify $user created keyword.
    2. Click on Add Step button or the button.
    3. The Add Step dialog opens. Navigate to Inspect Element tab by clicking on it.
    4. 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.
    5. Notice that the Inspect Element tab has got populated with the success message details in UI Element and UI Element Value.
    6. 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.
    7. Click on the (select action/assert) button.
    8. Select Assert Text Equals from the pop-up menu.
    9. Notice the changes in left pane of the Add Step dialog.
      • The Action has been set to Get 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 in Assert.
    10. Click on Update button.
    11. Click on Continue button on the Opncart window.
    12. The added step looks like this:
    13. Click on Save Keyword.
  4. Record steps for Logout Keyword :
    1. Select Logout Keyword.
    2. Start recording by clicking on Start Record button (if it is not in recording mode).
    3. On the Opencart website browser, click on Logout.
    4. Notice the recorded steps in the Automatedialog and click on Save Keyword.

Run

  1. On the Automate dialog click on Runbutton. This will run the path you are working on. .

  2. The Run Settings dialog opens. Check the settings and make any changes if required.
    Select Run Normal Path and click Run.

  3. During the process of execution/running the flow, the following can be observed:
    1. The target webpage will be launched in a browser.
    2. All the added steps will execute.
    3. Here the user registration page will open and the user details will be filled automatically.
    4. 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

  1. Click on the Reports button..
  2. The Report opens in a new browser.
  3. The Suit 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.