Generate test scripts for a Progressive Web App using mobile recorder in Katalon Studio

A Progressive Web App (PWA) is a modern web application that feels like a web app and works like a native app. It offers rich features such as Offline mode and Push notifications and creates home screen shortcuts as native apps do. It combines the best features of web apps and native apps.

This user guide shows you how to record and generate test scripts of a PWA using a mobile recorder. In this example, we wish to record and generate test scripts for the launch of Twitter from the home page of a mobile browser. If you want to test the PWA on a Cloud device, you can use any of the browser testing tools available, such as Kobiton, LambdaTest, Browserstack, etc. We have opted to use BrowserStack as the tool of choice. The use case that you wish to accomplish can be as follows:

• Open the Chrome browser on your mobile device.
• Type the Twitter URL in the Chrome browser.
• Open the Twitter website.

Important:

• Android mobile device with a Universal Serial Bus (USB) data cable.
• Application Under Test (AUT): E.g. Twitter on your mobile.
• Browserstack AUT ID: The AUT ID you use based on your Cloud provider.

For more information on how to set up your Android mobile device to test Android applications with Katalon Studio, refer to Android Setup for mobile devices.

You can also use an Android Studio Emulator to test Android applications. This eliminates the need for a mobile device physically connected to your system. For more information on how to configure an Android Studio Emulator, refer to Configure Android Studio Emulator for mobile devices.

To generate test scripts using a mobile recorder, perform the following steps:

Create and run your Android test case

For more information on how to create and run your Android test case, refer to [Mobile] Create and Run Android Test Case.

Configure remote server settings

1. Launch Katalon Studio and go to Project > Settings.

   
   
   

2. The Project Settings page appears. Go to Desired Capabilities > Remote.

   The remote server details display accordingly.

   For more information on configuring your project settings in BrowserStack, refer to BrowserStack Integration.

   
   
   

   Enter the following remote server information:

   • Remote server URL: Enter the URL of your remote server. E.g. http://hub.browserstack.com/wd/hub
   • Remote server type: Select Appium in the dropdown list.
   • Appium driver: Select Android Driver in the dropdown list.

3. Specify whether you want to start the recording with an Application File or Application ID.

   • Application File: Browse to your tested application (.apk file for Android; .ipa file for iOS)
   • Application ID: Specify the Application ID of your tested application, which is either the package name of an Android app or the bundle identifier of an iOS app.

     For more information about how to set up the configuration using Application File or Application ID, refer to Mobile Recorder utility.

Recording the desired use case

1. On the main toolbar of Katalon Studio, go to Action > Record > Record Mobile.

   
   
   

2. Click Start to begin recording your use case.

   Note:

   • You have to Wait until the AUT launches and the Device View and All Objects sections are ready for you to interact with the application.

3. Go to Device View > click the Chrome icon.

   Katalon Studio selects Chrome in the All Objects section.

   
   
   

4. Once you click on the Chrome icon, Tap is enabled in the Available Actions section. Click Tap. The tap action works as follows:

   • The Device View displays the new page in the Chrome browser.
   • The Tap action is added to the list of steps in the Recorded Actions section.

5. Click the Search field in the Chrome browser followed by the Set text tab that is enabled.

   
   
   

6. The Text Input dialog box appears. Type the Twitter URL in the dialog box and click Ok.

   
   
   

7. The Twitter link is added to the Device View section and the Set Text action is added to the list of steps in the Recorded Actions section.

   
   
   

8. Click the Twitter link in the Device View section followed by the Tap action that is enabled in the Available Actions section.

   The Twitter home page appears in the Device View section and the Tap action is added to the Recorded Actions section.

   
   
   

9. In the Device View section > click Switch to the app > then click Capture Object. Wait until all objects are captured and then click Tap in the Available Actions section.

   All the actions are recorded, the Tap action is added to the Recorded Actions section, the mobile device launches the AUT and the current view of the AUT appears. Click Save Script to save the test script generated.

   
   
   

   
   
   

Troubleshooting

An error message appears when you install the Android Studio emulator:

If your system runs on an Advanced Micro Devices (AMD) processor, you might get an Android Emulator Hypervisor Driver for AMD Processors is not installed error message.

To solve this error, you can follow these steps:

1. Go to Control Panel > Programs and Features > Windows Features.

2. Clear the Hyper-V Platform and Hyper-V Management Tools checkboxes, respectively.

   
   
   

3. Reboot the system and access Bios > SVM Mode.

   Depending on the processor, Secure Virtual Machine (SVM Mode) is known by different names such as Virtualization/Inter Virtual Technology, etc.

   In some processors such as Ryzen, you can locate SVM under Configurations > SVM Mode while in others such as Gigabyte, you can locate it under M.I.T > SVM Mode.

   
   
   

4. Change the SVM Mode option from Disabled to Enabled.

5. Restart your system and proceed with the Android emulator installation.

   For more information on how to configure the Hypervisor Driver for AMD processors, refer to the GitHub forum.