Scriptworks Logo

Sample E2E Test Run on Native Mobile App (Android)

28 May 2021

This Article demonstrates how Scriptworks can handle end-to-end test runs on a Native Mobile App of your choice. (Recommended reading - our Guide to Mobile App Testing).

Introduction

In this article, we will perform an end-to-end test run on a sample mobile app named Swag Labs, where we will be performing taps and swipes up the way we use mobile through our hands using Scriptworks – A Visual Programming/low Code Automation tool.

First, I will demonstrate the exercise we need to perform, followed by practically demonstrating the Automation through Drag and Drop of the relevant Blocks present in Scriptworks for achieving it.

Prerequisite:-

The user should have scriptworks-client, appium server, and emulator up and running. Please follow this article to get ready with basic settings.  

Exercise:- 

1) Open Swag labs app on mobile/emulator.

Putting normal emulator in the canvas
open swag labs in emulator

2) Enter Username and Password and click on the Login button.

Enter username and password image in emulator
Entering Username and Password

3) Perform tap on text Sauce Labs Bike Light.

login into the app in emulator

4) Swipe up and click on add to cart button.

price of bike light

5) Now click on the cart icon.

click on cart image on emulator

6) Perform tap on Checkout Button.

Perform tap on emulator image of checkout

 

7) Enter first name, last name, zip code, and tap on the continue button.

Enter firstname, last name and continue button

8) Swipe up and perform tap on Finish Button

Finish page of swag labs
last page of app

 

Practical Demonstration:-

Following are the Steps to Perform the above process, including validation using Visual Programming/Low code in Scriptworks:

Pre-requisite: Users should be able to login to Scriptworks via their Credentials, and their Scriptworks Client should be up and running. 

To know more about the Scriptworks Client and Selenium Standalone Server, please follow this Article.

1) Open Scriptworks on your system with your credentials and open the project where you want to perform the above-mentioned exercise.

Open project in scriptworks

2) Now click on the Target symbol present on the left side panel, select mode as Local Session, and click on Start Button. After that Click on add element button to identify elements needed to perform automation on a given mobile app

TargetSymbol → Click on Start → Click on Add Element

screenshot of clicking on target symbol
Screenshot of creating elements

3) Create a list of all the required elements using the Inspector process.

HINT - You can perform navigation and type values directly in the Emulator Window and hit the Refresh button in the Scriptworks Inspector to grab a fresh screenshot for inspection.

I have created all of them as shown below:

screenshot of all the elements listed on left hand side

4) Now click on the test name to go back to the workspace. 

screesnhot of going to workspace

5) Now click on the Block symbol present on the left side panel and then click on getting started 

BlockSymbol → Getting Started → WebDriverJS

As we know, we are going to initiate a WebDriverJS test. So Drag and Drop “WebDriverJS” onto the Canvas After clicking on the Getting Started link.

Screenshot of blocks and getting started

screenshot of selecting webdriverjs
screenshot of putting webdriverjs in canvas

6) Now, we will use the comment block to let others know what we will perform. For that, we are going to click on the search text box, write "comment", and hit return.

Search → Comment → Drag and Drop to Canvas

screenshot of searching comments
screenshot of comment inside the canvas

7) To Login into the Swaglabs app, we need a username, password and a click on the login button is required.

For that, click on the Display element symbol, click on Username element and drag Username Type Block into the canvas and enter the username as “standard_user”

screenshot of clicking on display elements
Select username in emulator
screenshot of username inside the canvas

Similarly, Click on the Password element and drag the Password Type block into the canvas and enter the password as “secret_sauce”

screenshot of password type in canvas

Similarly, Click on the Login element and drag Click the Login button block into the canvas

Click on Login button on Emulator
Screenshot of login button into the canvas

8) The Next Step is to Tap on SauceLabs Bike Light, swipe up then click on add to cart button.

Pull another comment block to canvas to let people know what we are going to perform. For drag and drop comment block into the canvas follow step 6.

Screenshot for comment for bikelight inside the canvas

To tap on the text “Sauce Labs Bike Light”. Click on the Mobile - Gestures (Android) category and drag and drop the perform tap on text block into the canvas and in place of text placeholder write "Sauce Labs Bike Light". Note - this is case sensitive

Screenshot of perfrom tap on text is inside the canvas

To Swipe up. Click on the Mobile - Gestures (Android) category and drag and drop the swipe on element block into the canvas and in place of text placeholder attach the main view selector element as we are swiping up from the main view only.

Screenshot of attach mainview in swipe up blokc

Now click on the AddToCart element and drag and drop it to canvas from the elements section.

Screenshot of select add to cart
Screenshot of drag click add to cart into canvas

9) Next Step is To perform a checkout. For that, we need to click on the Cart Icon and perform a tap on the Checkout button. In the next screen, Enter Firstname, Lastname, and Zipcode and perform tap on Continue Button.

Pull another comment block to canvas to let people know what we are going to perform. For drag and drop comment block into the canvas, follow step 6.

Screenshot for checkout comment inside the canvas

Now click on Cart Icon. For that, click on the Cart element and select Click on Cart Block and drag and drop it to Canvas.

Screenshot of click on cart element and select click on cart blokc

To perform a tap on the Checkout Button. Click on the Mobile - Gestures (Android) category and drag and drop perform tap on text block into the canvas and in place of the text placeholder write CHECKOUT. Note - this is case sensitive

Screenshot of click on mobile gestures and select perform tap on text
Screenshot perfrom tap on text for checkout is inside the canvas

Now on the next screen for entering the first name, last name, and zip code. Click on FirstName, LastName, and ZipCode elements and drop them into the canvas.

Screenshot of firstname,lastname etc

We will use data generation fakers this time to enter FirstName, LastName, and ZipCode. For that, click on Data Generation (Faker) category on the left-hand side and select generate name first Name and generate address block and drag and drop them into the canvas.

Click on the drop down from the 2nd data faker from the top and select the last name to get the last name out of the generate data faker as shown below.

Screenshot for selecting lastname from faker
Screenshot of all elements

To perform tap on Continue Button. Click on the Mobile - Gestures (Android) category and drag and drop the perform tap on text block into the canvas and in places of text placeholder write CONTINUE. Note - this is case sensitive

Screenshot of whole block inside the canvas

10) Now the last step to perform is to click on the finish button. 

Pull another comment block to canvas to let people know what we are going to perform. For drag and drop comment block into the canvas, follow step 6.

Screenshot for finish comment

First, we have to swipe up in the main view and then tap on the Finish button. To Swipe up. Click on the Mobile - Gestures (Android) category and drag and drop the swipe on element block into the canvas and in place of text placeholder attach main view selector element as we are swiping up from the main view only.

Screenshot of Swipe up to main view
Screenshot of main view selector inside the canvas for Finish

To perform, tap on Finish Button. Click on the Mobile - Gestures (Android) category and drag and drop the perform tap on text block into the canvas and in place of the text placeholder write FINISH. Note - this is case sensitive

Screenshot of Perform tap on finish
Screenshot of Whole body inside the canvas

11) Now, the final thing is a Test Run. Make sure you have followed the prerequisite mentioned above before the Test Run. Make sure you can see Green Symbol before clicking on the play icon. 

screenshot of play icon
Screenshot of Test Pass

This is how we have successfully completed an end-to-end test run on the Android Swaglabs Native mobile app via Scriptworks - A low code / visual programming tool!

The Test Run is shown in the Video below:

Gif file for Swag labs end

<<Previous Post                  Next Post>>

Scriptworks logo
© Copyright 2024 | Scriptworks is part of Odin Technology Ltd, a company registered in England no. 03735083