Effective Locator Strategy for Mobile App Automation using Appium

Effective Locator Strategy for Mobile App Automation using Appium

Introduction:

Mobile App Automation using Appium involves various ways to locate elements for effective testing. In this blog, we’ll se the Mobile app automation Using Appium Inspector, we can inspect elements on both iOS and Android devices.

Now we’ll go for locating the Android Element

  • Mobile App Testing tools are available in the market right now are as follows:
    • Katalon
    • Appium
    • Espresso
    • XCTest
    • Robotium
    • Selndroid
    • Flutter
    • Robot Framework
    • iOS-driver
    • Xamarin

So currently we are going to Inspecting the Locator Strategy for Mobile App Automation using Appium, For the initial setup of Appium for Android device you can refer this blog How To Configure Our System For Real Mobile App Automation. This  blog will guide you for the mobile app automation using Appium setup on Android device.

We have various ways to locate the elements for mobile app automation using Appium Inspector, mainly we have the following ways to locate the elements:

  • Id
  • Xpath
  • Customized Xpath
  • Accessible Id

First, we’ll see how to locate the specific element for Mobile App Automation using Appium

After starting the session on an Android phone you will see the below Appium inspector window

Mobile App Automation - 1

In this image, you can see the mobile screen, App source, and Selected Element tabs.

When you select the particular element on the mobile screen displayed on Appium Inspector, You will see the below image, I have selected the C button from a calculator for mobile app automation using appium.

Mobile App Automation using Appium - 2

Now we can see the DOM content is loaded in the App Source tab, and the Attributes and values will be displayed in the Selected Element tab.

Now we’ll see how to locate the element from the Selected Element tab.

Select Element

In the above image you can see the attribute and values to locate the element

Now we can see the Locator strategies to locate this element for mobile app automation using appium. First, we’ll see locating the element using the Id

First, we’ll have to see the available Attributes for that particular element and then try to locate the element. So copy the ID from given Selected Element tab as shown below

Copied-id

So now We’ll see how to check whether the Id is a valid locator or not.

  • For that first click on the Search bar
Search Bar
  • Then make sure you have selected the correct locator Strategy as shown in the below image.
search for element
  • Now after clicking on the search element, you will get to see the identified element as shown in the below image
Mobile App automation using appium. -3
  • As the element is getting highlighted it indicated that we can use that ID to locate that particular element

Now we’ll see locating elements using XPath for Mobile App Automation using Appium

In a similar way to Id we can locate the element using Xpath, So for first we need to click on the Xpath shown in the below image.

Mobile App Automation using Appium-4

Now click on the search button explained above

XPath

Make sure that you have selected the XPath as Locator Strategy as shown. Then Paste the copied XPath in the Selector Box and click on the Search Button, so then you can see the below image the element is located by the XPath

Locate XPath

The element is getting highlighted and that means we can use this XPath to locate this element

Now we’ll see how to use customized XPath for Mobile App Automation

This allows us to handle parameterization and overcome limitations when ID or XPath is not available by default. So for that, we need to know how we can create XPath

  • The first step is you need to find the class for that particular element
Mobile App AUtomation-5
  • As you can see the above image, class is present for that particular element. So first step is we need to copy this class value
  • The next step is to choose the attribute you want to use the value of.
Mobile App Automation-6
  • These are the various attributes you can use to customize XPath
  • So after that, you can create the Customized XPath, So here is a sample XPath I have used to locate the equal button from the Calculator app
  • In this XPath, I have chosen text attribute. So in the below image, you can see the combination of class and attribute and value. This is how we can create customized XPath
XPath Mobile App Automation
  • As shown in the below image you can see the Located element
Located Elements
  • So when the requirement is there to create a parameterized locator or ID is not available, at that time you can use Customized XPath

For accessibility Id you can follow similar steps like ID to locate the element. The only condition is Accessibility ID should be available for that particular element

Now we’ll go for locating the iOS element for Mobile App Automation using Appium

For iOS automation We’ll be going to see how we can locate the element. To locate elements on iOS devices following strategies are available

  • Accessibility Id
  • XPath
  • Customized XPath

Now we’ll see how to locate the element using Accessibility ID on iOS device.

For that, we’ll have to start the Appium Session on iOS. After starting the Appium session on iOS device you  will get to see the below window of Appium inspector

Appium Inspector

This will be the home page of the calculator on the iOS App. On this screen, you can see three windows Mobile screen, App Source, and Selected  Element. When you select any of the elements displayed on the Mobile screen the screen will be shown below.

Mobile Screen

In the above Image, I have selected the AC button which is for All Clear. After selecting that element the DOM content is loaded in the App Source window and in the Selected Element window we can see the attributes and values that can be used for inspecting the elements.

