How to Automate Mobile Web Applications with Ranorex Webtestit


#1

Mobile web testing can be challenging because of a variety of mobile devices, platforms and screen sizes. Also, finding the right element selectors can be quite a task.
Luckily, Ranorex Webtestit has your back!
In this post, we will show how to automate a mobile web application using Ranorex Webtestit, Ranorex Selocity, and Appium framework.

Appium is a testing framework used for testing iOS and Android mobile applications that contain browser-based UI components, native user components or a hybrid combination of both. Not only does Appium allow native or web testing, but it also - under the covers - uses the Selenium driver technology. For the purpose of executing the tests on real devices, there are handy device simulators that you can use to execute the Appium tests on them, so the math is clear: Ranorex Webtestit + Appium + Selenium = winning combination.

Creating stable and robust selectors is always a top priority in the world of test automation. This task requires time and patience and can often lead to frustration if the user can not find the appropriate element selector. This is where Ranorex Selocity steps in!
Ranorex Selocity is a free Google Chrome extension that generates selectors with one click directly in the DevTools sidebar panel. The smart selector generator automatically detects and ignores dynamically generated IDs. Selectors created with Ranorex Selocity will work on Google Chrome, Firefox, and Safari browser.
You can only imagine the pain of going through the DOM of a mobile web application with Safari’s Responsive device mode or using Device Mode in Chrome DevTools, and after you have found the element, you would need to create a selector manually. This all is handled with the Ranorex Selocity. Inspect the element, choose one of the selectors offered in the selector list and you are all set!

We will be automating mobile web applications with ease with the help of Appium and Ranorex Webtestit on emulated and real mobile devices.
To get started, we need some prerequisites :

  • install Xcode / Android Studio
    Please follow these steps to install and configure Xcode or Android Studio. We will use the devices emulated with the help of Xcode and Android Studio and run our tests on them.

  • install Appium
    Check out this topic to learn more about Appium in general and how to install and set up Appium for mobile testing.

In our example test project, we will automate our sample demo shop application, with the following scenario:

  • Add all three items to the cart
  • Open the cart and proceed to checkout
  • Place the order in the by filling the required fields
  • Assert that the order is successfully placed by verifying the total price

Create a new Project - In this example, we will use Java as our programming language. Ranorex Webtestit will download all the required Maven and Selenium dependencies and set them up automatically. After the project has been created open the POM.xml file, which is located in the root folder of the project, add the Appium Maven dependencies.
You can get the Maven Appium dependencies here

That’s it as far as setting up the project goes. We assured that we can communicate with the Appium server and execute tests on mobile devices by adding the dependencies, so we can dig into the test writing.

Let’s start by creating our first (ItemsPo) Page Object file. Inspect the “Add to cart” button from the items and sent the selectors to the Page Object file.
You will notice the elements located in the Elements Panel. Assign the click action to them by dragging the element to the code editor and selecting the appropriate action from the list. And to be sure that our elements are located and scrolled into view, we will simply add the Scroll to Element action in the same method, also simply by dragging the element into our click method and selecting the action from the list. The methods that we created in the Page Object file would look like this:

public ItemsPo addItem1() {
        WebElement addToCartElement = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart));

        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView()", addToCartElement);

        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart)).click();

        return this;
    }

    public ItemsPo addItem2() {
        WebElement addToCart1Element = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart1));

        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView()", addToCart1Element);

        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart1)).click();

        return this;
    }

    public ItemsPo addItem3() {
        WebElement addToCart2Element = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart2));

        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView()", addToCart2Element);

        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.addToCart2)).click();

        return this;
    }

    public CartPo clickCart() {
        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.cart)).click();

        return new CartPo(driver);
    }

Follow the same principle for the other Page Object files to complete our test scenario, and upon completion, we should end up with four (CartPo, CheckoutPo, ItemsPo, and OrderPo) Page Object files.

Next, we will create a Test file. In the Test, we will instantiate the Page Object and call the methods from our Page Objects. The final step is to add the assertion of the total price of our order, and the Test should look something like this:

  @Test
    public void SampleTestCase() {
        WebDriver driver = getDriver();

        // Instantiate the Page Object and open the web application
        ItemsPo items = new ItemsPo(driver);
        items.open("https://demoshop.webtestit.com/");

        // Add items, and open the cart
        CartPo cart = items.addItem1().addItem2().addItem3().clickCart();

        // Proceed to checkout
        CheckoutPo checkout = cart.goToCheckout();

        // Fill out the order form
        OrderPo order = checkout.enterFirstName("Chuck").EnterLastName("Norris").EnterEmail("[email protected]")
                .placeOrder();

        // Assert the total price
        Assert.assertEquals(order.getTotal(), "€3,700.00");

    }
}

Finally, we need to set up our remote endpoint which will use the Appium server and execute the test on our simulated iPhone 11 device. Start the Appium Server, and you should get the output similar to this:

We will use the IP dress and the port of the server in Ranorex Webtestit to set up our remote endpoint, together with the set of desired capabilities.
No need to heap your code with the capabilities and remote web driver calls, the custom Endpoint feature takes care of all that!
Provide the address in the URL field and the following capabilities in the capabilities field:

If you wish to execute your test on an emulated Android device, you can do this in the same fashion as we did for the simulated iPhone device. All you have to do is to Open Android studio, Click the AVD manager and start your virtual device. Depending on the Chrome version that you want to execute the test on, you might have to use the appropriate Chrome Driver version, and set the ChromeDriver executable with the help of capabilities. You can find out more about this topic in the official Appium documentation.
The Custom Endpoint for emulated Android device in Ranorex Webtestit would look like this:

You can set up real android devices and execute tests on them as an endpoint out of the box. Check out this post to see how to connect your Android device with Ranorex Webtestit.

That’s it. We are ready to execute our test on the simulated iPhone device! Run the test and observe the results: