Interactive Debugging

Introduction

Typically, failed tests have finished execution by the time a user wants to debug them. They have to rely on various logs captured during test execution to debug. However, at times it is still not possible to identify the cause of failure. It can be a difficult or time-consuming process to debug these failed tests.

You can now debug your failing test scripts with the Interactive Debugging feature while the test remotely runs on BrowserStack. To do so, use your IDE’s debugger capabilities to pause at a breakpoint or step through test-script code. As you do this, BrowserStack’s integration with Appium Desktop allows you to visually see and interact with your app in a running Appium session on remote Android and iOS devices. You can inspect properties & attributes of app elements and interact with them.

How to use Interactive Debugging

Follow the steps below to start an Interactive Debugging session:

Step 1: Setup Appium Desktop with BrowserStack

1. This feature is currently available in the pre-release version v1.20.2-3 and above of Appium Desktop. Download the supported version of Appium Desktop installation binary through this link and install Appium Desktop
2. After successful installation, start a New Session Window
3. Click on Select Cloud Providers tab
4. Select BrowserStack from the list
5. Enter your BrowserStack Username and Access Key which you can find on your BrowserStack Account Settings in Appium Desktop page.

You are now ready to use the Attach to an existing session functionality for interactive debugging of a running BrowserStack session on Appium Desktop.

Step 2: Use your IDE to execute test script in debugger mode.

Breakpoints are special markers that suspend program execution at a specific point. You can set a breakpoint on any line of executable code. Check your IDE documentation for more details on setting breakpoints. Once desired breakpoints are set, execute your test script in debugger mode. The test script will pause execution at desired breakpoint.This works with any IDE that has native debugger capabilities.

Step 3: Select Attach to Session on Appium Desktop

1. Open Appium Desktop and start a new session window as shown above
2. Select BrowserStack and click on Attach to Session tab
3. Click on the dropdown to fetch all running sessions on BrowserStack App Automate & select the session you want to debug and interact with. If you do not see any sessions after you have started the test execution, click on the refresh icon & wait for some time for the sessions to appear.
   Note: You can get the session id from App Automate Dashboard or by using getSessionId command as well.
4. Select a session and click on “Attach to Session” CTA.

This will open Appium inspector window that will enable you visually see & interact with the app running remotely on BrowserStack device.You will have full control of your ongoing test session. For any action performed in your interactive session, you can open the App Automate Dashboard to access test details & logs.

Important debugging capabilities on Appium Desktop:

1. Inspect elements & check identifiers: You can mouse over various UI elements in your application, and see them highlighted. When an element is highlighted, its information will appear in the detail view on the right side of the Inspector. This detail view consists of potential actions to take against the element, and a table of the element’s properties.

2. Navigate through XML tree & search identifiers: You can also navigate the XML tree (shown in the right side of the image) by clicking through it, or by clicking on elements in the screenshot view. They will then be highlighted. You can also search for an element by clicking on Search for element CTA in top toolbar.

3. Perform actions like swipe, tap, click etc: With an element selected, you can also ‘Tap’ the element, or ‘Send Keys’ to the element (if it is a text field) or swipe on the screen. When you take such an action with any element, the Inspector will send the command to Appium server running on BrowserStack, which will execute it. If the action is successful, a new screenshot will be generated and you should see the updated state and XML of your app.

4. Refresh (refresh the source and screenshot): You can use the refresh button in Appium Desktop inspector to refresh the screen displayed. Once you click refresh, you will get an updated XML tree and screenshot of your app screen.