How to Scroll Down to an Element in Selenium WebDriver with Appium

Let's say that you're automating a test scenario for a mobile application, and you need to interact with an element that is not initially visible on the screen. You need a way to scroll down until the element becomes visible, allowing you to perform actions on it.

To tackle this problem, you can create a reusable method that scrolls down to a specified element. This method will use the TouchAction class in Appium to simulate a touch-based scroll gesture until the element becomes visible. 

Here's a sample method in Java:

public void scrollDownToElement(WebElement element) {
    Dimension size = driver.manage().window().getSize();
    int startX = size.width / 2;
    int startY = (int) (size.height * 0.8);
    int endY = (int) (size.height * 0.2);

    while (!element.isDisplayed()) {
        TouchAction<?> action = new TouchAction<>((PerformsTouchActions) driver);
        action.press(PointOption.point(startX, startY))
                .waitAction(WaitOptions.waitOptions(Duration.ofMillis(500)))
                .moveTo(PointOption.point(startX, endY))
                .release()
                .perform();
    }
}

Let's break down how this method works:

1. We obtain the screen dimensions to calculate the starting and ending points for the scroll gesture. So we set startX to the middle of the screen, startY to 80% down from the top, and endY to 20% down from the top.
2. We enter a while loop that continues until the specified element becomes visible.
3. Inside the loop, we create a TouchAction instance and perform the following steps:
• press: We press at the starting point.
• waitAction: We introduce a small delay (500 milliseconds) to allow the element to become visible.
• moveTo: We move the touch to the ending point.
• release: We release the touch action.
4. The scroll action is performed repeatedly until the element is displayed, indicating that it is now in view.

The scrollDownToElement method presented here provides a reusable solution for ensuring that your target element is within view, allowing you to automate interactions seamlessly. Happy testing!

Android Architectural Pattern - Databinding or 2 way Databinding.

' We don't use resource Id's for these. They are designed using a different architectural pattern called data binding and in some cases 2 way data binding.'

This is what my friendly app lead told me when I told him I'd like to have 'resource IDs' for some of the elements in the UI. He further said to look 'automated testing using Android dataBinding' and for any hook onto the databindingImpl classes. Very useful hints :).. thanks G

Android DataBinding

Android DataBinding is a library that allows you to bind UI components in your app's layout files directly to data sources (e.g., ViewModel).

It simplifies the process of updating UI elements when data changes and can improve code readability

Steps to identify and interact with elements

Assuming you are using appium/java. Also you have setup necesssary env setup such as mobile capabilties and driver initialisation , server startup, here is how the element capturing happens.

Since DataBinding allows you to bind UI elements directly to data sources, it is a bit different from the traditional method of locating elements using resource IDs or XPath

• In Android DataBinding layouts, UI elements are bound to data sources using expressions like @{viewModel.text}.

• To locate and interact with these elements in your automated tests, you can use the driver.findElementByAndroidUIAutomator method.

• You construct a UiSelector expression that matches the text or other attributes bound to the element. 

• In this case, I am looking for a TextView with the text matching viewModel.text.

  import io.appium.java_client.android.AndroidElement;
  
  // Locate TextView using DataBinding expression
  AndroidElement textView = driver.findElementByAndroidUIAutomator(
      "new UiSelector().textMatches(\".*" + viewModel.text + ".*\")"
  );
  

  
  

• Once I have identified the element using DataBinding expression, I can perform various interactions such as clicking, sending text, or verifying properties. 

  // Click a button
  button.click();
  

  
  

Hybrid approach to Automation

What does hybrid approach to test automation mean?

It's a strategic approach that aims to support better maintainability and reduce flakiness in end-to-end (E2E) test automation. This approach involves using a combination of API tests and UI tests.

In scenarios where certain prerequisites must be met before attempting the actual test, we can use endpoint calls/API tests to achieve these prerequisites. Then, we can use webdriver tests for UI-level functional validations/assertions.

By using this approach, we can redice the flakiness that may come from  webdriver tests due to delays, object changes, and other issues. This approach is particularly useful for sections of the test case that are outside the main test case.

Let me explain with an example:

In here we are doing a mandatry field validation check; Our featue file is as below;

Scenario: Mandatory fields validation
Given I am a registered user
And I go to the accounts page
And I leave the basic salary field blank
When I try to move to the next page
Then a validation error message is displayed for the basic salary field

My step definition will be like this; 

public class MandatoryFieldsValidationStepDefinitions {

    @Given("I am a registered user")
    public void iAmARegisteredUser() {
        // Code to implement the Creat user step using RestAssured API
        
    }

    @And("I go to the accounts page")
    public void iGoToTheAccountsPage() {
        // Code to implement the "And" step using Appium
        // Navigate to the accounts page using Appium
    }

