CAPABILITY GENERATOR

LambdaTestVisual User Interface Testing ● LT Browser: Test Website For Responsiveness Easily

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 25+ devices.

Test Website For Responsiveness

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.

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.

mobile friendly tester

Step 2: Once you hit Enter, the website would be loaded over 27 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.

website responsive test

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.

mobile responsive test

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.

test website on mobile devices online

Rotating Device From Portrait To Landscape View Or Vice Versa

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

check mobile friendly

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.

Test Website on Different Devices

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

perform website responsive test

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

test website in different screen sizes

As you click on add a device, you will find the custom device One Plus 5 added to your 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.

check mobile friendliness

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.

use the search bar on the top left

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 your own 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.

mobile friendly website tester

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.

mobile friendly website tester

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

mobile friendly tester tool

Highlight Bug With A Circle

highlight a circle on responsive checker tool

Draw A Rectangle

Test Website For Responsiveness Online

Highlight The Bug From Multiple Colors

Online Responsive Checker

Add Text In The Captured Screenshot

mobile friendly website tester tool

Freestyle Highlighting With Marker

Test Website For Responsiveness easily

Removing Your Edits With Eraser

responsive design testing tool

Undo Your Edits

mobile friendly test tool

How To Share The Highlighted Bugs With The Team?

We understand that one of the most strenous 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.

Responsive Testing Tool

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.

responsive test tool

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.

responsive web design tester

2. Sharing The Screenshot To Multiple Email IDs

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

check website mobile friendly

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.

test website on different resolutions

3. Get Shareable Link

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

view website on different devices

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.

mobile friendly checker tool

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

Test Website on Different Devices Online

4. 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.

mobile friendly test tool

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 favourite integration isn’t presented then you can click on more integrations to view all of the LambdaTest integrations.

Responsive Testing Tool

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.

responsive test tool

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.

responsive web design tester

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.

mobile responsive checker

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.

test website on different screen sizes on your machine

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.

responsive design test offline

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

check mobile friendly design

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.

test website on mobile devices

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

offline responsive design checker

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.

test-pages-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 25+ devices 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.

responsive checker tool online

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!

responsive testing with developer tools

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 Shortcut What Does It Do?
Command+Z Undo
Shift+Command+Z Redo
Command+X Cut
Command+C Copy
Command+V Paste
Command+A Select All
Ctrl+Command+F Toggle Full Screen
Command+M Minimize
Command+Q Quit
Command+T Opens a new tab.
Command+W Close the active tab.
Command+M Navigate to Media page.
Command+D Navigate to Home page

For Windows & Linux Operating Systems

Keyboard Shortcut What Does It Do?
Ctrl+R Reload
F11 Toggle Full Screen
Alt+F4 Close
Ctrl+X Cut
Ctrl+C Copy
Ctrl+V Paste
Ctrl+T Opens a new tab.
Ctrl+W Close the active tab.
Ctrl+M Navigate to Media page.
Ctrl+D Navigate to Home page
Ctrl+A Select All

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 support@lambdatest.com or you could wave us a hello over our 24/7 customer chat support. Happy testing! 🙂