Skip to main content

LT Browser - Test Website For Responsiveness Easily


LT Browser allows you to ensure your website's responsiveness over a variety of major devices and view ports. You can open a website in the LT Browser and perform live testing across 50+ pre-installed device viewports.

To get started, you need to download the executable file from here.

Note: After you are done with the installation, you will need to login to the LT Browser through your LambdaTest login credentials.

This document will help you:

Running Your First Responsive Test With LT Browser#


Step 1: Open the LT Browser. Provide the testing URL in the address bar and hit Enter.

Open the LT Browser

Step 2: Once you hit Enter, the website would be loaded on 50+ devices. You can select any device to start responsive testing from the sidebar on the left. You can also monitor two different devices side by side by adding a device on the view screen.

view screen

Step 3: After you click on the + button to add a new device, you will be prompted with a screen from which you can select the specific device you want to test side by side. Select the device and hit the button to add device.

add device

Step 4: You will now find the added device on the view area inside LT Browser. That way you can compare responsive web design on 2 different device through a side by side view.

side by side

Rotating Device From Portrait To Landscape View Or Vice Versa#

You can rotate any or both devices by clicking on the highlighted button with the rotate icon.

rotate icom

Couldn't Find Your Favourite Device? Add A Custom Device#

Although, we try our best to deliver the most majorly used devices to our user as per the global market share. However, in case you are unable to find a device that matches the view port or device pixel ratio of your requirement then you can even add a custom device to your LT Browser. To do so, you need to click on the tab which says add a custom device.

add custom device

You will now be routed to the below screen where you can specify device details. You can specify:

  • Device Name
  • View Port Specifications
  • Device Pixel Ratio
  • User Agent String
  • Device Platform
specify

Let's try adding OnePlus 5 to the LT Browser. We will provide the mandatory details to add OnePlus 5 as a custom device.

custom device

As you click on add a device, you will find the custom device One Plus 5 added to your mobile view area on the LT Browser. You will also find it added over the top of sidebar on the left with a bin icon to delete the custom device, if needed.

added device

How To Search For A Specific Device In The LT Browser?#


If you open the LT Browser, you will notice a search bar displayed over the top-left. You can leverage the search bar to quickly find your favourite devices. After you search a string, you can select the particular device & the selected device will be rendered over the browser instantly.

search

Fun Fact: If you search for a device name which isn't added to your LT Browser yet, you will find a button that will help you instantly add a custom device.

create a device

How To Capture A Screenshot & Highlight The Bugs?#


Step 1: Click on the camera icon to capture screenshot of your website inside a mobile device screen of your choice.

capture screenshot

Step 2: Once you click on the camera icon, a built-in image editor would open up to present the captured screenshot of the selected device's screen.

Image editor

Note: The camera button won't capture a full-page screenshot but will capture screenshot of the view in the screen of a particular device. You can leverage our Automated Screenshot Testing to capture full-page screenshots of your website over multiple browsers + OS combinations in a single test session.

How To Edit Captured Screenshot? Use Built-In Image Editor#

LambdaTest offers a built-in image editor to help you easily mark the bugs over your website and share it across your teammates. You can highlight the bugs in various shapes with different colors. Let us have a look at everything that you can do with the image editor.

Draw A Line#

screenshot line

Highlight Bug With A Circle#

screenshot circle

Draw A Rectangle#

screenshot boxr

Highlight The Bug From Multiple Colors#

screenshot color

Add Text In The Captured Screenshot#

screenshot tect

Freestyle Highlighting With Marker#

freestyle

Removing Your Edits With Eraser#

Eraser

Undo Your Edits#

undo

How To Share The Highlighted Bugs With The Team?#

We understand that one of the most streneous task for any tester is to collect & share the bugs across your teams. Keeping that in mind, we offer multiple ways for you to share the highlighted screenshot with others through LT Browser.

1. Download The Screenshot In Your System#

You can download the highlighted screenshot in your system and share it with your team as you like through emails, instant messaging or more.

download

2. Saving The Screenshot Over LT Browser#

After capturing the screenshot, you can save the screenshot over the LT Browser by clicking the Save button.

save

This will save your screenshot inside the Media over your LT Browser. You can find these saved screenshots by clicking Media in the header of the LT browser.

media

3. Sharing The Screenshot To Multiple Email IDs#

Step 1: After highlighting the screenshot, click on the share icon.

share

Step 2: You will be prompted with the below screen where you can enter the note or description around your observation of the screenshot. You can also feed multiple Email IDs and as you hit the Send button an email is sent to the specified Email IDs from the LT Browser. This E-mail would contain your highlighted screenshot as well.

share

4. Get Shareable Link#

You may have noticed the option to get shareable link after you hit the share icon.

sharable link

If you click on it, you will generate a shareable link to access the highlighted image. You can copy the generated link and share it with your teammates.

sharable link

Note: You can set a validity to the shared screenshots and shareable link.

share screenshot

5. Mark As Bug Directly To Third-Party Tools#

LambdaTest offers numerous integrations to third-party tools for project management, bug tracking, instant messaging, CI/CD and more. Once you integrate your LambdaTest account with your desired third-party integration. You can leverage the mark as bug button to push the bugs directly to your projects over third-party platforms. Meaning, you can share your highlighted screenshots across Jira, asana, Trello, slack and more.

