Edit your Tests with VSCode and Automate them with SeeTest

 

VSCode Overview

VSCode is a lightning-fast text editor offered by Microsoft. It is a comprehensive tool that combines an easy-to-use text editor with advanced IDE, allowing you to easily edit, build, and debug test projects from a single dashboard. The tool supports Windows, Linux, and Mac platforms. While the support for JavaScript, Node.js, and TypeScript comes built-in, it offers extensions for other programming languages such as Java, Python, PHP, C++, C#, GO, etc. It also supports Runtime tools such as Unity and .NET.

History of VSCode

VSCode is not to be confused with Microsoft Visual Studio. Visual Studio is a Microsoft product that has been around for 20 years and runs on Windows and MAC platforms. It is not open-source. However, VSCode is based on Electron Framework. It was created by GitHub for developing GUI applications using Node.js. It was known as Atom Shell earlier. Microsoft took over this product and released it as open-source in 2015.

VSCode is a lightweight text editor. At the same time, it offers extensions that convert it into a powerful IDE, allowing you to work with your favorite programming language. However, it is not resource-intensive nor does it require complex installation procedures. Using this single editor, you can run any programming scripts.

It supports all major platforms such as Windows, Linux, MAC, etc. It is not only lightweight but it also runs much faster than other IDEs. By adding extensions, you can enjoy a feature-rich text editor. Moreover, it is simple to install and use. Installing a feature is a simple click. It is free as well.

The tool is rapidly innovating. It offers useful plugins and extensions and debugging support. VSCode has a vibrant community that is ready to offer help related to the tool. Moreover, dedicated teams from Microsoft are constantly working on this tool to improve it which is not available with other open-source tools. It releases a new version every month and the product is stable.

Installation

The first step is to install the tool. Later, you can add the language extension of your choice.

Step1: Install VSCode

As with all other Windows software, VSCode is easy to install. Simply download the package and double-click it to complete the installation.

To download the tool, visit the following link: https://code.visualstudio.com/download

Select your platform version and download the tool.

After the download is completed, double-click the file to begin the installation procedure. On the next screen, accept the license agreement.

Next screen, choose the destination folder and start menu options.

Then, you can customize a few options. Choose ‘Add to path’ to add the VSCode path to system environment variables.

Click next to complete the installation.

Click on Finish and the installation is complete. Now, VSCode is ready for use.

The good thing about Microsoft products is the GUI-based user-friendly design. You can easily work with the tool with minimal knowledge.

You can simply create an HTML file, add code, and run the file.

So, the tool is now ready for use.

Step 2: Add Coding Language Extensions

To work with your favorite language, you should add extensions to the VSCode editor. To do so, open the VSCode Editor. On the left activity bar, click on the Extension icon.

Type Java in the search bar. You can see a list of Java extensions. Select Java Extension Pack.

When you click on install, it will install the Java extension pack. It comes with six components:

1. Language Support for Java
2. Visual Studio IntelliCode
3. Maven for Java
4. Debugger for Java
5. Java Test Runner
6. Project Manager for Java

When you click install, all the six components get installed.

After the extension pack is installed, open the VSCode editor. Click on File and open the workspace folder (eg: ExperitestProject)

When you select the workspace folder, your project folder loads into the VSCode workspace.

Now click on the new file icon beside your project workspace to create a new java program. Give a name to the file (eg: sample1.java) and press enter.

Now, you can see the java file on the right side of the editor. Add your java code there.

Here is a sample code:

[java] /** * sample1 */ public class sample1 { public static void main(String[] args) { System.out.println(“Hello Experitest Users”); } } [/java]

When you click on Run, it will run the program.

The program prints the text “Hello Experitest Users”.

So, you have successfully added the Java extension. Java programs are successfully running here.

Step 3: Setup Test Automation Environment

To run test automation scripts, you need to install a build tool such as Maven or Gradle. In addition, you have to add Selenium, WebDriverManager, and TestNG dependencies.

When you add the Java extension pack, Maven also gets installed. On the left bottom menu, you can see Maven Project. Click the new file option beside it.

Select an archetype. Choose ‘archetype-quickstart-jdk8

Select the version.

On the next screen, choose the destination folder and click ok. The build process begins.

Now, Maven will ask for some details such as groupid, artifactid, etc. Provide the details and maven will process the build.

Once the build is successful, you can see the project structure in the left side explorer. Click on pom.xml

