Skip to content

Files

Latest commit

 

History

History
273 lines (161 loc) · 11.9 KB

web-testing-on-real-devices.md

File metadata and controls

273 lines (161 loc) · 11.9 KB
id title hide_title sidebar_label description keywords url site_name slug
web-testing-on-real-devices
Web Testing On Real Devices
true
Web Testing On Real Devices (Beta)
LambdaTest mobile testing cloud offers a wide range of real Android and iOS devices to test on.This documentation will help you perform mobile web testing of your websites and web apps on LambdaTest real device cloud.
live mobile web testing
live mobile testing
mobile web testing
mobile device web testing
manual mobile web testing
manual android mobile testing
manual ios mobile testing
mobile web app testing tools
how to test mobile web app on real devices
how to test mobile web apps
LambdaTest
web-testing-on-real-devices/
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "LambdaTest", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Web Testing On Real Devices", "item": "https://www.lambdatest.com/support/docs/web-testing-on-real-devices/" }] }) }} ></script>

Web Testing On Real Devices

Mobile website testing involves testing websites and web apps across numerous mobile browsers like Chrome, Safari, Opera, etc to make sure your websites (and web apps) are rendering seamlessly across different mobile browsers and devices. LambdaTest real device cloud allows you to manually test websites and web apps on the range of real Android and iOS devices.

This documentation covers how to perform web testing across real Android and iOS devices on the LambdaTest platform.

Note: Currently Web testing on real devices is in the Beta phase. To access this feature, contact <span className="doc__lt" onClick={() => window.openLTChatWidget()}>LambdaTest Support.

Testing Websites And Web Apps On Real Devices

For demonstration, we will perform real-time web testing on real Android devices.

  1. Sign into your LambdaTest account. From the left menu, navigate to Real Time Testing and click Browser Testing tab.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/browser-testing.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. Select Android trademark symbol and choose the test environments like BRAND, DEVICE/OS, and BROWSER on which you wish to run the test. After that, click START.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/choose-config.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. A cloud-hosted real device environment will launch where you can perform live-interactive testing of websites for filing bugs.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/real-device-cloud.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Screenshots And Bug Logging

One-click bug logging allows users to capture screenshots for future reference and log bugs while performing real-time mobile browser testing.

  1. To log a bug, click on the Bug icon.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/bug-icon.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. Once the screenshot has been captured, you can either download it by clicking the download option or use the built-in image editor tools to highlight any bugs or tasks. After that, click MARK AS BUG.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/mab.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. An integration ticket will pop up. Provide the bugs/issue/task details and click Create Issue. Your bugs will be marked to your integrated bug-tracking tool.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/create-issue.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

LambdaTest offers 65+ integrations with your favourite tool for Bug tracking, CI/CD, Project Management, Codeless Automation, and more. Check out LambdaTest integrations.

Video Recording Of A Test Session

  1. Click on the Video recorder icon from the left tool bar.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/video-icon.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. The video recording of the current test session will start. To stop the test session recording, click again on the same Video recorder icon.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/video-timer.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Viewing Gallery

All the captured screenshots and test session video recordings are saved in the Gallery.

  1. To view the screenshots (or videos), click on the Gallery icon from the left tool bar.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/gallery.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. You can download these screenshots (or video recordings) to your local system. To download, click on the download option.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/download.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Accessing DevTools

DevTools allows you to launch a web app within a mobile browser and do the live-debugging.

  1. To access the DevTools, click on DevTools icon.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/devtools.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

The DevTools will be launched and you can perform the live-debugging of your websites.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/chrome-devtools.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Geolocation Testing And Setting GPS Geolocation

You can test mobile websites on different geolocations and GPS geolocations.

  1. Click on the location icon from the left tool bar and you'll notice a dropdown to select a geolocation.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/select-country.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. From the the dropdown, select the desired country on which you want to run the test.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/choose-geo.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Based on the selected country, the cloud machine would subsequently be routed to a specified IP address.

You can also test your websites based on the specific GPS Geolocation.

  1. Click on the location icon and select Set Location.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/set-location.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

  1. Enter the location address (or latitude and longitude) and then click Yes.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/confirm-loc.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

After few seconds, your GPS location will be set.

Device Controls

Using the device controls, you can change the keyboard language, rotate between portrait and landscape modes, return to the previous page, and increase/decrease the volume.

Device Orientation

From the left toolbar, click on the Rotate button.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/rotate.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

The device will be rotated to landscape mode or vice-versa.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/landscape.webp').default} alt="Image" width="1366" height="625" className="doc_img"/>

Return To Previous Page, Increase And Decrease Volume

Click on Device Controls icon and you'll notice the three icons for return to the previous page, increase volume and decrease volume.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/device-controls.webp').default} alt="Image" width="10" height="10" className="doc_img"/>

Here are following list of buttons with along with their respective action.

Action Icon Description
Return <img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/back.webp').default} alt="Image" width="25" height="25" className="doc_img"/> Return to the previous page.
Increase <img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/increase.webp').default} alt="Image" width="25" height="25" className="doc_img"/> Increase the volume.
Decrease <img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/decrease.webp').default} alt="Image" width="25" height="25" className="doc_img"/> Decrease the volume.

Ending A Test Session

  1. Click on the End Session icon.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/end.webp').default} alt="Image" width="10" height="10" className="doc_img"/>

  1. A pop-up box will appear, select Yes, End Session.

<img loading="lazy" src={require('../assets/images/mobile-testing-real-devices/end-session.webp').default} alt="Image" width="10" height="10" className="doc_img"/>

In case you have any questions or need any additional information, drop them at our <span className="doc__lt" onClick={() => window.openLTChatWidget()}>24X7 Chat Support or mail us directly at support@lambdatest.com.