In our last article on mobile browser automation with Appium, you saw how you can launch Chrome browser on your mobile device. That article only talked about launching chrome browser with the URL you provided. But to write full fledged automation scripts you need to identify mobile browser elements and then write code that interact with these elements. In this article, you will see how you can use Appium Desktop to identify elements in your mobile browser.
But before we begin, let’s have a look at a very important point about object properties.
Isn’t it that the object properties remain same in desktop and mobile browsers?
If you have worked with cross browser testing in Selenium, you will know that the properties of an object remain same on different browsers. This means that if you write your test script in Chrome, it will easily run on Firefox without any need to change the object properties.
So don’t you think that the same logic should apply for mobile based browsers as well? For example, if you create a script using dektop browser, the same objects can be used for mobile browser as well. And if this is the case, then object identification becomes very very easy. We just need to identify the objects in desktop browser and then use the same in our mobile browser scripts.
The anwer to this question is yes, but there is a catch here. The properties of all the objects would be same in dekstop and mobile browsers, but there might be a case where you see some objects that are only in mobile but not in desktop browsers. Let’s understand this with this help of the below example.
Case where mobile browser and desktop browser uses different objects for the same website
A good example here would be Google Homepage. If you open Google Homepage on a desktop browser, you will notice that it has buttons “Google Search” and “I’m Feeling Lucky” in the desktop version. Now open the same page on a mobile browser. Here, you can notice that instead of these two buttons, the mobile version has a search icon sort of a button next to the search box. This is shown in the below image
Now, since the textbox is common in both desktop and mobile versions, its identification properties remain the same at both places. But for the search button, the properties would differ because the controls are altogether different. Due to this reason, you will be able to identify most of the objects with desktop based browsers, but there might be few mobile specific objects for which you would need to work with Appium.
This is where Appium Desktop would be helpful. It helps you identify objects in mobile browsers. Let’s see how we can do this.
Appium Desktop Inspector – Steps to get started
With Appium, you can use Appium Desktop Inspector to identify mobile browser elements. However, doing this is a multi-step process and you would need to do the below mentioned tasks to get the ball rolling –
- Open Appium Desktop and start Appium server
- Provide Desired Capabilities of your mobile device and browser
- Start New Session (i.e., Start Appium Desktop Inspector)
- Inspect elements on your mobile browser
Since there are many steps involved here and to make this entire process easy to understand, we will cover these steps in two articles. In this article, we will look at the first three steps – which will enable you to start Appium Desktop Inspector. The next article will focus on the different methods using which you can inspect elements in mobile browser. Let us now start with the first step.
Open Appium Desktop app and start Appium Server
If you are working through our Appium Tutorial series, then you should already have Appium Desktop & Appium server up and running. If not, then follow the steps given below to start the server using Appium Desktop –
1. Open Appium from Start > All Programs
2. Once Appium Desktop opens, navigate to its Advanced tab
3. Enter the following values in the fields as shown in the below image –
- Server Address – 0.0.0.0
- Server Port – 4723
- Allow Session Override – tick the checkbox
4. Leave all other fields as it is, and then click on Start Server v1.7.2 button
5. Appium server would start and you would see the screen as shown below
Appium Desired Capabilities Screen
Let us now have a look at the Desired Capabilities screen. This is where you provide the Desired Capabilities that enable Appium to connect to your mobile browser. Follow the below steps to open Desired Capabilities screen:
1. Click on Start Inspector Session button (the first button with search icon) from Appium logs screen
2. A new Appium window would be displayed. Have a look at each of the four tabs in this window. When you select any of these tabs, then only the top section of the window changes. The bottom section, starting at Desired Capabilities stays the same way.
Provide Desired Capability details for Automatic Server
Each of the 4 tabs provide a different way using which you can connect to the Appium server. In this tutorial series, we will only cover the Automatic Server. Lets see how you can provide the Desired Capability details to start Appium Desktop Inspector. With Appium Desktop Inspector, you will need to provide all the Desired Capabilities that you add in your test case to launch the mobile browser. If you go back and check our article on launch chrome browser on mobile device, you will notice that we had used the below desired capabilities in our code –
//Set the Desired Capabilities
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("deviceName", "My Phone");
caps.setCapability("udid", "ENUL6303030010"); //Give Device ID of your mobile phone
caps.setCapability("platformName", "Android");
caps.setCapability("platformVersion", "6.0");
caps.setCapability("browserName", "Chrome");
caps.setCapability("noReset", true);
You will have to add each of these capabilities in Appium Desktop as well. Follow the steps given below to do this –
1. To add the first capability, type ‘deviceName’ in Name field and ‘My Phone’ in Value field. Your screen would now look like this (note that the JSON Representation block would show the capability that you have added just now)
2. Now click on the ‘+’ icon, so that a new blank row gets displayed
3. Add the second capability (udid and your device id) in this row
4. Keep on adding new rows till you add all the capabilities that you see in the above code block. Please note that drop down values should be text for all the rows, except the last one where the value is boolean. Your screen should now look like this
You have now successfully added all the Desired Capabilities. Let us now save this Capability Set and then start the Appium Desktop Inspector.
Save the Desired Capabilities Set
It’s a good approach to save the Desired Capabilities set especially when you are using multiple browsers or multiple devices. This is due to the fact that once you save a Desired Capability set, then you can directly select it from the Saved Capabilities Set section and start the inspector. So if you use multiple devices or android versions, you can save these capabilities as say ‘Samsung Galaxy S7’, ‘Nexus 6P’, ‘Android 7.0 Device’ etc.
Let’s quickly see the steps that you have to follow to save the Desired Capabilities –
1. From the Automatic Server tab where you entered all the Desired Capabilities, click on ‘Save As…’ button
2. You would see a popup asking for the name of the Capability set
3. Enter any name you wish to use and click on Save button. The capability set would get saved
4. Click on Saved Capabilities Sets tab. You will see that the capability set you saved just now is displayed here
Start Appium Desktop Inspector
First of all make sure that your mobile device is connected to your machine. Also see that its unlocked. To start Appium Desktop Inspector, click on Start Session button. You can do this either from the Desired Capabilities tab, or from the Saved Capability Sets tab.
Once you click on the button, you would see that the screen would start getting refreshed. Then after few moments, Appium window would display the screenshot of blank page in Chrome browser together with its Object Hierarchy Dump. The Appium window screen would look like this –
You can also notice that Chrome browser has been opened on your mobile device as well. Since we want to identify objects on Google Homepage, we will have to open it manually on our mobile device. So on your mobile device, open Google in the browser that was opened by Appium.
Now click on Refresh icon from the Appium Desktop Inspector. This screen would start refreshing again and after a few seconds you will see that Google Homepage with its Object Hierarchy dump is displayed in Appium Desktop Inspector, as shown in the below image –
With this, Appium Desktop Inspector setup is complete and you can now use it to inspect objects in your mobile device. Our next article would cover the mobile inspection part, where you will learn about the different ways using which you can identify mobile elements from Appium Desktop Inspector. Please leave us a comment if you get stuck somewhere while following any of the steps given above.