We have so many options to locate the element as you can see in the Selected Element window. We have accessibility ID, XPath, and customized XPath for Mobile App Automation using Appium.

Now we’ll see how to locate the element using accessibility id for Mobile App Automation using Appium

So first we’ll go to search for element as shown in the below image

Element Search

As shown in the above image you can see that I have selected Locator Strategy as the Accessibility ID and the value I have passed the accessibility ID got from the Selected Element window. Now, I’ll click on the Search button.

The system will display the result window below.

Search Button

As shown in the screenshot, the AC button is highlighted after successfully finding the window element. The count for the found element is 1, and you can use this accessibility ID to locate this specific element.

Note: So for locating the elements using XPath and customized XPath you can refer the steps mentioned for Android.

  • Preffered Locator Strategy: As you can see the Selected element window, We have multiple options to locate the element for Mobile App Automation. So there might be a confusion to select the correct locator strategy. So here are some key points which you can consider while choosing the locator strategy
    • Most preferred locator strategy will be id (Android) or accessibility id (iOS). Because id’s are designed to be unique for direct access.
    • name locator strategy can be used if the particular element have the unique name which can be used to locate element.
    • The XPath are more likely to use if id not available or we have requirement to create locator which needs to be parameterized.

Conclusion:

As we see, we have multiple ways to locate the elements on the Mobile Application. Here in this blog, we got to know the the locator strategies to locate the elements on Android and iOS Application for Mobile App Automation using Appium. So you have multiple options to locate the elements, From which you have to decide which strategy suits best for your requirements. So as mentioned above id is fastest way to locate elements, But you have choice to use XPath and customized XPath for parameterization. https://github.com/appium/appium-inspector/releases

Overall, this blog provides an overview of how to locate elements Mobile App Automation using Appium Inspector. Additionally, it explains the various locator strategies you can choose based on the requirements of your test script.

Upgrade your Selenium Automation Framework from Java 8 to Java 11

Upgrade your Selenium Automation Framework from Java 8 to Java 11

Introduction:


Starting from September 30th, 2023, Selenium will no longer provide support for Java 8. Instead, the minimum supported version of Java will be Java 11. For the official announcement from Selenium, please refer to this link:

https://shorturl.at/bfiot

Selenium has supported Java for a long period. Java 8 reached the end of active support about a year ago as you can see below the details of version support.

The default of Selenium has not had a major release in several years and also a bug has been found that cannot be fixed. So the decision was made to move to the native Java HTTP client which requires using Java 11 or greater version. So instead of upgrading to the latest Java for now Java 11 will be a cautious step to move forward. In this blog, we will explore how to achieve that with minimal changes.

Download and Install Java 11:

First, you need to download the exe file for the JDK 11 version. For that, you can visit the link provided below:
https://www.oracle.com/in/java/technologies/javase/jdk11-archive-downloads.html
You can get it by signing in to the Oracle which is free. You will have various file types to download. For the exe file, you can refer below image.

After completing the download you proceed with the installation process.

For the installation, you can follow the below steps shown in screenshots. Then the installation process will be completed.

After completing the installation of Java 11.

You will find the file below in your system at the following path: C:\Program Files\Java.

So now you have successfully installed Java 11.

Setting Up Environment variable:

The next step is to set up the environment variable. To do that, simply navigate to the Environment Variable.

Settings > About > Advance System Settings > Environment Variables 

As you can see in the image above, I have successfully updated the JAVA_HOME path with the latest JDK version. Additionally, don’t forget to update the path variable with the latest “bin” folder.

So now start your command prompt by executing the java -version command. You will get to see the latest updated version of Java.

We have now installed Java 11 and configured the Environment Variables.

Update Existing project on the latest installed Java version which is Java 11:

So for now we’ll see how we can update the existing Java 8 project to Java 11

So you must have a pom.xml file present in your existing project framework.

Before:

After:

As you can see the source and target in the above snapshots are version 8. Here you can update the version of the java with latest 11 as we have downloaded and installed Java 11. So after updating the 8 with 11, you have to rebuild the pom.xml project as well. After that, you will see the successfully updated Java version to 11. This is how you need to update your Java version to 11.

Read more blogs here.

Capture screenshots and videos in java playwright

Capture screenshots and videos in java playwright

Any test automation report, without screenshots, would look dull and will not provide enough information on where the test failed. If you add only screenshots, it will make the report information-rich. Now, if your tool has the capability to record the video as well, then it will be cherry on the top. A playwright is an automation tool that has these features integrated in-built. Here we will cover various types of screenshots that can be attached and how to record the video. This blog will help you to learn the steps to include Capture screenshots and videos in java playwright.

  • Playwright contains the following inbuilt functionalities:

