When specifying the environment Cloud when creating or editing a test case, there are two ways to select elements.
- Capture button
- By clicking 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 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 the 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. Select and launch 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. Start the 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). When you click the Run button in this state, only the line you just added will be run.
Figure 5. Clicked UI elements.
The 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 detect element -> add operation -> run.
- Add the Assertion (confirmation) command(s) as necessary.
- It is not necessary to run this for every operation. To proceed with operations on the same screen, you can detect elements once -> add multiple operations -> run them together.
- The 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 the element selection mode, click Save, or click Save to history. Save frequently when creating long test cases.
Figure 7. After ending the element selection mode.
Choose elements from the existing UI
Even during the execution of the 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. When 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. Open the UI List on the UI image tab.
Figure 9. Select UI elements you wish to add.
Figure 10. Added the step.
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 feature, 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.
Figure 12. Organize automatically.
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 13. Confirmation dialog box for automatic UI organization, and selecting items to integrate.
Before clicking the OK button, click Details to see the detailed integration results. When you mouse over a UI element's name in Used UI elements, the corresponding UI element is displayed in a red frame on the UI.
Figure 14. Details of the merger.
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 15. 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.