Testing Web App on Mobile Browsers in Katalon

Introduction

We all must agree that testing is integral to developing web applications. It informs us whether the task is performing as per our expectations or not before it is launched.

Katalon, a platform for Automation Testing, is used to test web applications, APIs, and mobile and desktop applications. It is a powerful automation tool designed to generate and reuse automated test scripts for the User Interface without any need to code.

This article will discuss various aspects of Testing Web App on Mobile Browsers in Katalon Studio in detail. So, without further ado, let’s start.

Testing Web App on Mobile Browsers in Katalon

It was a long ago when the first website was launched, but who knew that websites would be wider than desktops and laptops? According to a survey. 54% of internet traffic uses the internet through their mobile phones. Considering this strength, the idea of testing web app on mobile browsers in Katalon came into existence. Any test case created using a desktop browser can also be executed using a mobile browser. Isn’t that fascinating?

Refer to the modules below for successfully Testing Web App on Mobile Browsers in Katalon Studio.

Pre-preparation

A list of requirements below is necessary and must be paid attention to before starting the whole process.

Katalon Studio's later version is installed in your system with beta Linux support.
Checking if your system meets the requirements of Katalon Studio.
An active Katalon account to sign up after installing the application.
Ensure that the web browser, whether Chrome or Safari, is installed properly and matches the requirements of Katalon Studio.

Understanding Application Under Test (AUT)

Since a large chunk of internet traffic is mobile users, web applications must be desktop-friendly and mobile-friendly. The type of accommodation must maintain their performance. However, the UI will vary depending on the type of accommodation for the same application to adapt to different devices. The reason is different screen sizes that might cause an issue with quality assurance. Also, the same element may differ in locations leading to the execution failure of test cases.

By now, you must have understood why understanding Applications under test is mandatory. You can handle failed test cases. All you have to do is understand your application carefully to continue with the process of Testing Web App on Mobile Browsers in Katalon Studio.

Creating a Test Case

A Test Case is an integral part of Testing Web Applications. There are two ways in which you can create a Test Case- Manual Mode and Script Mode.

Login Scenario

Firstly, install the chrome browser on your mobile device. Continue with login by entering a valid username and password. Click on Login to complete.

Manual Mode

This is the first way for a test case creation. To create a test case in Manual Mode with Katalon Studio, follow these steps properly.

1. Click on Add option in the toolbar. Select Web UI Keyword from the dropdown.

2. Choose the Option Browser option and enter the required URL in the input field. Select Wait for Page to Load to provide a timeout in the input field.

3. For the Button Object Make Appointment, add the Wait for Element Visible keyword.

4. Ensure the element is clickable using the Verify Clickable keyword before performing any Click action.

5. Pass the Button Object Make Appointment.

6. Select desired Click Action to be executed on the Make Appointment button.

7. Now, wait for the Element Visible login. Add Verify Element Clickable option to pass the object as Login button.

8. Set username as “CodingNinjas” and password as “NewPassword”.

9. On the login button, add the Click Action. Now, Wait for Element present of the Make Appointment button.

10. Now, add the Get Text keyword that will capture the Header Make Appointment. Store the captured value in a variable new_Header.

11. Verify the original and expected values using the Verify Match keyword.

12. Shut down the browser.

Script Mode

This is the second way for a test case creation. Enter the code below in the editor to proceed.

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.model.FailureHandling as Failure
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as Web

'Launch Browser'
Web.openBrowser('http://demo.katalon.com/')

'Wait for Page Load'
Web.waitForPageLoad(50)

'Wait for Element Visible of Button Appointment'
Web.waitForElementVisible(findTestObject('Browser Application/button_Appointment'), 50)

'Verify Button Appointment is clickable or not'
Web.verifyElementClickable(findTestObject('Browser Application/button_Appointment'), Failure.STOP_ON_FAILURE)

'Click on Button Appointment'
Web.click(findTestObject('Browser Application/button_Appointment'))

