When specifying the environment "cloud" when creating or editing a test case, there are two ways to select elements.
- Capture button
- By clicking on the "Capture" button for each screen, the element is detected and moved to the UI image tab to select the element from the corresponding UI. You will need to alternate between the browser/device tab and the UI image tab each time the screen changes. Use this method to capture the entire page. *Testing screens where you need to scroll
- Element selection mode
- By clicking on "Select," elements are automatically detected for each screen, so you can efficiently create test cases by selecting elements in real time on the cloud device screen without having to capture each screen. Since you can basically work on the cloud device screen in element selection mode, you can create test cases more quickly than by alternating between browser/device tabs and UI image tabs.
This page describes how to create real-time simple tests using the element selection mode.
How to use Element selection 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, the element selection mode button appears the top right. Click it to start.
Figure 2 Starting Element selection mode
The mode switches and element detection for the currently displayed screen will start automatically.
Figure 3 State immediately after Element selection mode starts
Once detection ends, you can select the elements on the screen. Click UI elements to create a test.
Figure 4 State in which Element selection mode is complete
When you click UI elements, only the row you just clicked 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 Clicked UI elements
Element detection will automatically restart once the execution is finished, so click the elements for the next operation at this time. In this way, you can keep creating tests by repeating Element selection-->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 Second element detection completed after execution
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 unlock Element selection mode. Then the white circles on each line of the step will disappear. At this time, the edited content and UI (screen on which elements are detected) will be saved.
Note: The content created in element selection mode will not be saved unless you unlock Element selection mode, click Save button, or click Save to history. Save frequently when creating long test cases.
Figure 7 After ending Element selection mode
Choose elements from the existing UI
Even during the execution of Element selection 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 step
UI Arrangement
When using Element selection 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 selection 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 "UI246" and "UI247," 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
Before pressing the OK button, click on "Detail" to see the detailed integration results. When you mouse over "UI elements in use," the corresponding UI elements are displayed in a red frame on the UI.
“UI247” 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 selection 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.