In the pom.xml, you need to add dependencies for Selenium, webdriver manager, and TestNG. To do so, go to Maven Repository here:

https://mvnrepository.com/

In the search bar, enter Selenium and click on Search.

Open the Selenium Java link and click on the latest version.

Copy the code so that you can paste it in the pom.xml.

Now, go to pom.xml and paste the code under the dependency section.

Similarly, search for ‘webdrivermanager’ and ‘TestNG’ and copy the dependency code in pom.xml and save the file. You can see a message that the build is successful.

Running your First Test Automation Script

Once the pom.xml file is updated, you can see the project structure in the left side menu. Under the project name, right-click on srctestjava and choose a new file.

Give a name to the file with .java extension (eg: experitest1.java)

Now add the following code to the file.

[java] package Experifact.src.test.java.Experipackage; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class experitest1 { public static void main(String[] args) throws InterruptedException { System.setProperty(“webdriver.chrome.driver”,”C:\chromedriver_win32\chromedriver.exe”); WebDriver driver=new ChromeDriver(); driver.get(“http://www.experitest.com”); Thread.sleep(3000); driver.quit(); } } [/java]

When you run this code, it will open the Chrome browser and open the Experitest website.

So, VSCode is ready for Selenium-based test automation.

Test Automation in Experitest Cloud

SeeTest platform from Experitest is a comprehensive test automation platform that enables developers to test their apps on a range of browsers, devices, platforms, etc. It also offers an intuitive reporting tool that lets you understand how each test ran.

• To run test scripts on the SeeTest Cloud, open VSCode, and go to project explorer.
• Under the Java project (Experitestproject), right-click on srctestjavaExperipackage
• Click on Create New file
• Give a name to the file with .java extension (eg: ExperitestCloud.java)
• Now add the following code to the file:

[java] package Experipackage; import org.openqa.selenium.*; import org.openqa.selenium.remote.BrowserType; import org.openqa.selenium.remote.CapabilityType; import org.openqa.selenium.remote.DesiredCapabilities; import org.openqa.selenium.remote.RemoteWebDriver; import org.openqa.selenium.support.ui.ExpectedConditions; import org.openqa.selenium.support.ui.WebDriverWait; import org.testng.annotations.AfterMethod; import org.testng.annotations.BeforeMethod; import org.testng.annotations.Test; import java.net.URL; public class ExperitestCloud { private static final String ACCESS_KEY = “Enter your access key here.”; private RemoteWebDriver driver; private URL url; private DesiredCapabilities dc = new DesiredCapabilities(); @BeforeMethod public void setUp() throws Exception { url = new URL(“https://cloud.seetest.io/wd/hub”); dc.setCapability(CapabilityType.BROWSER_NAME, BrowserType.CHROME); dc.setCapability(CapabilityType.PLATFORM, Platform.ANY); dc.setCapability(“accessKey”, ACCESS_KEY); dc.setCapability(“testName”, “Quick Start Chrome Browser Demo”); driver = new RemoteWebDriver(url, dc); } @Test public void browserTestGoogleSearch() { driver.get(“https://www.google.com”); new WebDriverWait(driver, 10).until(ExpectedConditions.presenceOfElementLocated(By.name(“q”))); WebElement searchBar = driver.findElement(By.name(“q”)); searchBar.click(); searchBar.sendKeys(“Experitest”); searchBar.sendKeys(Keys.ENTER); } @AfterMethod public void tearDown() { System.out.println(“Report URL: “+ driver.getCapabilities().getCapability(“reportUrl”)); driver.quit(); } } [/java]

Now, run the test. It will log in to SeeTest Cloud, opens the Chrome Browser, opens the Google website, and searches for the keyword ‘Experitest’.

When you click on the Java Test Report, you can see that the test has passed.

One of the striking features of SeeTest Cloud is the reporting feature.

When you open the reporting feature in the SeeTest cloud, you can see a detailed report of the test.

Along with the report, it provides a recording of the test. You can see the recording on the right side of the report. So, you can easily understand how the tests run.

Summary

VSCode is a lightweight text editor and IDE for your favorite programming language. Using this simple and free tool, you can run your test automation projects with ease. While it offers a feature-rich interface with all required extensions, it doesn’t eat away your system resources. Moreover, it loads quickly and runs tests pretty fast. They also offer managed environments called Codespace which you can read about here.

When you combine the power of the SeeTest cloud with VSCode, you cannot ask for anything better.

Guy Arieli – CTO