Action Setup

Create Action Link

The first symbol we want to model is the reset symbol. In this case, we first have to think about what the initial state of ToDo is. Here, it is the case when no user except the admin is registered in the system. Via actions that are assigned to the symbol, we have to reach that state.

Create Action Link

Therefore, click on the link under the correspondent action to open the view for managing actions of a symbols. At first, no actions are created. To create the first action, click on the Create in the top bar which results in a new modal window which displays the action editor.

Create Goto Action

The first thing we want to do is logout the user that is potentially logged in. Because we want to model an action on the real browser, we (1) click on the Web group on the left and in the collapsing menu, (2) click on the item Open URL. On the right side, a form is displayed where (3) we enter the URL /logout. Note that the entered URL is relative to the root URL of the project. Finally (4) we create the action by clicking on the button Create and Continue, which creates the action, but does not close the modal window, contrary to the Create button.

Create Fill Action

After the logout, we should be on the index page of ToDo which displays the login form. We now want to login as the administrator. To fill out the form, (1) select the action Fill input from the left menu. You are prompted to enter the CSS selector of the input element and the value that should be entered in the input. To find out the selector, you can use the Element Picker to extract the selector automatically from ToDo. Click on the corresponding button and the Element Picker pops up and loads the root URL of ToDo.

HTML Element Picker

You can navigate freely within ToDo via the Element Picker. First (1), enter admin@admin.de in the email field. Then (2) toggle the button in order to enable the selection mode.

HTML Element Picker

Hover over the input field (1) and it should be highlighted with a thick, red border while at the same time, its selector is displayed on the top (2). Click on it to confirm the selection and disable the selection mode.

HTML Element Picker

Click on the green button which closes the Element Picker. As you can see, the selector and the value you have entered are adopted automatically. Press the Create button to create the action.

Action Creation Dialog

You can now continue to create further actions which are displayed here. What it does it the following:

  1. Logout the current user (redirects to the index page)
  2. Enter the credentials of the admin (2,3) and login (4)
  3. Go to the user management page (/users/all)
  4. On this page there is a button to delete all users with the selector body > div.page.container > div > div.col-md-9 > a which is clicked on
  5. The admin is logged out

After that, we save the symbol by clicking on the Save button on the top. Note: Don't worry if you accidentally created an action. You can safely remove and reorder via drag-and-drop.

Save Action Link

Action Saved

For practice, You can now continue to model all remaining symbols on your own.

results matching ""

    No results matching ""