Safari comes with a built-in solution for finding the elements for web apps, but we need to perform the following steps in order to set up the device for remote debugging:
- Navigate to Settings | Safari | Advanced:
- Then, turn on Web Inspector:
- Open the Safari browser on your device/simulator and navigate to the desired URL (we are navigating to www.google.com).
- Now, go to your Mac Safari browser, click on the Develop option from the menu, select the device/simulator (assuming that the device is connected to your Mac), and click on the URL:
- Now you will get the following screen with the HTML source code:
Now, we can easily inspect elements with Safari DevTools.
To interact with the web page, first we need to find an element on the page. All the functions of the Appium client library need an element to perform the actions on the web page.
Finding an element by ID is used to locate only one element in the mobile app. This is how the method signature to find an element looks:
findElement(By.id(String id));
We need to pass an ID of the element we want to interact with. Now, we are going to find the ID of an element using the Chrome ADB plugin remotely. Here, we have taken an example of the Google search page. Perform the following steps:
- Navigate to https://www.google.com on your mobile's Chrome browser.
- Click on the inspect link from the ADB plugin of your desktop's Chrome browser.
-
Click on the inspect element icon
and mouseover the search box, as shown in the following screenshot:
We can use the highlighted
idto interact with the web element. This is how the command will look:WebElement searchBox=driver.findElement(By.id("lst-ib"));
If you want to type in the search box, then you can use a web element reference; for instance, you can use a reference such as searchBox.sendKeys("Manoj Hans");.
Let's take the same example to find an element by ID on the Safari browser in an iOS device. We need to perform the following steps:
- Navigate to https://www.google.com on your mobile Safari browser.
- Click on the URL under iOS simulator under the Develop tab of the Mac Safari browser.
- Click on the Inspect icon and then click on the search box in the iOS simulator, as shown here:
We can use the highlighted id to interact with the web element. This is how the command will look:
WebElement searchBox=driver.findElement(By.id("lst-ib"));If you want to type in the search box, then you can use a web element reference, such as searchBox.sendKeys("Manoj Hans");.
Another way to find an element is by their name; elements can have names to locate them. This is how the method signature will look:
findElement(By.name(String Name));
Same as in the case of id, we need to pass the name attribute of the element we want to look for. It will return a WebElement object that we can perform actions on. We can again take an example of the Google search page, as the search box also has a name. All the steps will be the same as the ones we've taken to find an element by ID, as shown in the following screenshot:
This is how the command will look:
WebElement searchBox=driver.findElement(By.name("q"));This method is useful when you want to locate the element that has a hyperlink. This is how the method signature looks:
findElement(By.linkText(String text));
We need to pass the text that has a hyperlink. It will return a WebElement object that we can perform actions on. All the steps to locate the element will be the same as the steps performed to find an element by ID.
We are going to find the Images text on the Google search page that have a link; this is how the command will look:
WebElement imagesLink=driver.findElement(By.linkText("Images"));Xpath works on both XML and well-formed HTML structures to find elements. It is a bit slower (in the cases where you generated it in a complex manner) than the ID and name methods, but it is a very useful approach to find an element on the web page where the element ID is generated dynamically. Here, we are not going to teach you about Xpath, but if you want to learn about the Xpath strategy, then you can search Google for a tutorial. This is how the method signature will look:
findElement(By.xpath(String XPath));
We need to pass the Xpath of the element we want to look for. It will return a WebElement object that we can perform actions on. Here, we will construct the Xpath on the basis of attributes.
We are going to construct an Xpath of the Google search box; this is how the command will look:
WebElement searchBox=driver.findElement(By.xpath("//input[@id='lst-ib']"));
cssSelector strictly operates on HTML, and it is faster than Xpath in finding an element on the web page. This is how the method signature will look:
findElement(By.cssSelector(String cssSelector);
We need to pass the cssSelector of the element we want to look for. It will return a WebElement object that we can perform actions on. Here, we will construct the cssSelector on the basis of attributes.
We are going to construct cssSelector of the Google search box; this is how the command will look:
WebElement searchBox=driver.findElement(By.cssSelector("#lst-ib"));