Skip to content

Commit

Permalink
Added network capture docs for live testing
Browse files Browse the repository at this point in the history
  • Loading branch information
diegoperini committed Aug 20, 2024
1 parent ef5f05b commit f359d21
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 5 deletions.
34 changes: 29 additions & 5 deletions docs/mobile-apps/features/network-capture.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,26 @@ To enable network traffic capturing in your tests:
- [Espresso via saucectl](/mobile-apps/automated-testing/espresso-xcuitest/espresso/#networkcapture)
- [XCUITest via saucectl](/mobile-apps/automated-testing/espresso-xcuitest/xcuitest/#networkcapture)

Now you can start your live or automated testing session. Your network logs will be captured and displayed in the test results page.
Now you can start your live or automated testing session. Your network logs will be captured and displayed in the test results page as well as inside the live testing window.

## Accessing HAR Files
## Accessing Network Traffic in Realtime (Live Testing)

To be able to observe network traffic in realtime:

1. Enable network capture for your app like described above. You can skip this step for cross browser testing.
2. Navigate to **Live** -> **Mobile App**/**Cross Browser**
3. Choose device and start a session.
4. Launch the network inspector

<img src={useBaseUrl('img/mobile-apps/network-capture-1.png')} alt="Select Developer Options" width="650"/>
<img src={useBaseUrl('img/mobile-apps/network-capture-2.png')} alt="Start capture" width="650"/>
<img src={useBaseUrl('img/mobile-apps/network-capture-3.png')} alt="Inspect network logs" width="650"/>

A copy of what you see in the inspector can be downloaded in HAR format with the following button.

<img src={useBaseUrl('img/mobile-apps/network-capture-4.png')} alt="Inspect network logs" width="650"/>

## Accessing HAR Files (Live and Automated Testing)

To download HAR files from Sauce Labs:

Expand All @@ -51,6 +68,13 @@ curl --compressed \
-O https://{SAUCE_USERNAME}:{SAUCE_ACCESS_KEY}@{DATA_CENTER}.saucelabs.com/v1/rdc/jobs/{JOB_ID}/network.har
```

It is also possible to downloadthe HAR file during a live testing session.

1. Launch a new li
2. Launch the network inspector
3. Start the capture before the intended
4. Interact with the device to

### Viewing HAR Files

You'll need a HAR viewer to read HAR files. Sauce Labs provides a [React Network Viewer](https://opensource.saucelabs.com/network-viewer/) HAR viewer for your convenience. For step-by-step usage instructions, see our [Visualize HAR Files with the New React Network Viewer](https://opensource.saucelabs.com/blog/react_network_viewer/) blog article.
Expand All @@ -77,9 +101,9 @@ Alternatively, some other commonly used HAR viewers include:

- Android Emulators
- iOS Simulators
- Hybrid Applications (React Native, Cordova, Flutter)
- Android Chrome Browser
- iOS Safari Browser
- Hybrid Applications in automated tests (React Native, Cordova, Flutter)
- Android Chrome Browser in automated tests
- iOS Safari Browser in automated tests

:::

Expand Down
Binary file added static/img/mobile-apps/network-capture-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/mobile-apps/network-capture-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/mobile-apps/network-capture-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/mobile-apps/network-capture-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f359d21

Please sign in to comment.