mark as bug

As you click on the mark as bug button, you will be presented with the screen which will present you few of LambdaTest integrations. If your favorite integration isn't presented then you can click on more integrations to view all of the LambdaTest integrations.

Integrations

Once you integrate the LT Browser with your favourite third-party integrations then you can log bugs directly from the LT Browser to your project over a third-party tool such as GitLab, GitHub, and more.

How To Record Video Of A Test Session?#


Step 1: Open you website in any device and click on the video recording button, you will be able to record your interaction of the website within the device.

video recording

Step 2: Perform live-interaction with your website. You will find a timer on top of the device. This timer indicates the length of the video recording of your live testing session. The timer will continue to run unless you stop the recording by clicking over the same video recording button.

timer

Step 3: After you stop the recording, you will find a message on top of the LT Browser indicating that your video of the test session has been successfully saved.

save video

Now, to access this video you will need to go to Media.

What Is Media?#


To access any of your captured screenshots or recorded video, visit the Media. Consider Media as a Gallery which will comprise all your images and video that you may capture while testing your website through the LT Browser.

media

In Media, you'll find tabs for Images & Videos. You can download, share, and delete any image or video from the Media tab. And similar to in-built image editor, you can mark a bug from an image stored in Media as well.

Image editor

If you switch to Video tab, you will find full recordings of your live interaction from different test sessions.

switch tab

Quick Access to Media: You can also use keyboard shortcut to visit Media instantly.

  • Windows: Ctrl+M
  • macOS: Command+M
  • Linus: Ctrl+M

How To Test Locally Hosted Web-Apps or Websites?#


All you need to do for testing your locally hosted web-apps or websites, is to provide the localhost string as the URL in the header of your LT browser and you'll be able to access your localhost server.

For example, if you are running localhost with Apache through XAMPP and have your website in XAMPP's htdocs folder.

htdocs

All you have to do is open the localhost and append the URL with the webpage or website-folder you want to test.

localhost

It is as simple as that!

Can I Test My Web Pages Behind Login?#


Yes, you can! LT Browser aims at providing responsive testing along with live-interactive testing experience. You can simply load a website, login to the web-application and start testing your web pages that come after login.

Here is a screenshot of the LambdaTest web-application which is captured after logging in from the LambdaTest website.

page behind login

How To Debug My Website In LT Browser?#


With LT Browser, not only can you evaluate how your responsive web design might look over 50+ device viewports but you can also debug your web-application to figure out the root cause behind a browser or UI bug.

To debug your website, click on the highlighted button with the debug icon.

debug button

As you click on the debug icon, you will be able to access the developer tools.

Ta da! You can now perform responsive testing and debug any issues on the go. Cheers!

dev tools

What Is LT Browser Feedback Board?#


A feedback board is an ideal way to acquire immediate feedback from the users. You can use the LT Browser feedback board to leave your suggestions/feedback on LT Browser.

You can leverage feedback board to give feedback or suggestions about the next features to develop, integrations to implement, issues and enhancements on LT Browser.

Step 1: To submit the feedback,click on the Feedback icon.

feedback

Step 2: Click on ADD icon that says Give Feedback.

give feedback

Step 3: A Feedback form will open up where you will ask to enter your feedback details like title, description, category and images. After furnishing the required details, click on the Submit button.

submit button

Keyboard Shortcuts#


You can't really work with a browser which doesn't have any keyboard shortcuts, right? Well, don't worry! LT Browser has got your back on that! Here are the keyboard shortcuts for LT browser.

For macOS#

KEYBOARD SHORTCUTWHAT DOES IT DO?
Command+ZUndo
Shift+Command+ZRedo
Command+XCut
Command+CCopy
Command+VPaste
Command+ASelect All
Ctrl+Command+FToggle Full Screen
Command+MMinimize
Command+QQuit
Command+TOpens a new tab.
Command+WClose the active tab.
Command+Shift+MNavigate to Media page.
Command+Shift+HNavigate to Home page
[Expand and collapse the sidebar
Shift+PViewing the performance report
Command+Shift+RReplacing or adding a right device
Command+Shift+DRemoving the right device

For Windows & Linux Operating Systems#

KEYBOARD SHORTCUTWHAT DOES IT DO?
Ctrl+RReload
Ctrl+ZUndo
F11Toggle Full Screen
Alt+F4Close
Ctrl+XCut
Ctrl+CCopy
Ctrl+VPaste
Ctrl+TOpens a new tab.
Ctrl+WClose the active tab.
Ctrl+MMinimize.
Ctrl+Shift+MNavigate to the Media page.
Ctrl+Shift+HNavigate to the Home page.
Shift+Ctrl+ZRedo
Ctrl+Shift+DRemoving the right device
Ctrl+ASelect All
[Expand and collapse the sidebar
Alt+PViewing the performance report
Ctrl+Shift+RReplacing or adding a right device

That is all about the LT browser. Don't forget to share you experience or questions with us. You can drop us an email through [email protected] or you could wave us a hello over our 24/7 customer chat support. Happy testing! :)

Last updated on