If you select the “Cloud” as the environment for creating and editing test cases, you can use "Element Detection Mode" to efficiently create test cases by selecting elements on the screen in real time, which eliminates the need to take screen captures. As you will be working on the Cloud terminal screen, Element Detection Mode will allow you to create test cases more quickly than with the conventional method of alternating between the terminal and UI tabs.
How to use Element detection mode
Open the Edit test case screen, and select “Cloud” from the “Environment” pull-down menu. Then, click the “Launch” button to launch the Cloud device. Here, although we describe a case for a browser, the same holds true for the mobile app.
Figure 1 Selecting and launching the Cloud environment
Once you start up the Cloud device, click the Element Detection mode start button displayed in the top right.
Figure 2 Starting Element detection mode
The mode switches and element detection for the currently displayed screen will start automatically.
Figure 3 State immediately after Element detection mode starts
Once detection ends, you can select the elements on the screen, just as you can after a normal UI scan. As in normal test creation, drag and drop UI elements to the area on the left side to create a test.
Figure 4 State in which Element detection mode is complete
When you drop in UI elements, only the row you just dropped is selected (as an exception here, since this is the first step, the screen transition command will also be selected). If you click the “Run” button in this state, only the line you just added will be run.
Figure 5 Dropped UI elements
Element detection will automatically restart once the execution is finished, so drag the elements for the next operation at this time. In this way, you can keep creating tests by repeating Element detection-->add operation-->add operation-->execution.
- Add Assertion (confirmation) command(s) as necessary.
- It is not necessary to run this for every operation. To proceed with operations on the same screen, it is possible to perform detection once-->add multiple lines of operation, and then run them together.
- Element detection begins immediately after execution. Therefore, it may load a slightly older version of the screen if screen transitions are slow. In this case, wait until the transitions are complete. Then, click the “Inspect again” button to update the elements.
Figure 6 Completing the 2nd round of element detection after execution, and Dropped UI elements
Once you have finished adding the series of operations, run the entire process once to make sure it works without issue. You can freely adjust the execution range by clicking the white circle on the left side of the test case. If the wait time is insufficient when transitioning between screens, you can adjust said wait time here.
Click the icon on the top right again to exit Element Detection mode. Each line of steps will be displayed as a number. At this time, the edited content and UI (screen on which elements are detected) will be saved.
Note: Contrary to ordinary test case creation, the content created in Element Detection mode will not be saved when you exit the mode unless you click the Save button. Save frequently when creating long cases.
Figure 7 After ending Element Detection mode
Choose elements from the existing UI
Even during the execution of Element Detection mode, a list of saved UI images can be displayed from the "UI Image" tab and elements can be selected, just as in normal test execution. If you want to reuse an element from an already-saved screen, you can reuse it from the saved UI image without having to open the screen again by operating the Browser or Device. You can create test cases even more efficiently, depending on the element you want to use, by using different elements for the screen currently displayed on the "Browser/Device" tab and the screen elements saved on the "UI Image" tab.
Figure 8 Opening the UI list on the UI image tab
Figure 9 Selecting UI elements you wish to add
Figure 10 Added the assertion step
UI Arrangement
When using Element Detection mode, UI images are saved multiple times per execution. This registers a large number of similar UIs, making organization particularly difficult when the same screen is repeatedly operated on. By using the “Organize UIs” function, you can neatly summarize similar UIs together.
With Element Detection mode deactivated, the "UI Image" tab displays a list of UIs. From the menu, click “Organize UIs” --> “Organize automatically”. 
Figure 11 UI List
And a confirmation dialog box will be displayed for summarizing similar UI elements. Here, there is a proposal to integrate "Screen 22" and "Screen 24," which correspond to the same screen. If this is not a problem, click the OK button to agree.
Figure 12 Confirmation dialog box for automatic UI organization, and selecting items to integrate
“Screen 24” has been deleted from the list of UIs. Although only newly created screens are displayed here, UIs registered to existing projects will also be subject to reorganization.
Figure 14 After UI list organization
UI automatic organization can be used even if the element detection mode is not in use. It is recommended to reduce the number of UI so that if the site under test is upgraded and the design changes, fewer items will need to be changed.