    @And("I leave the basic salary field blank")
    public void iLeaveTheBasicSalaryFieldBlank() {
        // Code to implement the "And" step using Appium
        // Find the basic salary field element and clear its value
    }

    @When("I try to move to the next page")
    public void iTryToMoveToTheNextPage() {
        // Code to implement the "When" step using Appium
        // Find the "Next" button element and click it
    }

    @Then("a validation error message is displayed for the basic salary field")
    public void aValidationErrorMessageIsDisplayedForTheBasicSalaryField() {
        // Code to implement the "Then" step using Appium
        // Find the error message element for the basic salary field and verify it is displayed
    }
}

So how do we support this in our test framework? Since the CucumberRunner takes care of executing the features by mapping them with the correct step definition, all we have to do is ensure that our design is correct and that relevant API testing and webdriver libraries are included in the project.

A sample automation framework structure for a Maven project is shown below;

CucumberRunner sample

In this example file, I've added the following options while extending the AbstractTestNGCucumberTests class

import cucumber.api.CucumberOptions;
import cucumber.api.testng.AbstractTestNGCucumberTests;

@CucumberOptions(
        features = "src/test/resources/features",
        glue = {"step_definitions"},
        tags = "@JREQ-BA001-2088 or @smoke or @SE",
        plugin = {
                "pretty",
                "html:target/cucumber-html-report",
                "json:target/cucumber.json",
                "rerun:target/rerun.txt"
        },
        strict = true,
        monochrome = true,
        dryRun = false,
        snippets = cucumber.api.SnippetType.CAMELCASE
)
public class MyTestRunner extends AbstractTestNGCucumberTests {
}

• tags: Allows you to run only scenarios with specific tags. In this case, we're running scenarios with any of the three tags specified in the feature file. I have the story ticket, the test inclusion category and the feature tagged.
• plugin: This specifies the output formats for the Cucumber report. In addition to the "pretty" format, we're also generating an HTML report, a JSON report, and a rerun file (which lists any scenarios that failed on the first run and need to be rerun).
• strict: If set to true, Cucumber will fail if there are any undefined or pending steps. I prefer to have this set to false and user the power of the dryRun option.
• monochrome: This makes the output in the console easier to read by removing colour and special characters.
• dryRun: If set to true, Cucumber will check that all steps have corresponding step definitions, but won't actually run the scenarios. This can be useful for quickly checking that your step definitions match your feature file.
• snippets: This specifies the naming convention for generated step definitions. In this case, we're using CamelCase naming.

Chosen path for using feature files to call my test daa

 

This is a summary of the findings from my research past week.  

Out of these, I am choosing the method 3 considering the plus points that I could think of..

Using feature files for API test automation - 3

In here the entire user payload is read from the examples table and stored as a Map in the step definition. 

This approach is useful when you have a small number of fields in the request body, and you can easily read them from the feature file's data table.

Scenario Outline: Create User Successfully

    Given the user payload is:
      | first_name    | <first_name> |
      | last_name     | <last_name>  |
      | email         | <email>      |
      | mobile_phone  | <mobile_phone> |
      | date_of_birth | <date_of_birth> |
      | password      | <password>   |
      | username      | <username>   |

    When I send a <method> request to <path>

    Then the response status code should be <status_code>

    Examples:
    | first_name | last_name | email                 | mobile_phone | date_of_birth | password  | username | method | path           | status_code |
    | John       | Doe       | john.doe@example.com  | 1234567890  | 1990-01-01    | password | johndoe  | POST   | /users/create | 201         |

My stpe definition is as below;

public class CreateUserStepDefinitions {

    private RequestSpecification requestSpec;
    private Response response;
    private Map<String, String> userPayload = new HashMap<>();

    @Given("the user payload is:")
    public void the_user_payload_is(Map<String, String> userData) {
        this.userPayload = userData;
    }

    @When("I send a {string} request to {string}")
    public void i_send_a_request_to(String method, String path) {
        requestSpec = RestAssured.given()
                .contentType(ContentType.JSON)
                .body(userPayload);

        response = requestSpec.when()
                .request(method, path);
    }

    @Then("the response status code should be {int}")
    public void the_response_status_code_should_be(int expectedStatusCode) {
        assertEquals(expectedStatusCode, response.getStatusCode());
    }

}

Let me explain the java bits in here - 

In the method the_user_payload_is, the Map<String, String> userData parameter contains the data that was provided in the Examples table of the feature file. The data is in key-value pairs where the key represents the column header and the value represents the corresponding cell value.

this.userPayload variable is an instance variable of the class (which means it can be accessed from any method within the class). In the_user_payload_is method, we are assigning the userData map to the userPayload instance variable. This is done so that we can access the userPayload map in other methods within the class, specifically the i_send_a_request_to method.

