Forem: Muthu Raja

Running Selenium Automation Tests Using Selenide, IntelliJ, And Maven

Muthu Raja — Fri, 08 Mar 2019 11:14:16 +0000

There are a lot of tools in the market who uses Selenium as a base and create a wrapper on top of it for more customization, better readability of code and less maintenance for eg., Watir, Protractor etc., To know more details about Watir please refer Cross Browser Automation Testing using Watir and Protractor please refer Automated Cross Browser Testing with Protractor & Selenium.

We are going to take a look on another popular library “Selenide”, that uses Selenium as a base for automated cross browser testing.

Powered by Selenium WebDriver, testing with Selenide is free as Selenide is an open source library for automation testing. In fact, this library is addressed and more focus on automation testing especially Concise API and stable tests. Selenium testing with Selenide has been very convenient and effective.

Benefits Of Selenium Testing With Selenide

Testing with Selenide supports multiple languages:

Java
Scala
Groovy
Clojure

Integration Options are:

Can use BDD
Can use with JUnit, TestNG, JBehave, Cucumber, Serenity
Can use to integrate with Extent Report, Allure Report etc.,
Supports Cross Browser Parallel execution
Page Objects

To know about which companies perform Selenium testing with Selenide, please refer this link.

Why Do We Still Need Another Wrapper?

There are several testing libraries around Selenium WebDriver, but what makes Selenium testing with Selenide special?

Below are some of the major attractions of performing Selenium testing with Selenide.

Concise UI Test: Selenide API consist of very few classes which were build on top of Selenium. Implementing Automation test code used for Selenium testing with Selenide is clean, better readability and ease to use.
AJAX challenges: The beauty of AJAX is to make the web page retrieve data from server without loading the entire page. For eg., if you add the entry in the form, assume at left pane in the page the recent added data is displayed then the whole page not getting refreshed and return the data. When automate this in web page, we often we end up the issue “No Such Element Exception”. To handle this, different wait method should be applied in Selenium WebDriver. However, when we perform Selenium testing with Selenide, this is already addressed and no additional code is required.
Time out issues: While running automation sometime we end up with timeout issue for eg.,loading web page takes time or finding elements takes time. This is handled well through Selenium testing with Selenide, by default it waits 4 seconds if uses Selenide Inbuild methods. On top of it, you can still configurable more secs for better synchronization.
Automated Screenshots: Selenium testing with Selenide by default, takes snapshot of failed test cases unlike Selenium WebDriver. In Selenium WebDriver you need to add explicit code. Please take a look on below snapshot which actually takes snapshot and share the location where it’s located.

StaleElementException: There are two reason this exception occurs:
The element no longer attached in the DOM but you code might have referenced to the element
The element has been deleted or modified with same id or same attribute completely.
Concentrate on Business Logic: Just focus on what needs to be tested for your business logic, rest Selenide will take care for eg., Conditions, validation, synchronization, timeout issues, browser configuration etc.,
More focus on Testing: Selenium testing with Selenide develops more focus on automation testing with better convenience in top of Selenium WebDriver.

As Selenide was developed as a wrapper on top of Selenium, here are some key libraries that you may find familiar if you have already used Selenium frameworks:

| selenium-java: Used latest version of selenium Java API |
| selenium-server: to support selenium Grid for parallel execution |
| webdrivermanager: to support inbuild browser configuration to avoid initialization |
| testng: Support TestNG framework |
| commons-fileupload: To handle file uploads capability to your servlet and web application |
| junit: Support JUnit Framework |

The beauty of Selenium testing with Selenide is:

You can still use Selenium WebDriver Directly
You can use any webdriver instance

Kick-Starting Selenium Testing With Selenide

Selenium testing with Selenide group offer 3 simple things to kick start your test automation, which are:

Open the page
$(element).doAction()
$(element).check(condition) For e.g., Please take a look on below snapshot:

