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.
2) Enter Username and Password and click on the Login button.
3) Perform tap on text Sauce Labs Bike Light.
4) Swipe up and click on add to cart button.
5) Now click on the cart icon.
6) Perform tap on Checkout Button.
7) Enter first name, last name, zip code, and tap on the continue button.
8) Swipe up and perform tap on Finish Button
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.
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
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:
4) Now click on the test name to go back to the 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.
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
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”
Similarly, Click on the Password element and drag the Password Type block into the canvas and enter the password as “secret_sauce”
Similarly, Click on the Login element and drag Click the Login button block 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.
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
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.
Now click on the AddToCart element and drag and drop it to canvas from the elements section.
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.
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.
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
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.
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.
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
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.
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.
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
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.
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:
