Skip to content

Latest commit

 

History

History
157 lines (111 loc) · 7.72 KB

vscode-extension.md

File metadata and controls

157 lines (111 loc) · 7.72 KB
id title hide_title sidebar_label description keywords url site_name slug
vscode-extension
LambdaTest VS Code Extension For Cross Browser Testing
true
VS Code Extension
With LambdaTest VS Code Extension, perform real-time cross browser testing of your public and locally hosted web applications across 3000+ real, browsers, devices and OS combinations right from the VS Code Editor.
lambdatest extension for vs code
how to add lambdatest extension in vs code
free cross browser testing extensions
check browser compatibility online
best vs code extensions for developers
best vs code extensions for testers
LambdaTest
vs-code-extension/
<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": "WordPress Plugin", "item": "https://www.lambdatest.com/support/docs/vs-code-extension/" }] }) }} ></script>

LambdaTest VS Code Extension

LambdaTest VS Code Extension enables you to perform real-time cross browser testing of your public and locally hosted websites and web applications right from VS Code. Using this extension, you can trigger real-time cross-browser testing from within VS Code Editor to test your web apps across 3000+ browsers, real devices, and operating systems.

In this guide, learn how to configure LambdaTest VS Code Extension for real-time cross browser testing.

Installing The LambdaTest VS Code Extension

:::info Note You can also install LambdaTest VS Code Extension from the Visual Studio Marketplace. :::

  1. Open VS Code and select the Extensions icon from the left sidebar.

<img loading="lazy" src={require('../assets/images/vscode-extension/1.png').default} alt="Extensions" width="698" height="320" className="doc_img "/>

  1. Search for LambdaTest in the search box and click Install.

<img loading="lazy" src={require('../assets/images/vscode-extension/2.png').default} alt="Install" width="734" height="324" className="doc_img"/>

Once you install the extension, you’ll notice a LambdaTest icon will be added on the left sidebar.

<img loading="lazy" src={require('../assets/images/vscode-extension/3.png').default} alt="LambdaTest icon" width="1366" height="724" className="doc_img"/>

Authenticating With VS Code Extension

  1. Click the LambdaTest icon from the left sidebar and select Realtime Testing.

<img loading="lazy" src={require('../assets/images/vscode-extension/4.png').default} alt="activate LambdaTest Screenshot Plugin" width="792" height="342" className="doc_img"/>

  1. It will ask you to enter your LambdaTest e-mail and an access key. You can get them from your LambdaTest Profile page.
  • Enter your LambdaTest e-mail and press Enter.

<img loading="lazy" src={require('../assets/images/vscode-extension/5.png').default} alt="LambdaTest User Profile" width="766" height="255" className="doc_img"/>

  • Enter your LambdaTest access key and press Enter.

<img loading="lazy" src={require('../assets/images/vscode-extension/6.png').default} alt="LambdaTest User Profile" width="821" height="252" className="doc_img"/>

After entering LambdaTest credentials, it will show you a Realtime Testing screen. You're all set to start your real-time cross browser testing!

<img loading="lazy" src={require('../assets/images/vscode-extension/7.png').default} alt="LambdaTest User Profile" width="1360" height="700" className="doc_img"/>

Realtime Cross Browser Testing Using VS Code Extension

  1. To begin testing, enter the test URL, choose Desktop or Mobile, and select browser, browser version, operating system, and resolution. Click START.

<img loading="lazy" src={require('../assets/images/vscode-extension/8.png').default} alt="activate screenshot testig feature" width="1362" height="661" className="doc_img"/>

  1. A confirmation dialog box will appear. Click Open.

<img loading="lazy" src={require('../assets/images/vscode-extension/9.png').default} alt="activate screenshot testig feature" width="493" height="180" className="doc_img"/>

It will take you to a cloud-based virtual machine running real browsers and operating systems where you can perform real-time cross browser testing of your websites and web applications.

<img loading="lazy" src={require('../assets/images/vscode-extension/public.png').default} alt="activate screenshot testig feature" width="1197" height="555" className="doc_img"/>

For more details, head over to our guide on Real Time Browser Testing.

Testing Locally Hosted Websites Using VS Code Extension

With LambdaTest VS Code Extension, it's simple to run real-time cross browser tests of your locally hosted websites without configuring the LambdaTest Tunnel binary from the Command Prompt. When you launch LambdaTest VS Code Extension, the tunnel starts automatically.

:::info Note You can also trigger multiple tunnels based on your requirements by clicking Start new tunnel from the Tunnel dropdown menu :::

  1. To start testing, enter the localhost URL, choose Desktop or Mobile, and select browser, browser version, operating system, and resolution. Click START.

<img loading="lazy" src={require('../assets/images/vscode-extension/10.png').default} alt="activate screenshot testig feature" width="1013" height="617" className="doc_img"/>

  1. A confirmation dialog box will appear. Click Open.

<img loading="lazy" src={require('../assets/images/vscode-extension/9.png').default} alt="activate screenshot testig feature" width="493" height="180" className="doc_img"/>

It will take you to a cloud-based virtual machine running real browsers and operating systems where you can perform real-time cross browser testing of your locally hosted websites or privately hosted projects.

<img loading="lazy" src={require('../assets/images/vscode-extension/local.png').default} alt="activate screenshot testig feature" width="1108" height="625" className="doc_img"/>

For more details, head over to our guide on Testing Locally Hosted Pages.

Uninstalling The LambdaTest VS Code Extension

To remove the LambdaTest VS Code Extension, select the Extensions icon from the left sidebar. Navigate to the settings icon and click Uninstall.

<img loading="lazy" src={require('../assets/images/vscode-extension/11.png').default} alt="activate screenshot testig feature" width="809" height="482" className="doc_img"/>