SELENIUM WEBDRIVER	SELENIDE
driver.get(“https://www.lambdatest.com/)	Open(https://www.lambdatest.com/)
driver.findElement(By.className(“#submit”)).click()	$(“#submit”).click();
String actualResult=driver.findElement(By.className.message).getText()	//Conditions
If(text.contains(actualResults)	$(“.message.”).shouldHave(text(“Hello”))

You can observe the readable and concise syntax used for testing with Selenide.

Selenium Testing With Selenide: Setting Up The Environment

The pre-requisites are JDK 1.8.0 and Intellij.
For installing Java, minimum JDK 8 is required, to download in official site click here.

After download, installation is very simple and self-explanatory to complete.

After installation is complete, you would have to setup the classpath so that the program understand where the java is located in your machine

This can be done in windows operating system by searching for “Environment Variables” and selecting “Edit System Environment Variables”. Create JAVA_HOME in system variable and PATH as mentioned in the below snapshot.

Create JAVA_HOME in System variable and update the value where the Java is located in your machine.

Now, we need to edit the Path system variable and add JAVA_HOME in it so that all run time programs are able to detect Java in your machine. Make sure you append the value after adding a semicolon.

To verify, if JDK is properly installed or not. You need to supply the below command:
java -version

Kudos! You just installed JDK successfully on your machine.

Selenium Testing With Selenide – Download IntelliJ And Setting Up Maven project

There are multiple IDE’s available in the market. In this article, I recommend using IntelliJ for Selenium testing with Selenide. IntelliJ is a free, open-source Java IDE(Integrated Development Environment) for developing Java, Kotlin based software programming. This tool has Community and Ultimate version, community version of IntelliJ can be downloaded from here.

After download Intellij, the installation part is pretty much easy, just follow with instruction and keep going with default parameter and complete it.

Open Intellij and select “Create New Project” from Dashboard window.

For this article, I would prefer to use a “Maven” project. Select the particular Java version that we installed and click on Next with Default parameters.

Enter values in necessary fields like GroupID, ArtifactID and keep it as default version.

Leave the project name and select where your project is to be located.

The created project for testing with Selenide is displayed in IntelliJ as mentioned below.

Add Selenide Maven Dependency as mentioned below:

    <!-- https://mvnrepository.com/artifact/com.codeborne/selenide -->
    <dependency>
        <groupId>com.codeborne</groupId>
        <artifactId>selenide</artifactId>
        <version>5.1.0</version>
    </dependency>
</dependencies>

Feel free to add the required transient dependencies in your class path. As I previously mentioned, Selenide library supports TestNG, JUnit frameworks.

Selenium Testing With Selenide- Sample Code(Self Explanatory)

package selenidesamples;

import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;

import static com.codeborne.selenide.CollectionCondition.texts;
import static com.codeborne.selenide.Condition.text;
import static com.codeborne.selenide.Selenide.*;

public class LambdaSampleParallelTestAutomation extends BaseConfig_LambdaTest {


    /**
     * Author: Muthuraja R
     * Description: Validate Error message in Registration Page and capture one of error throws correct or not
     */
    @Test
    public void verifyStartTestingButton() {
        //Launch Lambdatest page
        open("https://www.lambdatest.com/");
        //use CSS Selector to find element and click for navigating register page
        $(".nav>li.login>a").click();
        //Verifying Page title using Selenide reusable method
        Assert.assertEquals("Sign up for free | Cross Browser Testing Tool | LambdaTest - LambdaTest", title());
        //Verifying text "Sign up"
        $(".signup-titel").shouldHave(text("SIGN UP"));
        //Feeding value to the text using .val
        //Feeding value to the text using sendkeys
        $(By.name("organization_name")).val("org");
        $(By.name("name")).sendKeys("Name");
        $(By.name("email")).sendKeys("test@gmail.com");
        $(By.name("password")).sendKeys("test1234");
        //using shortcut to signup instead of clicking button
        $(By.name("phone")).val("13452").pressEnter();
        //Capturing actual results and verifying with expected one using collections
        $$(".error-mass").shouldHave(
                texts("This email is already registered",
                        "Please enter a valid Phone number",
                        "To proceed further you must agree to our Terms of Service and Privacy Policy"));
    }

}

In the above example:

Login to LambdaTest Page.
Click on Register button.
Enter invalid value in org, fullname, work email, desired password and phone to target on mandatory fields to make sure it returns error.
Finally capture all errors throws in the page using collections.

As compared in previous section, testing with Selenide is lightweight, ease to use and offers better readability with comparison to Selenium. I didn’t include browser configuration or any pre-requisites like @BeforeClass or @BeforeMethod and not used loops to iterate and get content of error message.

To run your local browser simply, just use url and write basic test as mentioned above.

The Default browser is “chrome” browser, in case you haven’t declared any configuration. Here is the test result for local test execution without browser configuration.

Wish To Perform Selenium Testing With Selenide On A Different Browser?

To run the same test in other browsers is also pretty simple. For example, in case you want to use Firefox browser I configured as below.

To know more about browser configuration and how to know Selenide support which browsers, please take a look on below snapshot.

Reusable Commands For Selenium Testing With Selenide
Here we deep dive on Selenide reusable commands:

package selenidesamples;

import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;

import static com.codeborne.selenide.CollectionCondition.texts;
import static com.codeborne.selenide.Condition.text;
import static com.codeborne.selenide.Selenide.*;

public class LambdaSampleParallelTestAutomation extends BaseConfig_LambdaTest {


    /**
     * Author: Muthuraja R
     * Description: Validate Error message in Registration Page and capture one of error throws correct or not
     */
    @Test
    public void verifyStartTestingButton() {
        //Launch Lambdatest page
        open("https://www.lambdatest.com/");
        //use CSS Selector to find element and click for navigating register page
        $(".nav>li.login>a").click();
        //Verifying Page title using Selenide reusable method
        Assert.assertEquals("Sign up for free | Cross Browser Testing Tool | LambdaTest - LambdaTest", title());
        //Verifying text "Sign up"
        $(".signup-titel").shouldHave(text("SIGN UP"));
        //Feeding value to the text using .val
        //Feeding value to the text using sendkeys
        $(By.name("organization_name")).val("org");
        $(By.name("name")).sendKeys("Name");
        $(By.name("email")).sendKeys("test@gmail.com");
        $(By.name("password")).sendKeys("test1234");
        //using shortcut to signup instead of clicking button
        $(By.name("phone")).val("13452").pressEnter();
        //Capturing actual results and verifying with expected one using collections
        $$(".error-mass").shouldHave(
                texts("This email is already registered",
                        "Please enter a valid Phone number",
                        "To proceed further you must agree to our Terms of Service and Privacy Policy"));
    }

}

In above simple reusable method, we are going to take a look on what is “$” and “$$” and selenium action and conditional commands.

$ and $$ Method Definitions:

In Selenide Terminology:

$ Indicate finds Single Element
$$ Indicate finds More than one Elements used Collections

In above snapshot, an argument in Selenide method accepts different types:

WebElement (Element)
cssSelector as String
Xpath as String
SeleniumSelector as By (for eg., By.xpath(“”)) For the cssSelector and xpath, you can assign locator directly as string which is ease to use and maintain locators.

Conditions:

In above sample program, we use the following condition to verify the results without assertion:

$(“.signup-titel”).shouldHave(text(“SIGN UP”));
In this method, I verify “SIGN UP”text exists which I use “shouldHave” method
“.signup-title” is cssLocator
$ indicates find/return single element
$$(“.error-mass”).shouldHave(texts(“This email is already registered”, “Please enter a valid Phone number”,”Another condition to verify…..“));
Used CSS Selector to locate error message which returns more than one error.
shouldHave is method to verify the condition the necessary text appears.
texts accepts argument in array where you can pass multiple expected text conditions.
This method should verify condition between actual and expected results.

In build, the above condition like shouldbe, ShouldHave exhibits smart waiting capabilities:

shouldbe(“visible”)
shouldHave(Text(“Hello Test”))
shouldNotBe(“selected”)
should(“disappear)

By default, $.should() Method waits up to 4 seconds. However, if you wish to change the timeout then you can customize it in the following ways:

Configuration.timeout=4000 (Millisecs)
Mvn –Dselenide.timeout=8000 //mvn specific command

For Verifying expected text in collections:

$(By.xpath("//p[@class='error-mass']")).shouldBe(Condition.visible).shouldHave(
        textCaseSensitive("This email is already registered",
            “Another Text”,
            “Another Text”));

More Functions:


$(“div”).scrollTo();	$(“div”).doubleClick();
$(“div”).innertText();	$(“div”).contextClick();
$(“div”).innerHtml();	$(“div”).hover();
$(“div”).exists();	$(“div”).dragAndDrop();
$(“select”).isImage();	Zoom(3.5);
$(select”).getSelectedText();	$(“select).getSelectedValue();..many more

Cross Browser Parallel Test Automation

So far we have seen how to implement Selenium testing with Selenide and run test on a single instance using local browser.

Problem Statement: In order to execute the same tests in multiple browsers and its multiple versions on sequential basis is tedious and mentally exhausting process. Also, it becomes infeasible to get automation test results feedback at earliest or soon. Especially, in an agile release window following CI/CD(Continuous Integration and Continuous Delivery) Integration process. In your local system , you can install a limited number of browsers, what if you wish to use 40-50 browsers or even more with multiple browser versions?

Solution:
Selenium Grid: To address this challenge, Selenium Grid is a solution. There are option to address this problem by adding additional machines as selenium node where in our desired capabilities are utilized to pass appropriate browser version. However, maintaining a local grid could be very challenging. This is where “Cloud” solutions play a vital role.

LambdaTest – A Free Cross Browser Testing Tool: LambdaTest offers automated and live interactive cross browser testing on a Selenium grid consisting 2000+ real browsers and operating system online. LambdaTest has capability to select multiple operating systems with combination of its browser to ensure your web application runs seamlessly across different configuration. In real world, most of testing is carried out in Windows with combination of Chrome, Firefox etc. How about Linux platform with different browsers? How about MAC OS with IE browser? You can test it all using LambdaTest for browser compatibility testing.

LambdaTest also offer Cross Browser Test Automation in Parallel. We can run a single automation test on multiple browsers and their versions.

In the below section, I’m going to setup Selenium Grid (Hub and Node) and how to run test in parallel on Chrome and Firefox browser using TestNG suite.xml

Selenium Grid Configuration Setup:

Go to seleniumhq website.
Download Selenium Server latest version and store in your comfortable folder location.

To run Selenium Grid in Local, go to the folder location in command prompt and enter the command as mentioned below.
java –jar selenium-server-standalone-3.141.59.jar –role hub

hub indicates server where it acts as host and control your browser. Selenium Server gets started successfully as show in the below snapshot.

Now, it’s turn for Selenium Node.

Selenium Node Configuration Setup:

In the above snapshot, I downloaded Chrome Driver and Firefox Driver which are required to run your test in remote instance. I also created batch file to run the configuration by one click instead of each time open command prompt and enter the commands.

To create a batch file, enter the following commands. Please make sure the extension must be “.bat”
java -jar selenium-server-standalone-3.141.59.jar -role node -hub
http://localhost:4444/grid/register

To run the batch file, navigate to specific folder in command prompt and enter “file name of your batch file” as mentioned like below snapshot.

To verify no of browser instance in Grid console, Navigate to http://localhost:4000

By default 5 Firefox, 5 Chrome and 1 IE browser exists. It’s up to your convenient number of browser instance required which can be configured in your Selenium node configuration.

Now, it’s time to run your parallel automation in cross browser platform.

Selenium Testing With Selenide– Sample Code(Self Explanatory): Cross Browser Parallel Automation in Local

In this example, I keep it as same class in previous section but one slight modification is, I create inheritance relationship between this class and base class.

Derived Class:

package selenidesamples;

import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;

import static com.codeborne.selenide.CollectionCondition.texts;
import static com.codeborne.selenide.Condition.text;
import static com.codeborne.selenide.Selenide.*;

public class LambdaSampleParallelTestAutomation extends BaseConfig_LambdaTest {


    /**
     * Author: Muthuraja R
     * Description: Validate Error message in Registration Page and capture one of error throws correct or not
     */
    @Test
    public void verifyStartTestingButton() {
        //Launch Lambdatest page
        open("https://www.lambdatest.com/");
        //use CSS Selector to find element and click for navigating register page
        $(".nav>li.login>a").click();
        //Verifying Page title using Selenide reusable method
        Assert.assertEquals("Sign up for free | Cross Browser Testing Tool | LambdaTest - LambdaTest", title());
        //Verifying text "Sign up"
        $(".signup-titel").shouldHave(text("SIGN UP"));
        //Feeding value to the text using .val
        //Feeding value to the text using sendkeys
        $(By.name("organization_name")).val("org");
        $(By.name("name")).sendKeys("Name");
        $(By.name("email")).sendKeys("test@gmail.com");
        $(By.name("password")).sendKeys("test1234");
        //using shortcut to signup instead of clicking button
        $(By.name("phone")).val("13452").pressEnter();
        //Capturing actual results and verifying with expected one using collections
        $$(".error-mass").shouldHave(
                texts("This email is already registered",
                        "Please enter a valid Phone number",
                        "To proceed further you must agree to our Terms of Service and Privacy Policy"));
    }

}

Base Class:

package selenidesamples;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Parameters;

import java.net.MalformedURLException;
import java.net.URL;

import static com.codeborne.selenide.Selenide.open;
import static com.codeborne.selenide.WebDriverRunner.setWebDriver;

public class BaseConfig_LambdaTest {
    private WebDriver driver;
    private DesiredCapabilities desiredCapabilities;

    public String getLambdaUserName() {
        return System.getenv("LAMBDA_USERNAME");
    }

    public String getLambdaPassword() {

        return System.getenv("LAMBDA_PASSWORD");
    }

    @BeforeClass
    @Parameters({"browserName", "platform", "browserVersion", "visualEnable"})
    public void init(String browserName, String platform, String browserVersion, String visualEnable) throws MalformedURLException {
        desiredCapabilities = new DesiredCapabilities();
        if (browserName.equals("chrome")) {
            desiredCapabilities.setCapability("browserName", "chrome");
        } else if (browserName.equals("firefox")) {
            desiredCapabilities.setCapability("browserName", "firefox");
        }
        desiredCapabilities.setCapability("platform", platform);
        desiredCapabilities.setCapability("version", browserVersion);
        desiredCapabilities.setCapability("visual", visualEnable);
        desiredCapabilities.setCapability("build", "LambdaTestBuild");
        desiredCapabilities.setCapability("name", "LambdaTest Execution");
        System.out.println("https://" + getLambdaUserName() + ":" + getLambdaPassword() + "@hub.lambdatest.com/wd/hub");
        driver = new RemoteWebDriver(new URL("https://muthu.crr:Kw8xyUoShEO9GAtPqW509OWHggQYzzaLJnznu9R3RChfRSnmhh@hub.lambdatest.com/wd/hub"), desiredCapabilities);
        //driver = new RemoteWebDriver(new URL("https://" + getLambdaUserName() + ":" + getLambdaPassword() + "@hub.lambdatest.com/wd/hub"), desiredCapabilities);
        setWebDriver(driver);
        open("https://www.lambdatest.com/");
        driver.manage().window().maximize();
    }

    @AfterClass
    public void tearDown() {
        if (driver != null)
            driver.quit();

    }


}

What Is Desired capability?

It’s a key/value pairs that stores browser properties, platform properties etc., For eg., It’s specific to what browser name, browser version, platform name like Windows 10, Linux etc., This will determine the behaviour of the browser during run time.

The setCapability method help to initialize and let “WebDriver” know which environment and browser to run.

The beauty of Desired Capability is, to run same test cases in different browsers with combination of its version and operating system in parallel.

In above example, I’m going to explain how I created sample test that run more than one browser.

Baseconfig class is a “Base Class” which holds Parameters, BeforeClass and AfterClass which are actually annotation of TESTNG. To know more details about TESTNG, please visit here but this example step by step how I designed for sample test.

Step 1: Configure TestNG XML with Thread configuration and Parameterization as below.


thread-count	5 (Mention how many thread count need)
Parameter	Initialize parameter name and its value for eg., chrome or firefox
Class	Include class name indicates which class you would like to execute

TESTNG makes your life easier in terms of running test in parallel. Configure same class under Test tag in the suites and make sure parameters added under Test for independent execution.

Step 2: @Parameters name must be same as what as mentioned in TestNG suites.xml

While executing this code in multiple thread , two browser instances get created and run your test in parallel.4

As we already configured selenium server and it’s running. We use RemoteDriver to initialize the server host details and configure desired capabilities.

setWebDriver(driver): This method is important to initialize your customized browser configuration let WebDriverRunner in Selenide Framework otherwise it will throw timeout error and consider default browser (chrome) will execute the test in single instance.

Here is the test result in parallel execution for multiple browsers.

Running Parallel Test In LambdaTest For Selenium Testing With Selenide

To execute same test in Parallel on LambdaTest is very simple and straightforward. I’m going to explain same scripts in LambdaTest except few tweak in the code on BaseConfig class & TestNG.

In this example, I added few more parameters to run the same script in LambdaTest.


Browser Name	Customized way to configure your browser name like Chrome, Firefox etc
Platform	LambdaTest offers to run in different platform Windows 10, Linux etc.,
Browser Version	LambdaTest offers you to select different browser version which actually help you to validate your test like how your product is being used by customers
Visual Enable	This feature is basically to record all execution in videos and logs.

You still can add customized configuration, please visit here.

Changes In BaseConfig Class For LambdaTest

In the above code, I use two method which are:

getLambdaUserName()
getLambdaPassword()

These methods will actually get LambdaTest User account and password from environment variable which you set in the machine.

How To Set Environment Variable For LambdaTest Username/Password?

In Windows 10 -> Search Environment Variable -> Edit the System Environment Variable -> Click New button

Enter variable name as “LAMBDA_USERNAME”
Enter variable value as “YOUR_LAMBDA_ACCOUNT”

Note:

Similarly do the same for Password
API key can be generated in your profile page in LambdaTest Login
Click “Ok” button
To Run Parallel:
Open “testsuites_Parallel_Lambda.xml”.

Test results run in LambdaTest portal and the result can be displayed in the below snapshot.

Navigated to specific test for detail view, where you can see the following parameter of the screen.

Summary
Exception
Command
Network
Logs
Metadata

Conclusion:

Selenide is a wonderful library which actually addresses many issues which was developed on top of Selenium. This library helps you to achieve your test with better reusable and better readability. The advantage of make use of this tool is, you still can write both Selenium WebDriver and Selenide code part of your framework which makes Stable and strong.

Thanks for your time, please keep us posted your feedbacks and comments.

Original Source: lambdatest.com

Related Articles

Using Galen Framework For Automated Cross Browser Layout Testing

Muthu Raja — Mon, 28 Jan 2019 16:04:23 +0000

Galen Framework is a test automation framework which was originally introduced to perform cross browser layout testing of a web application in a browser. Nowadays, it has become a fully functional testing framework with rich reporting and test management system. This framework supports both Java and Javascript.

Are you wondering about what cross browser layout testing is? Well let me clarify, so you develop a fast-functioning website using Google Chrome. Everything is working as per intended functionality for you. The UI is neat and you feel a sense of accomplishment. Now, you show this to your product manager, stakeholder or any other user who has his/her default browser set to Mozilla Firefox/ Safari/ Opera or any browser other than Google Chrome then you are surprised to notice the UI deviations in website rendering. This implies that your website isn’t cross browser compatible as it is working abruptly when accessed through different browsers. The practice to ensure that the layout of a website looks and runs seamlessly across various browsers is called Cross Browser Layout Testing. We are living in an era where responsive design is turning into a necessity for every website. If you are looking to address the following challenges for Responsive Site Layout in multiple devices for eg., Mobile, Desktop etc., then Galen Framework is one of the best open source framework to choose:

Is your text aligned correctly?
Is logo aligned properly at top left pane?
Is Width and Height of Textbox or any other UI object size is correct?
Are you able to play with color Scheme?
All GUI show up appropriate in different browsers in different devices

In this article, we will take a look on how to set up test automation environment for Galen Framework with IntelliJ and then go ahead with the script. I would also show you how to generate reports for your automation test cases along with few troubleshooting tips to help you in getting started on browser automation with Galen Framework for cross browser layout testing. Let’s dive right in.

Step 1: Setting up the Environment:

The only pre-requisite required would be the installation of JDK 8 in your machine. For installing JDK 8 (minimum JDK version), visit the official website to download by clicking here.

After download, installation is simple, just click and continue to finish.
Once the installation is complete, you would have to provide a set up the path. Here is how you can do so!
Go to windows button and look for “Environment Variables”. Once that is done, you need to select the option to “Edit System Environment Variables”. After that, click on the “New” button for adding “JAVA_HOME” as your installation path.

After that, find “Path” in variable section and double-click. In variable value, add “ %JAVA_HOME%\bin” in the path to make sure specified version of java is accessible in the machine.

Now, in order to validate if JDK is properly installed or not! Mention the below command in your cmd(Command Prompt):
java-version

Kudos! You just installed JDK successfully on your machine.

Step 2 – Download IntelliJ and Setup Maven Project

IntelliJ is a free, open-source Java IDE(Integrated Development Environment) for developing Java-based computer software. You can download Community version of IntelliJ from here.

After download, installation is easy, just click next and finish with a default value.
In Windows -> Search “IntelliJ”-> A window will open to “Create New Project”.

Click on Create New Project, select Maven and click ‘Next’ button.

Enter GroupId, ArtifactId and leave version default and click ‘Next’ button.

Leave the project name and select the location where your project is to be located. Click on ‘Finish’ button

The created project displayed in IntelliJ as below snapshot. Please make sure to enable auto import.

Add Maven Dependency in IntelliJ by following the steps
Go to Maven repository https://mvnrepository.com/ and search for Galen framework.

Select the latest Galen Framework Support for Java Test Framework.

Select the latest version which lists in the top and copy the Galen Framework dependency which is highlighted in the below snapshot.

Copy the above Maven dependency in pom.xml in your project. Once copied, it’s dependencies and transient dependencies are downloaded from the Maven repository. For eg., Dependency like Galen Framework and transient dependencies like Selenium, along with some common libraries.

<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>6.9.10</version>
    <scope>test</scope>
</dependency>

And, the maven project structure looks like below snapshot.

Step 3: Implementing a Spec File

Understanding of How to write Spec file:
Galen spec language is quite flexible and gives you the opportunity to express the exact manner in which you would want your website to behave when accessed through different devices. There are two main parts in the page spec file: Object Definitions and Object Specs.

This spec file is important and a pre-requisites to run your automation based on definition added as expected result, which runs and compare actual result in your application.

Let me write a simple spec file for the website https://www.lambdatest.com/

To create spec file the extension must be “.gspec”

The above spec files and its image is copied under specs directory in the resource folder.

Note: The spec file will understand if an image is present in the same directory. If not, then you would have to explicitly mention the folder name/image file. However, keep in mind that the sub-folder must reside where your spec files exist.

The above spec is just for sample test execution. To more familiarization please visit the site and play with more examples:
http://galenframework.com/docs/reference-galen-spec-language-guide/

Step 4: Writing Code

We need to write code for our automation script to work with Galen Framework. Before you start writing code for browser automation through Galen framework, you need a directory for your program. You can create a directory by going to Java directory under test. Goto test->java directory-> create a directory name called “testsuites” and create a new class.

Here is an example demonstrating browser automation with Galen framework. I will be writing code in order to verify logo present and pixel for LAMBDATEST logo and background colour, font-size for the button that says “START TESTING”.

On the IntelliJ window that you are seeing now, write the following code:

CODE(Self Explanatory):

SampleUILayoutTest.java
Last week
Dec 27, 2018
M
Muthuraja Ramakrishnan uploaded an item
Java
SampleUILayoutTest.java
package testSuites;
import com.galenframework.api.Galen;
import com.galenframework.reports.GalenTestInfo;
import com.galenframework.reports.HtmlReportBuilder;
import com.galenframework.reports.model.LayoutReport;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;
import java.io.IOException;
import java.util.Arrays;
import java.util.LinkedList;
import java.util.List;
public class SampleUILayoutTest {
    private static final String lambdaTestpage = "src/main/resources/specs/lambdatest.gspec";
    private static final String baseURL="https://www.lambdatest.com/";
    private WebDriver driver;
    private LayoutReport layoutReport;

    /* initialize webdriver, make sure you download chrome driver in http://chromedriver.chromium.org/downloads
    and drop the exe file under resources folder
     */
    @BeforeClass
    public void init() {
        //declaration and instantiation of Objects/variables
        System.setProperty("webdriver.chrome.driver", "src/main/resources/chromedriver.exe");
        driver = new ChromeDriver();
        //triggers chrome to launch for directing it towards the base url
        driver.get(baseURL);
        //Maximize the browser window
        driver.manage().window().maximize();
    }
    @test
    public void checkLogoVisibleAndImageVerification() throws IOException {
        //Executing Layout check and obtaining the Layout report
        layoutReport = Galen.checkLayout(driver, lambdaTestpage, Arrays.asList("desktop"));
    }
    @AfterMethod
    public void reportUpdate() {
        try {
            //Creating a list of tests
            List tests = new LinkedList<>();
            //The object you create will be consisting the information regarding the test
            GalenTestInfo test = GalenTestInfo.fromString("Test Automation Using Galen Framework");
            //Adding layout report to the test report
            test.getReport().layout(layoutReport, "Verify logo present and log image comparison");
            tests.add(test);
            //Exporting all test report to html
            new HtmlReportBuilder().build(tests, "target/galen-html-reports");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @AfterClass
    public void tearDown() {
        //Close and Quit the driver.
        driver.quit();
    }

}

Step 5: Report Generation:

Once you run the above code, the report gets generated under target ->galen-html-reports
Open reports.html which returns the following report

Click on hyperlink label at left side.

You will find the detailed report and failures shown on the summary page. Click on any one of the links, for eg., I clicked on the visible link & it validated the below-presented logo.

Here is another example, as I clicked on css “background-colour” the background colour was verified as black.

Trouble Shooting

After setup the project, in case you get any error in IntelliJ, Please double check by navigating to Right-click on Project->Open Module Settings->Modules->Select JDK version 1.8
We should maintain proper indentation in spec file otherwise it may throw an error. Please visit the website for more details.

http://galenframework.com/docs/reference-galen-spec-language-guide/

That was all you need to know for getting started with browser automation using Galen framework to perform cross browser layout testing of your website or web-app. Feel free to share your opinion of this tutorial in the comment section below. I would appreciate if you have any questions for me or if you share about your experience with Galen framework for cross browser layout testing has been so far? Happy testing!

Original Source: lambdatest.com

Automated Cross Browser Testing With Protractor & Selenium

Muthu Raja — Thu, 24 Jan 2019 10:47:13 +0000

We are living in an era where numerous test automation tools or libraries are available in the market. The abundance brings along confusion and choosing the right framework turns out to be very challenging. Identifying the right tool at the earliest is crucial to for greater ROI. When come to Angular JS based application we don’t have to worry too much because we have Protractor in place. Google strongly recommends Protractor for end-to-end automation for AngularJS because both are maintained and owned by Google, and they build JavaScript test automation framework to handle AngularJS component in a better manner. In this article, we will be looking into details about what do we mean by JavaScript test automation Framework? What is Protractor? Why Protractor Is a good fit for test automation? How it helps to achieve cross browser test automation with different browsers?

What Do We Mean By JavaScript Test Automation Frameworks?

There has been major growth in JavaScript Framework usage over the past few years, the reason is, nowadays most of the apps are developed using technology like Angular JS or React JS. In fact, initially, AngularJS was the first choice for web developers, however, by the end of 2018, we could see major dominance over the web for ReactJS. ReactJS may even continue to dominate 2019 as well. To deal with these in test automation, we should adopt right programming language and test automation framework.

JavaScript test automation frameworks are end-to-end framework is specialized to run automation scripts for web application. However, choosing the right could be very challenging based on the following criteria selection.

End to End Testing
Assertion library
BDD/TDD Integration
Integration test
Regular updates from the community
Cross Browser Layout Testing
Visual Regression Testing

Why JavaScript Framework Is Necessary When Compare With Other Languages?

JavaScript is no news to web developers. Most of the developers in an organization write JavaScript code for developing web applications, unit test etc. Here are the following reasons for considering JavaScript framework pivotal.

Easy to follow Shift left testing for better product quality.
Provides developers the flexibility of generating end to end tests, along with unit testing for faster and reliable shipping.
More collaboration between Dev and QA in same language for test automation.
Helps to implement Dev QA test and pair programming in test automation side.
More flexible to work all in same languages and better productivity.
Right tools and right approach in same languages gets greater benefits.

What Is Protractor?

Protractor is a JavaScript framework, end-to-end test automation framework for Angular and AngularJS application. It test against your application in real browser, like a real user would.

Protractor is built on top of WebDriver JS (Selenium) and apart from default locator, it comes up with Angular-specific locator strategies. It’s not intended to test only AngularJS application but also helps to write automation test for Non-Angular JS application.

What Makes Protractor A Good Fit For Your Automation Test Scripts?

Protractor is an open-source, End to End test automation framework, that is brought up by Google which makes it a reliable, renowned and up-to-date framework. Protractor is a Node.js program that supports testing framework like Jasmine, Mocha and Cucumber.

Key Features of Protractor:

Protractor is developed as a wrapper build around Selenium WebDriver JS and Selenium Server. All key feature of Selenium WebDriver JS and additional implementation helps to do better automation supports and less maintenance when compare with Selenium.
Protractor offers new locator strategies on top of native locator which actually helps to locate element in DOM easily.
* by.model, by.binding, by.repeater etc.,
Protractor supports page object design pattern – helps on writing clean and readable code. Writing clean code is imperative for Automation testers. Here are 8 actionable insights for writing better automation code.
Protractor make use of Selenium Grid to initialize, control and run browser instance.
Can easily integrate with jasmine, mocha and cucumber framework to write your test.

Advantage of Protractor when combined with Selenium:

Excellent speed compare with other tools or libraries.
Support cross browser parallel testing through multiple browsers.
No need to work on synchronization strategy for eg., waits like implicit, explicits and sleep etc., Protractor has in build capabilities and intelligence to connect with Angular JS framework and knows when Angular has finished rendering the DOM for eg., page loading wait, synchronization,
Angular-specific locator support.

Getting Started With Cross Browser Automation Testing With Protractor and Selenium

Here are the prerequisite required for performing cross browser automation testing with Protractor and Selenium on Windows:

Node.js
Install protractor using npm
Update webdriver manager and start up a server
Visual Studio Code

Setting Up Automation Environment For Testing With Protractor And Selenium In Windows

This section has detailed steps explaining how to setup environment for performing end to end cross browser automation testing with Protractor and Selenium through Windows.
Step 1: Installation of Node.js
You need to install npm for Node.js.

What is npm?
npm is a free to use, package manager for javascript development which helps you to download all public software packages

What is package manager
A package in node.js contains group of files that you need for a module. Module is nothing it’s javascript libraries that can be included in your project.
To install Node.js, click here.

Once you are done downloading the installer, run it as administrator.

Click on ‘Next’ button in Node.js setup window to proceed further.

Click on checkbox for accepting license agreement and click on Next button.

Keep default windows location or feel free to change the location and click next.

Thereafter, click on Next and Install button. Wait for a couple minutes for the installation to complete.

You would have seen the following screen after installation completed.

To verify npm gets installed in your machine. Please supply the following command:
npm –version

Step 2: Installation of Protractor using npm
To download a package, open a command prompt and supply the following command

npm install –g protractor

install command is for download the package

-g stands for global which means any command to operate in global mode.

The below snapshot indicates that protractor is installed successfully.

To verify installed protractor version, supply the following command
protractor –version

Step 3: Update WebDriver Manager and Start Up A Server

To update webdriver manager, supply the following commands

webdriver-manager update

Once supply the above commands, it would download all necessary dependencies.

WebDriver manager is a helper tool to download necessary binaries. It will help to start and stop selenium server.

To start up with selenium server,
webdriver-manager start

To verify selenium server is running in browser, please use the following url

http://localhost:4444/wd/hub

Protractor test will send request to this server and control a local browser where you can see information about the status of the server. So, you could later go ahead and run your JS automation script with Protractor and Selenium.

Step 4: Installation of Visual Studio Code
What is Visual Studio Code?

Developed by Microsoft, Visual Studio code is a source code editor for Windows, Mac and Linux operating systems. It is a lot similar to other programming editor like Eclipse or Intellij. This tool was developed by Microsoft for Windows, Linux and Mac OS. It supports number of programming languages, to know more about Visual Studio code please visit here.

Double click on Visual Studio installer and click “Next” button.

Click on “I accept the agreement” in Setup – Visual Studio Code window

Keep default installation location (or) feel free to change different path in your computer and click “Next’ button.

Continue to click “Next” and check Desktop Shortcut if you want, finish the installation.

Once installation is complete, the following window would appear.

Click “Finish” button, finally Visual Studio Code Editors open up.

Click on the language which you want to install, I would suggest you to install JavaScript and TypeScript for executing automation test cases using Protractor and Selenium. Once clicked, it prompts you to select “ok” button, it would take few seconds to install the selected languages.

Writing Sample Code for Automation Testing With Protractor and Selenium

Now, we will have a look at a sample Javascript code for automation testing with Protractor and Selenium, and execute the test in local instance meaning execute the test that run on your browser installed in your machine.

To run protractor test for end to end automation, you must need two files:

Specs
Config

Specs: Specs is actual test suites that have more than on test cases designed in Javascript using Jasmine framework.

What is Jasmine Framework?
Jasmine is a BDD(Behaviour Driven Deployment) testing framework for Javascript. This framework helps you to write clean and better readability of code. To know more about Jasmine Framework, please visit here.

Executing Single Instance For Automation Testing With Protractor and Selenium WebDriver(Local)

Here is the simple example config file and how to write basic code in Protractor using Jasmine Framework.

Config.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['lambdatest_spec.js'],
  multiCapabilities: [{
    'browserName': 'chrome',
  },
  {
    'browserName': 'firefox'
  }]
}

In the above snapshot shows the syntax of how to define config file to execute browser automation with Protractor and Selenium.

seleniumAddress: Protractor make use to Selenium Grid to run your test in specified browser.
specs: specs indicates test suite that you can mention in one or more spec files to run multiple tests.
Capabilities: This is the place where you can capability setting for your test configuration for eg., browser version, platform etc., in case no capabilities is provided then by default, it takes chrome browser in your machine.

describe('To verify Angular and non Angular application test', () => {
    it('To verify page title of Lambdattest', () => {
        browser.get("https://lambdatest.com");
        element(by.css('p.home-btn > a.home-cta')).click();
        expect(browser.getTitle()).toEqual('Signup - LambdaTest App | Free Cross Browser Testing Tool');
    });
});

We will see clear explanation of what is the above code indicating.

describe –> describe is the keyword from Jasmine to write syntax for test suites. This is definition of collection of test cases in your script file.

it –> is the keyword for test cases to meet specific condition. There can be more than one “it” added under describe in Jasmine framework.

In the above code, we launch the browser, navigate to sign up page, see the title gets matched and pass the results.

To run your test:

In Visual Studio Code: Go to View Menu-> Click “Terminal” and supply the following command

Syntax: To run your test suites protractor followed by config file name
Note: Before run your test, please make to run selenium Grid by supply the following commands:

webdriver-manager start

After executing the above test, observed the following failures which is expected.

The above screenshot indicates the website https://lambdatest.com is not developed using AngularJS component. This is best real time examples to realize how Protractor works while launching browser. As mentioned in “Advantages” topic in above, the Protractor basically tries to connect with Angular JS framework while launching application. The moment Protractor identified and realized it’s not an AngularJS component, it recommended us to turn off waiting for Angular.

To Address this problem: we have a method called “browser.waitForAngularEnabled(false);”

Now, the method is added in the script and as you can see in the below screenshot, Protractor now supports with non-angular js application.

describe('To verify Angular and non Angular application test', () => {
    it('To verify page title of Lambdattest', () => {
        browser.waitForAngularEnabled(false);
        browser.get("https://lambdatest.com");
        element(by.css('p.home-btn > a.home-cta')).click();
        expect(browser.getTitle()).toEqual('Signup - LambdaTest App | Free Cross Browser Testing Tool');
    });
});

After executing the test, the test is passed successfully.

Executing Parallel Execution For Automation Testing With Protractor and Selenium WebDriver(Local)

In this example I’m trying to use same script like above except small tweak in conf.js page. So I copied existing config and update configuration details to run same test in multiple browsers to perform cross browser parallel testing.

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['lambdatest_spec.js'],
  multiCapabilities: [{
    'browserName': 'chrome',
  },
  {
    'browserName': 'firefox'
  }]
}

In the above examples, I modified “multiCapabilities” and included firefox browser. This is the best advantage when we compare with other libraries/packages, no maintenance is needed in case of automation testing with Protractor and Selenium. Protractor supports in-build code to run cross browser automation.

This time we run both same tests in chrome and firefox which executed and pass the results. So far we have seen how to run the test in protractor for Non-Angular JS application. The below section will show how to run AngularJS application in parallel and cloud execution (using Lambdatest).

Executing Parallel Execution for AngularJS Application

To run parallel execution for AngularJS application, the configuration remains but I implement use async and await for right way to queue up events.

Make sure to disable promise manage in your config file.

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['calculator_spec.js'],
  multiCapabilities: [{
    'browserName': 'chrome',
  },
  {
    'browserName': 'firefox'
  }],
  SELENIUM_PROMISE_MANAGER: false
}

describe('To verify super calculator functionality', () => {
    it('perform addition with 2 values', async () => {
        await browser.get('http://juliemr.github.io/protractor-demo/');
        await browser.element(by.model('first')).sendKeys('25');
        await browser.element(by.model('second')).sendKeys('25');
        await browser.element(by.id('gobutton')).click();
        expect(await browser.element(by.css('h2.ng-binding:nth-child(5)')).getText()).toEqual('50')
    })
})

Executing Cross Browser Parallel testing, Protractor & LambdaTest (Cloud)

There are always challenges and limitation to run your test with multiple version of browsers in local machines. You can’t think of installing thousands of available browser in your local machine to perform extensive, automated cross browser testing. To achieve more browser usage, remote execution in cloud is the only solution. LambdaTest offers 2000+ browsers to run your automation test scripts on their Selenium grid over a variety of devices and different browser version.

In this example, I’m going to explain how to execute cross browser parallel testing with Protractor and Selenium on LambdaTest cloud provider.

Configuration Details to run in LambdaTest:

exports.config = {

  seleniumAddress: 'https://:@hub.lambdatest.com/wd/hub',

  multiCapabilities: [{
    'name': 'Protractor LambdaTest Parallel_Chrome',
    'build': 'Protractor Javascript Example',
    'browserName': 'Chrome',
    'platform': 'WIN10',
    'version': '70.0',
    'video': true,  //To Enable video recording
    'visual': true, //To Enable step by step screenshot
    'network': true,    //To capture Network logs     
    'console': true   //To capture Console Logs 
  }, {
    'name': 'Protractor LambdaTest Parallel_Safari',
    'build': 'Protractor JavaScript Example',
    'browserName': 'safari',
    'platform': 'macOS High Sierra',
    'version': '11.0',
    'video': true,  //To Enable video recording
    'visual': true, //To Enable step by step screenshot
    'network': true,    //To capture Network logs     
    'console': true   //To capture Console Logs  
  }],
  specs: ['calculator_spec.js'],
  SELENIUM_PROMISE_MANAGER: false
};

In the above screenshot:

seleniumAddress: ‘https://:@hub.lambdatest.com/wd/hub’

User_Account: It’s your login account of LambdaTest

API_KEY: it’s access key which can be found in Profile page of your login. In case no API key, feel free to generate.

multicapabilities indicates to run your test on multiple browsers in parallel.

The other configurations mostly platform, browser specific and LambdaTest cloud provider specific to enable or disable the options.

I’m going to execute the following code on LambdaTest with Chrome and Safari in parallel.

describe('To verify Angular and non Angular application test', () => {
    it('To verify page title of Lambdattest', () => {
        browser.waitForAngularEnabled(false);
        browser.get("https://lambdatest.com");
        element(by.css('p.home-btn > a.home-cta')).click();
        expect(browser.getTitle()).toEqual('Signup - LambdaTest App | Free Cross Browser Testing Tool');
    });
});

The below results indicates the test is success and passed on lambdatest cloud platform.

Let’s take a look on example in cloud.

Detail snapshot of Test Cases in LambdaTest page for Safari Browser:

With this, we have seen how we can run simple scripts for Javascript automation testing with Protractor and Selenium WebDriver for both local and cloud execution of parallel testing.

Conclusion:

By delivering Protractor as an extensive end to end testing framework, Google has put a lot of efforts to make QA engineer works easy and protractor works like a charm. There are a lot of NPM modules available to utilize work with REST API, data generators etc along with browser automation to integrate all types of automation. All these point towards Protractor being the right choice for automated cross browser testing of AngularJS as well as Non-AngularJS application.

Original Source: lambdatest.com

Cross Browser Automation Testing Using Watir

Muthu Raja — Tue, 22 Jan 2019 11:11:24 +0000

We are living in an era where software development demands for automation. Software development methodologies such as RAD(Rapid Application Development), Agile and so on requires you to incorporate automation testing as a part of your release cycle. There exist numerous test automation frameworks used for automation testing. Today, I will be picking up Watir an open source, selenium-based web driver used for browser automation. Cross browser automation testing using Watir would help you to ensure a good rendering user interface of your web app. If you are a beginner to automation testing and are unaware of basics then don’t worry as I will also be talking about browser automation, [cross browser automation], parallel testing and what makes Watir special than other several tools and libraries. Without further ado, here we go!

What Is Browser Automation?

Browsers have become indispensable to our daily basis productivity. We explore, learn, shop, invest and do a lot more with browsers. There are times when we feel the need for browsers to automate our repetitive tasks. Imagine how cool that would be? Is it possible? Yes, any task you perform in browsers is automatable.

Let us take some considerations based on basic practical scenarios. You can use browser automation if:

You need to fill a lot of forms for data entry.
You need to generate a report from web portal on daily basis and send email to the team.
You navigate to a specific website and upvote on daily basis for a particular candidate on a reality TV show.

In the software industry, testing a web app can demand for a huge investment of time, resources and money. Testing a web app to check how well it renders could be very strenuous if relied upon manual testing alone. The manual testing ensures your application is functioning as expected, based on client requirements and expectations. Browser automation comes to rescue so we could avoid repeated manual testing, regression test cases, and obtaining early feedbacks along with reduced effort.

What Is Cross Browser Automation Testing?

Now, there are thousands of browsers available on the internet and your website may render in a unique manner on every browser or browser version. It could be very complex to test your website across every single one of them. Cross browser automation testing is to verify your application renders seamlessly across different browsers and its combination version. This is primarily performed to check cross browser compatibility of your shippable application’s functionality on combinations of the various OS running separate browsers like Google Chrome, Mozilla Firefox, Edge, IE, Opera, Safari, Yandex and many more.

To run all browsers and its combination of version is time-consuming. For eg., your client asks to perform a regular basis cross browser compatibility check across 5 versions of latest and 5 versions of legacy Chrome, Safari, Firefox and Edge browser that would bring a total number of browser combinations to be of 40 completely different distinctive browsers and its version for one test case. Consider how overwhelmingly time-consuming and tedious it could be to perform a cross browser compatibility check over all those browser combinations and provide sign off, that needed positively proper planning, huge investments in QA resource, handling challenges, time and cost. To deal with this issue, Cross Browser automation testing for parallel test sessions is the solution.

What Is Cross Browser Parallel Test Automation?

Cross Browser Parallel testing is performed to run a single test across multiple browser combinations, simultaneously. This is a very practical and powerful consumption scenario of automation testing. Cross browser parallel test automation allows you to scale back execution time while not compromising with coverage of your check and leading to faster rotation of your test results.

What Is Watir?

Watir is an open source Ruby Libraries which helps to achieve cross browser automation testing. Watir supports Ruby which is object oriented language and typically it’s simpler and faster than other languages. The good thing about Watir is, it supports any web application irrespective of the technology used to develop that application.

Why Watir?

It’s a free open source tool belonging to a family of Ruby.
It supports headless browser execution.
It supports page object design pattern.
It supports Cucumber Integration.
Tests can be maintained simple and flexible.
It supports your web app no matter what technology used to develop your app.
It supports multiple browsers on different platforms.
It is lightweight and easy to use.
It supports execution in Cloud through cloud based cross browser automation testing tools like LambdaTest.

In this article, we will take a look on how to setup test automation environment for Watir with RubyMine IDE and then go ahead with the sample script. I would also show how to run the script and see the failure in RubyMine. Let’s dive right in.

Getting Started With Cross Browser Automation Testing Using Watir

Here are the prerequisite required for performing cross browser automation testing using Watir on Windows:

RubyInstaller
Watir
RubyMine IDE

The RubyInstaller is must because Watir supports Ruby code, so this installation is very important before we proceed with Automation.

Setting Up Automation Environment

This section has detailed steps explaining how to setup automation environment for performing cross browser automation testing using Watir through Windows.

Step 1: Installation of Ruby:

Navigate to Official Ruby Installer page here.

Click on Latest version With DEVKIT to download. Select your OS architecture type, for e.g., I select (X64) 64 bit operating system.

After download, right click on installer and run as administrator in Windows machine.

The setup window popups to accept license agreement, you need to accept this and move next.

I would recommend selecting all checkboxes and clicking install button to proceed further.

The below progress bar indicates the install is in-progress, which takes few minutes time to install ruby.

After installation is complete, the following window will popup to install updated component. This is optional either you can leave it by closing the window or hit “Enter” button to update all components.

Open command prompt in windows and enter the following command:

ruby-version The installation version of Ruby version is displayed in the command prompt, which indicates Ruby installer is success.

To verify once again the installation is success and Ruby programs works fine. Enter the following commands:

irb or IRB stands for Interactive Ruby Shell which is a REPL(read-eval print loop) for programming in the object-oriented scripting language Ruby.

I will write a simple code that will put “lambdatest.com” to print it.

Step 2: Installation of Watir:

Installation of Watir is very simple. As I mentioned in the above section to verify Watir, you must first installed Ruby. To install, supply the below gem command:

gem install watir

gem indicates RubyGems that is a package manager for the Ruby programming which provides a standard format of disturbing Ruby libraries.

Step 3: Installation of RubyMine IDE:

RubyMine is an IDE(Integrated Development Environment) that helps you to write, debug and testing code for your application. Ruby also support multiple OS like Windows, MacOS and Linux etc.

Note: RubyMine comes up with Free 30- day Trial license.

To download the RubyMine, click here.

Click on the following button, which will download in your machine.

Right click on installer and run as Administrator, which pop ups the following windows.

Click next and continue till the installation is complete and launch RubyMine

Keep default with existing plugins and click Next until you see the below window.

Click “Create New Project”

Enter project name and select “Ruby SDK” which will be available if you install Ruby Installer.

Right click on created project and create a new directory called “testsuites”

Create a subdirectory called “resources” under testsuites and drop “chromedriver.exe”

To run browser based automation, chromedriver is required which is a separate executable that WebDriver uses to control chrome. Similarly we have different driver for each browser for eg., geckodriver for Mozila firefox, edge driver for Microsoft Edge browsers etc.,

To download chromedriver, please visit here.

Writing Code for Sample Test

To write code in RubyMine is very simple.

Right click on testsuites and select “TestUnit Test Template”

Enter file name “my_script.rb” in filename and click ok button.

On the RubyMine window that you are observing now, write the following code.

CODE (Self Explanatory):

require 'watir'
require 'selenium-webdriver'
require 'test/unit'
require 'test/unit/ui/console/testrunner'
 
class Sampletest < Test::Unit::TestCase
 
  "" "
    LambdaTest Watir automation sample example
    Configuration
    ----------
    Download Chrome driver from http://chromedriver.chromium.org/downloads and drop into your resource folder
 
    Result
    -------
    Execute Watir Automation Tests on LambdaTest website
    " ""
 
  def setup
    "" "
        Setup local driver
        Params
        ----------
        platform : Windows 10
        browserName : Supported platform - (chrome in your local box)
 
        Result
        -------
        " ""
    #Initializing chrome driver
    Selenium::WebDriver::Chrome.driver_path = "resources/chromedriver.exe"
    @browser = Watir::Browser.new
  end
 
  def test_verifyLambdapage()
      #Navigate to lambdatest.com website
      @browser.goto 'https://lambdatest.com'
      #Maximize the browser window
      @browser.window.maximize
      #Initializing element with Link text
      ele_starttestingbutton = @browser.link(:text => "START TESTING")
      #Perform click operation
      ele_starttestingbutton.click
      #printing page title
      puts("Actual Page title is: "+@browser.title)
      #Verifying actual and expected title of the page. This examples I intentionally fail the test by adding spell error
      assert_equal("Signup - LambdaTest App | Free Cross Browser Testing To0ol", @browser.title)
  end
 
 
  def teardown
    #Quit the browser
    @browser.quit
  end
end

Right click on the script and select “Run” in IDE to see test results and what is the output

The above test script I intentionally fail to verify results in terms of comparing actual vs. expected page title.

The below snapshot explain the test gets failed and the difference is highlighted in colour.

Using Local WebDriver To Perform Cross Browser Automation Testing Using Watir

Code Explanation:

def setup
  "" "
      Setup local driver
      Params
      ----------
      platform : Windows 10
      browserName : Supported platform - (chrome in your local box)
 
      Result
      -------
      " ""
  #Initializing chrome driver
  Selenium::WebDriver::Chrome.driver_path = "resources/chromedriver.exe"
  @browser = Watir::Browser.new
end

def teardown
  #Quit the browser
  @browser.quit
end

In TestUnit template,the IDE automatically create def setup and teardown. These methods actually run before and after test.

Setup: This method is precondition to run the test, you may setup something like initialize browser or any test data setup and

Teardown: This method is after your test run, you may close.quit the browser or delete the data in database etc.,

Selenium::WebDriver::Chrome.driver_path = "resources/chromedriver.exe"
    @browser = Watir::Browser.new

The above code is initializing the chrome driver and create new instance and assign object reference to variable browser.

The next line of code is typical Watir script which actually steps of:

Note: The method name start with “test_” is mandatory which Unit Test Runner actually realize this is test method.

Navigate to browser
Maximize the Window
Click on “Start Testing” button in lambdatest.com
Prints Current Page Title
Finally verifying whether expected vs actual title

def test_verifyLambdapage()
    #Navigate to lambdatest.com website
    @browser.goto 'https://lambdatest.com'
    #Maximize the browser window
    @browser.window.maximize
    #Initializing element with Link text
    ele_starttestingbutton = @browser.link(:text => "START TESTING")
    #Perform click operation
    ele_starttestingbutton.click
    #printing page title
    puts("Actual Page title is: "+@browser.title)
    #Verifying actual and expected title of the page. This examples I intentionally fail the test by adding spell error
    assert_equal("Signup - LambdaTest App | Free Cross Browser Testing To0ol", @browser.title)
end

Using Remote WebDriver At LambdaTest To Perform Cross Browser Automation Testing Using Watir

The drawback of executing cross browser automation testing using Watir for Local WebDriver is that you only get to test your script over the browsers installed in your local machine. However, it isn’t feasible to install thousands of browsers on your system. This is why, cloud is a more preferred platform to perform cross browser automation testing. Cloud provider offers to run your test scripts with support of Selenium grid. The great factor is, you don’t have to be compelled to maintain or any setup needed, all you wish to try and do is slightly tweak your code to support selenium grid. I’m going to explain how to tweak your same code to run test in Lambdatest. LambdaTest provides an extensive Selenium grid offering more than 2000 browsers to test from. You can even perform cross browser automation testing of your locally hosted web apps using their SSH tunnel. Let me show how you can leverage LambdaTest for browser automation using Watir.

Run Single Instance In LambdaTest Using Watir

LambdaTest provide cross browser parallel test in terms of running your cross browser automation testing scripts parallely to reduce great execution efforts. We will take a look in detail below regarding how to run simple test and how to run same set of test with different browsers in LambdaTest.

I’m using same script which I connected in my previous section in above, except the subsequent changes in setup techniques as mentioned within the below snapshot.

def setup
  "" "
      Setup remote driver
      Params
      ----------
      platform : Supported platform - (Windows 10, Windows 8.1, Windows 8, Windows 7,  macOS High Sierra, macOS Sierra, OS X El Capitan, OS X Yosemite, OS X Mavericks)
      browserName : Supported platform - (chrome, firefox, Internet Explorer, MicrosoftEdge)
      version :  Supported list of version can be found at https://www.lambdatest.com/capabilities-generator/
 
      Result
      -------
      " ""
  username = "USER_NAME"
  accessToken = "PASSWORD"
  gridUrl = "beta-hub.lambdatest.com/wd/hub"
  caps = Selenium::WebDriver::Remote::Capabilities.new
  caps[:browserName] = "chrome"
  caps[:version] = "67.0"
  caps[:platform] = "win10"
  caps[:name] = "LambdaTest Watir Signup Page Name verification"
  caps[:build] = "LambdaTest Watir Signup Page Name verification"
  caps[:network] = true
  caps[:visual] = true
  caps[:video] = true
  caps[:console] = true
  puts(caps)
  # URL: https://{username}:{accessToken}@beta-hub.lambdatest.com/wd/hub
  @browser = Watir::Browser.new(
      :remote,
      :url => "https://" + username + ":" + accessToken + "@" + gridUrl,
      :desired_capabilities => caps)
end

LambdaTest supports Selenium grid, so to run your test in LambdaTest you need to initialize remote webdriver and point where your Selenium hub or server is running.

Template of Selenium Grid URL to run in LambdaTest is:

https://{username}:{accessToken}@beta-hub.lamdatest.com/wd/hub

User Name:You can find it in LambdaTest dashboard page.

Access Token: You can find it on your profile page. In case no token, feel free to click on generate Access Token button.

Grid URL: beta-hub.lamdatest.com where your selenium grid is running.

The other important feature is the Capabilities Generator: To run your test suites in LambdaTest Selenium grid you must set the desired capabilities for example, which browser, which operating system and so on basic configurations that you want to test on.

You can configure which browser, platform etc., and finally it generates a code based upon your selections. Below is the result for Ruby language.

Capabilities Generator also supports Java, JavaScript, C#, Python, and PHP.

That’s all you need to run your tests successfully at LambdaTest for performing cross browser automation testing using Watir.

Run Cross Browser Parallel Testing With Watir Using LambdaTest

So far you have got seen a way to run single instance in LambdaTest, this section is detail about regarding a way to run same set of test with different totally browsers in LambdaTest. This section would assist you to grasp a way to generic code run different browser in Watir.

The below code would facilitate to realize the parallel execution:

require 'watir'
require 'selenium-webdriver'
require 'test/unit'

class DumTest < Test::Unit::TestCase

  "" "
    LambdaTest Watir automation sample example with Cross Browsers
    Configuration
    ----------
    username: Username can be found at automation dashboard or profile page
    accessToken:  AccessToken can be generated from automation dashboard or profile section

    Result
    -------
    Execute Watir Automation Tests on LambdaTest using Selenium Grid
    " ""

 #Confuring Multiple browser and its versions
  BROWSERS = {firefox: '64',
              chrome: '67'}


  def setup (browser_name, browser_version)
    username = "USER_NAME"
    accessToken = "PASSWORD"
    gridUrl = "beta-hub.lambdatest.com/wd/hub"

    #Initializing Capabilities
    caps = Selenium::WebDriver::Remote::Capabilities.new
    caps[:browserName] = browser_name
    caps[:version] = browser_version
    caps[:platform] = "win10"
    caps[:name] = "LambdaTest Watir Signup Page Name verification"
    caps[:build] = "LambdaTest Watir Signup Page Name verification"
    caps[:network] = true
    caps[:visual] = true
    caps[:video] = true
    caps[:console] = true

    puts(caps)
    # URL: https://{username}:{accessToken}@beta-hub.lambdatest.com/wd/hub
    Thread.current[:@driver] = Watir::Browser.new(
        :remote,
        :url => "https://" + username + ":" + accessToken + "@" + gridUrl,
        :desired_capabilities => caps)
  end


  #Using Thread to achieve parallel execution
  def runthreads
    threads = []
    BROWSERS.each_pair do |browser, browser_version|
      threads << Thread.new do
        setup(browser, browser_version)
        yield
        teardown
      end
    end
    threads.each {|thread| thread.join}
  end


  # Called after every test method runs. Can be used to tear
  # down fixture information.

  def teardown
    Thread.current[:@driver].quit
  end
end

#Test Runner
#Instantiate test method and use threads to run paralle execution
mytest = DumTest.new(self)
mytest.runthreads do
  Thread.current[:@driver].goto "https://lambdatest.com"
  Thread.current[:@driver].window.maximize
  Thread.current[:@driver].link(:text => "START TESTING").click
  if "Signup - LambdaTest App | Free Cross Browser Testing Tool" == Thread.current[:@driver].title
    puts("Test is passed")
  else
    puts("Test is failed")
  end
end

The logic is simple, used Thread concepts to run the same set of test scripts in parallel. The thread creates dynamic based on how many browsers and its version are added in BROWSERS variable.

I passed argument username, password in setup method for demo purpose but for more customization please embody multiple parameters and replace with capabilities.

Well, now you have your test results look in LambdaTest Cloud platform. Please take a look on below snapshot.

Kudos! We made it, with this you have successfully run your first script for cross browser automation testing using Watir at LamdaTest cloud platform.

LambdaTest offers great in-depth detail for every test. If you look at the screenshot below, you will be able to notice the environment details, status, start time, end time and many more information that is automatically represented. You would also find a video log of your test session and analytics related tab alongside, timeline.

That was all you need to know for getting started with cross browser automation using Watir at LambdaTest to perform UI test for your website or web-app. I would be interested to know your thoughts and feedbacks on this tutorial in the comment section. I would appreciate if you have got any questions for me. Happy Testing!

Original Source: lambdatest.com