This page will describe more advanced MagicPod problem investigation methods, primarily for use by developers.
Table of contents
- Browser side
- MagicPodDesktop side
- Appium-related investigations
1. Browser side
Click the UI element on the screen capture of the edit test screen to display a pop-up window that will allow you to edit the element information. And you will see the locator information corresponding to the UI element, as shown in figure 1 (If the image was scanned by dragging and dropping a screen capture directly into the browser, the locator information will not be visible. ). It is also possible to change the locator used to other candidates on this page.
Figure 1. Check the locator.
Checking the UI tree on error
If the test fails, a link stating Show failure UI tree will appear on the test results screen, and if you click this, you can see the UI tree at the time of test failure. (figure 2)
Figure 2. UI tree on error.
Detailed log output
If you set Expert in the Log level field on the Advanced settings tab in the test run settings panel, the log output will become more detailed. (figure 3)
Figure 3. Specify the log level.
If you set this to MagicPod bug Investigation, more detailed information will be provided; however, operation may slow and an extremely large log file may be output. This should not be used unless requested by the MagicPod support team, so you should return your level to Beginner or Expert as soon as log acquisition has been completed.
Developer tool console
In case an unexpected error occurs on the MagicPod page (the test is not saved, etc.), open Developer tools from More Tools > Developer Tools on the Chrome menu page, select the Console tab, and check the content of the log. A MagicPod error, like the one shown in figure 4, may appear. (figure 4)
Figure 4. MagicPod web page errors.
2. MagicPodDesktop side
Checking console errors
You can check information on the various types of errors from the MagicPodDesktop Console tab (figure 5). You can also check Appium Server and Selenium log information from Appium Console and Selenium Console.
Figure 5. MagicPodDesktop console.
The MagicPodDesktop screen uses a setup file called “magic_pod_desktop.json”. Refer to this article for the location of the file.
Work directory files
MagicPodDesktop creates the following files in the "magicPod" directory directly under the Desktop.
- test directory: The Node.js Appium/Selenium script is created when running the test.
- png and capture_temp.xml: This is the screen capture UI and tree XML taken when uploading the previous screen capture.
- log: The content of the MagicPodDesktop Appium Console or Selenium Console display is saved.
- log: Information equivalent to the contents of the Appium Console or Selenium Consoleare stored when MagicPod tests are run from the command line.
Authentication information files
The MagicPod authentication information is saved to a file called “/Users/<username>/.magic_pod_token”. If this file is deleted, it will be necessary to log into MagicPodDesktop again. (For displaying on mac: "command"+"shift"+".")
Developer tool console
If you choose Tool > Toggle Developer Tools on the menu to the top left of MagicPodDesktop, the same developer tools as Chrome screen will be displayed, where you can confirm the error information on the “Console” tab (figure 6). If you feel that MagicPodDesktop is behaving strangely, but nothing is being displayed on the console, you can also check the contents of this log.
Figure 6. MagicPodDesktop developer tools.
3. Appium-related investigations
Checking the UI tree using uiautomatorviewer
If the Android screen UI tree obtained by MagicPod is incorrect, you can isolate whether the problem is with Appium or UIAutomator by viewing the UI tree of the same screen with uiautomatorviewer.
- Use a USB cable to connect the Android device to the PC. Then, open the screen of the application that is causing the problem on the device.
- On the Mac terminal, open the uiautomatorviewer window by running the “JAVA_HOME=$(/usr/libexec/java_home -v 1.8) ~/Library/Android/sdk/tools/bin/uiautomatorviewer” command.
- The window shown in figure 7 will open, so click the ① button to display the current UI tree content shown in ②.
Figure 7. uiautomatorviewer.
Note that if Java 8 is not installed on the PC, an error will occur when launching uiautomatorviewer. If an error occurs, from the Mac terminal, try running “/usr/libexec/java_home -v 1.8”, and if an error appears stating that JVM version 1.8 is not installed, install Java 8.
Checking the UI tree using Appium Inspector
If the UI tree obtained by MagicPod is incorrect, you can determine whether the issue lies with Appium or MagicPod by inspecting the UI tree of the same screen with Appium Inspector. Follow these steps:
Launch an Appium server
- When iOS, install Xcode based on this doc. When Android, install Java and Android Studio based on this doc.
- Open a terminal application and execute the following commands in order to install an Appium server. We use appium 2.0.0-beta.71 in this example.
$ npm i -g appium@next
$ appium driver install xcuitest
$ appium driver install uiautomator2
- Next, launch an Appium server.
$ appium --allow-cors
Once you have finished inspecting the UI tree, terminate the Appium server. Otherwise, there is a possibility of being attacked when visiting malicious websites on the internet.
Connecting to the device with Appium Inspector
Open Appium Inspector from here. After opening Appium Inspector, configure the Desired Capabilities (it is kind of a set of parameters to specify the target device to be connected) as follows:
Configure appium:deviceName and appium:automationName based on your specifications.
Figure 8. Desired Capabilities for iOS simulators.
iOS real devices
- Use a USB cable to connect your iOS real device to the PC.
- Input a Team ID of your Apple Developer accoun for appium:xcodeOrgId value
Figure 9. Desired Capabilities for iOS real devices.
Use a USB cable to connect your Android device to the PC.
Figure 10. Desired Capabilities for Android devices.
Secondly, open a page in your app that you want to investigate. Then, click Start Session located at the bottom right corner of Appium Inspector. You should be able to view the UI tree as shown below.
Figure 11. Appium Inspector.
You can click anywhere on the captured UI on the left side. By clicking the captured UI, it highlights the corresponding UI element on the UI tree, which is displayed as App Source in the center. Also you can check what attributes the UI element has at the right. You can check another UI tree by manipulating your device, moving to another page and clicking Refresh Source & Screenshot on Appium Inspector.
Figure 12. Refresh Source & Screenshot.
When terminating Appium Inspector, click Quit Session & Close Inspector on Appium Inspector.
Figure 13. Quit Session & Close Inspector.
Don't forget to terminate Appium server as well.
Checking the element information with Accessibility inspector
1. Start Simulator and navigate to the page where the element is located.
2. Start Accessibility inspector. (See here for instructions on how to start it).
3. Operate the Accessibility inspector / Simulator to check the information about the target element, as shown in the image below.
If the element information in Simulator cannot be obtained in step 3 even after performing step 2 in the image, it may become possible to obtain the information by repeating the enable/disable procedure several times.