Here, we are exploring the functionality to capture the snapshots and how to attach them to the Cucumber report. You must have the Cucumber report set up in your framework in order to accomplish this.

Let’s, Understand first how to Capture screenshots and videos in java playwright.

1. Page Screenshot:

As you are all aware, we usually use this screenshot to attach what is visible on the screen for verification purposes.

public static List takeScreenShots() throws IOException 
    {
	public static byte[] array;
        long millisStart = Calendar.getInstance().getTimeInMillis();
        array = page.screenshot(new Page.ScreenshotOptions().setFullPage(false).setPath(Paths.get("test-output/ScreenShots/" + millisStart + ".png")));
        List output = new ArrayList();
        output.add(array);
        output.add(millisStart + ".png");
        return output;
    }

2. Full Page Screenshot:

If your test requires you to attach a screenshot of the entire page, top to bottom. So this method will guide you easily. The code below helps to take a snapshot of the entire page, no matter how long it is, because setFullPage is set to ‘true’.

public static List takeScreenShots() throws IOException
    {
	public static byte[] array;
        long millisStart = Calendar.getInstance().getTimeInMillis();
        array = page.screenshot(new Page.ScreenshotOptions().setFullPage(true).setPath(Paths.get("test-output/ScreenShots/" + millisStart + ".png")));
        List output = new ArrayList();
        output.add(array);
        output.add(millisStart + ".png");
        return output;
    }

However, now you can see that the full scrollable page has been captured in this step.

3. Element Screenshot:

So here, now you can also capture a screenshot of a specific element with the help of a playwright. In the below code, you can see that a locator path is sent as a parameter to the .screenshot() method.

page.locator("locator of that element").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("test-output/ScreenShots/screenshot.png")));

Here, we can see that the screenshot has captured only the element given in the locator.

4. Attaching Screenshot to Cucumber Report:

Now, we are going to discuss how to attach these screenshots to the cucumber report.

The first step is to set up your framework for the cucumber report, and this blog does a great job of explaining how to do that. This will allow you to add a screenshot to the Cucumber report using the code below. In general, this code is placed in your after hooks (AfterScenario, AfterStep, After). In the code below, I recently added a current millisecond time as the file name. However, you can customize the file names to your choice. 

public void screenshots(Scenario scenario) throws IOException 
    {
        WebUtil.takeScreenShots();
        long millisStart = Calendar.getInstance().getTimeInMillis();
        scenario.attach(array, "image/png",millisStart+".png" );
    }

Therefore, you can now view the Cucumber report with the screen attach to the report. while you click on the expand icon, You may see the screenshot as well.

5. Video Recording:

Now, here the playwright has the ability to record the video which will make it easier for the tester to understand their execution results. Then we’ll see how you fit that video into your report.

First, you must declare the context properties on your browser as shown in the below code. Or, you can simply update your context option where you can begin your context on the browser. Typically this method is called inside Before hooks.

public static BrowserContext RecordVideo() throws IOException 
    {
        return browserContext = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("test-output/RecordedTestCase/")));
    }

Now the above code will help you to record the video and it’s going to execute the test. After that, it will automatically be stored on the path which is shown in the code. Moreover, you must see that the context of your browser is closed after it will be stored.

The below lines of code demonstrate how to convert a recorded video into bytes. These bytes can then be used to attach the recorded video to a report or perform other operations.

public static byte[] encodeVideo(Path path) throws IOException {
    FileInputStream fis = new FileInputStream(String.valueOf(path));
    ByteArrayOutputStream bos = new ByteArrayOutputStream();
    byte[] b = new byte[1024];

    for (int readNum; (readNum = fis.read(b)) != -1; ) {
        bos.write(b, 0, readNum);
    }

    byte[] bytes = bos.toByteArray();
    return bytes;
}

After recording it from your project structure, you must use the following code to attach the video to the cucumber report. The tearDown method’s execution video attaching code is described below. This code will be easier to perform once the tearDown method has been completed and your video has been recorded and attached to the report. Normally, this teardown method is written using After hooks.

    public void tearDown(Scenario scenario) throws IOException 
    {
            browserContext.close();
            Path path = page.video().path();
            scenario.attach(WebUtil.encodeVideo(path),"video/webm", scenario.getName()+".webm");
	    browser.close();
            playwright.close();
    }

Now, the screenshots and videos will appear in the cucumber report as shown in the picture below. This video will be available as part of the report.

Conclusion:

Here, we see that the playwright automation tool allows us to take several screenshots as needed. How to record Capture screenshots and videos in java playwright which can help you to identify failures’ underlying causes without having to look at the report itself.

Read more blogs here