'Wait for text Header.'
Web.waitForElementVisible(findTestObject('Browser Application/text_Header'), 50)

'Verify text Header is in visible '
Web.verifyElementVisible(findTestObject('Browser Application/text_Header'))

'Enter username as "CodingNinjas"'
'Enter password as "NewPassword"'
Web.setText(findTestObject('Browser Application/Password'), 'NewPassword')

'Click on Login Button'
Web.click(findTestObject('Browser Application/button_Login'))

'Wait for Element Present of "Appointment"'
Web.waitForElementPresent(findTestObject('Browser Application/text_Appointment'), 50)
'Get the Header text of Appointment and store in "new_Header" variable'
new_Header = WebUI.getText(findTestObject('Browser Application/text_Appointment'))

'Verify the actual and Expected text'
Web.verifyMatch(new_Header, 'Appointment', false)

'Close the Browser'
Web.closeBrowser()

We are done with creation of test cases. Now, its the time to execute those test cases using mobile browsers.

Execution using Mobile Browsers

Ensure that there is no problem with the devices’ connection. That means real devices are connected, virtual devices are loaded, and cloud devices are connected properly. Select the desired Test Case from Katalon Studio and select Android or iOS from the execution options.

Stay calm if it is taking a while. It happens because the test case is being loaded in the selected device.

Troubleshooting Errors

There are two types of Troubleshooting Errors that occur very often.

ChromeDriver Related Errors

A ChromoDriver Related Error may look like this.

error: No Chromedriver found that can automate Chrome '<chrome_version>'

You can fix this error by downloading the ChromeDriver for Appium manually. Find a GitHub repository yourself or select ChromeDriver.The npm package appium-chromdriver comes along with the latest version of ChromeDriver. Now, replace the old version with the latest one.

For macOS, go to

/usr/local/lib/node_modules/appium/node_modules/appium-chromedriver

For Windows, go to

<user_name>\AppData\Roaming\npm\node_modules\appium\node_modules\appium-chromedriver

W3C mode Related Errors

A W3C mode-related error looks like this.

Caused by: org.openqa.selenium.UnsupportedCommandException: unknown command: Call non W3C standard command while in W3C mode

This error has already been resolved in Katalon Studio's latest version. Upgrade to the latest version for resolution.

Frequently Asked Questions

How much do you have to pay to use Katalon Studio?

There is a free version of Katalon Studio that is available for all. It comes with a few features. You can request a 30-days free trial for the premium version. Suppose you want to continue with the premium plan after 30 days. You will have to pay $1899 for Enterprise Edition and $1334 for TestCloud Edition.

Mention the advisable key store format in Katalon.

The most advisable key store format in Katalon is PKCS #12.

Discuss Manual View vs Script View in Katalon.

The Manual View is quite basic. It allows you to use simple keyword-driven configuration for generating automated tests and, thus, requires no coding.

The Script View is specially designed for advanced users and programmers. They must be familiar with modifying and writing test scripts using Groovy or Java.

Define Test Case.

A Test Case is like a bookmark after which the behavior of the test is checked. You can put multiple test cases in a single test. You can group test cases into a single test suite in a logically.

Conclusion

Overall, we understood several aspects of the Testing Web App on Mobile Browsers in Katalon Studio. This includes the

We hope the above discussion helped you understand Testing Web App on Mobile Browsers in Katalon Studio and can be used for future reference whenever needed. To learn more about Katalon Studio and its components, you can refer to blogs on Installing Katalon Studio, Looping Statements in Katalon Studio, Katalon Studio vs ACCELQ, Katalon Studio vs Ready API, and Keyboard Shortcuts in Katalon Studio.

Visit our website to read more such blogs. Make sure you enroll in our courses, take mock tests, solve problems, and interview puzzles. Also, you can pay attention to interview stuff- interview experiences and an interview bundle for placement preparations. Do upvote our blog to help fellow ninjas grow.

Happy Coding!