In the i_send_a_request_to method, we are using the userPayload map as the body of the request. 

The RestAssured.given() method is used to start building the request. It is followed by the .contentType(ContentType.JSON) method, which specifies that the request body will be in JSON format. The .body(userPayload) method sets the request body as the userPayload object, which contains the data for creating a new user.

The requestSpec.when().request(method, path) method is then called to send the request to the server with the given method and path. This method returns a response object, which is stored in the response variable for later use in the_response_status_code_should_be method.

Using feature files for API test autimation - 2

 Feature file

Similar to the last post, I'm usinng RestAssured for API test automation. Cucumber is used for mapping the feature scenarios. Also extending AbstractTestNGCucmberTests to run the test suite.

Difference is the way the payload is handled. Instead of reading the payload from exmaple tables, I am loading it from a json file.

This way it gives me more flexibility in managing test data/payloads.

I am still using exmaple tables to read other paramaters via <> tags in my featuer file .

Feature: Create User API

  Scenario Outline: Create User Successfully
    Given the user payload file is <data_file>
    When I send a <method> request to <path>
    Then the response status code should be <status_code>

    Examples:
    | data_file                             | method | path                  | status_code |
    |/test/java/resources/user_details.json | POST   | /user_accounts/create | 201         |

Payload file

{
  "first_name": "John",
  "last_name": "Doe",
  "email": "john.doe@example.com",
  "mobile_phone": "1234567890",
  "date_of_birth": "1990-01-01",
  "password": "p@ssword_1",
  "username": "johndoe"
}

CreateUserStep.java

public class CreateUserSteps{
    private RequestSpecification requestSpec;
    private Response response;
    private String requestBody;

    @Given("the user payload file is {string}")
    public void the_user_payload_file_is(String filePath) {
        requestBody = TestDataUtil.getJsonRequestString(filePath);
    }

    @When("I send a {string} request to {string}")
    public void i_send_a_request_to(String method, String path) {
        response = requestSpec.contentType(ContentType.JSON)
                .body(requestBody)
                .when()
                .request(method, path);
    }

    @Then("the response status code should be {int}")
    public void the_response_status_code_should_be(int statusCode) {
        response.then().statusCode(statusCode);
    }
}

Using feature files for API test autimation - 1

I am usinng RestAssured for API test automation. Cucumber is used for mapping the feature scenarios with the implmentation. In other words we have use of gherkin language in feature files and replication of same in stepdefinitions which has my restAuured/java test implementations.

Since I am a fan of TestNG's capabilities I am extending AbstractTestNGCucmberTests.

Feature file

Feature: Create User API

  Scenario: Create User Successfully
    Given the user payload is:
      | first_name    | John   |
      | last_name     | Doe    |
      | email         | john.doe@example.com |
      | mobile_phone  | 1234567890 |
      | date_of_birth | 1990-01-01 |
      | password      | password |
      | username      | johndoe |
    When I send a {method} request to {path}
    Then the response status code should be 201
    |method  | path         | status_code |
    | POST    |/user_account/create"|201         |

StepDefinitions

To handle the payload, I am  using .replace method, where values in an existing jsom template is replaced with the data in exmaple table.

The helper class TestDataUtil, uses its updateJsonRequestString method to get us the payload. This is what is does;

First it reads the content of the json file. Then it replaces all the placeholders in it with the corresponding values in the data table. Also saves it as a String. The modified String is then written back to the json file. This updated json file is assigned to requestBody variable.

public class CreateUserSteps {
        private RequestSpecification requestSpec;
        private Response response;
        private String requestBody;

    @Given("the user payload is:")
    public void the_user_payload_is(Map<String, String> dataTable) {
        String requestBody = TestDataUtil.updateJsonRequestString("create_user.json")
                .replace("{{first_name}}", dataTable.get("first_name"))
                .replace("{{last_name}}", dataTable.get("last_name"))
                .replace("{{email}}", dataTable.get("email"))
                .replace("{{mobile_phone}}", dataTable.get("mobile_phone"))
                .replace("{{date_of_birth}}", dataTable.get("date_of_birth"))
                .replace("{{password}}", dataTable.get("password"))
                .replace("{{username}}", dataTable.get("username"));
    }

    @When("I send a {string} request to {string}")
    public void i_send_a_request_to(String method, String path) {
        response = requestSpec.contentType(ContentType.JSON)
                .body(requestBody)
                .when()
                .request(method, path);
    }

    @Then("the response status code should be {int}")
    public void the_response_status_code_should_b(int expectedStatusCode) {
            response.then().statusCode(expectedStatusCode);
    }
    
}