Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using the Galen Framework for Automated Cross-Browser Layout Testing

DZone 's Guide to

Using the Galen Framework for Automated Cross-Browser Layout Testing

A tutorial on using the Galen framework, along with the IntelliJ IDE and Java language, to perform cross-browser layout testing.

· Web Dev Zone ·
Free Resource

The Galen framework is a test automation framework which was originally introduced to perform cross-browser layout testing. It has become a fully functional testing framework with rich reporting and test management systems. This framework supports both Java and JavaScript.

Are you wondering about what cross-browser layout testing is? Well, let me clarify. So, you've developed a fast-functioning website using Google Chrome. Everything is working as expected. 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, and you are surprised to notice the UI look different. This implies that your website isn’t cross-browser compatible. 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 across multiple devices, then Galen is one of the best open source frameworks to choose:

  • Is your text aligned correctly?
  • Is the logo aligned properly at the top left pane?
  • Are the width and height of the textbox or any other UI object correct?
  • Are you able to play with the color scheme?
  • All GUI shows up appropriately in different browsers and on different devices.

In this article, we will take a look on how to set up test automation environments for Galen with IntelliJ and then go ahead with writing some code. I will also show you how to generate reports for your automation test cases along with a few troubleshooting tips to help you get started on browser automation with Galen. Let’s dive in.

Step 1: Setting Up the Environment

The only pre-requisite required is the installation of JDK 8 on your machine. T get JDK 8 (minimum JDK version) if you don't already have it, visit the official website, here.

After the download is complete, installation is simple. Just click and continue to finish.
Once the installation is complete, you have to set up the path. Here is how you can do it!
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.

Environment Variables

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

Set_Path

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

Output: 

Set_Path

Kudos! You just installed JDK successfully on your machine.

Step 2: Download IntelliJ and Set Up a Maven Project

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

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

IntelliJ

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

Maven

Enter GroupId, ArtifactId, and leave the version set to default; then click the ‘Next’ button.

Maven

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

Project Location

The created project displayed in IntelliJ is shown below. Please make sure to enable auto import.

IntelliJ

Add a Maven dependency in IntelliJ via the following steps:

Go to Maven repository https://mvnrepository.com/ and search for the Galen framework.

Intellij

Select the latest Galen Framework support for the Java Test Framework.

GalenFramework

Select the latest version and copy the Galen framework dependency which is highlighted in the below screenshot.

GalenFramework

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 example, a dependency like Galen and transient dependencies like Selenium, along with some common libraries, will be downloaded.

Galen_Dependencies


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

And, the Maven project structure looks like the below screenshot.

GalenFramework

Step 3: Implementing a Spec File

Understanding of How to Write a Spec File

Galen's 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 prerequisite to running your automated tests.

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

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

GalenFramework

The above spec files and its image are copied under the 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 familiarize yourself with this process, 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. Before you start writing code for browser automation through the Galen framework, you need a directory for your program. You can create a directory by going to the Java directory under test. Go to test->java directory-> create a directory name called “testsuites,” and create a new class.

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

LambdaTest

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<GalenTestInfo> 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 the  reports.html file, which returns the following report:

Galen_Report_Summary

Click on the hyperlink label on the left side.

Galen_Detailed_report

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

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

Trouble Shooting

  • After setting up the project, in case you get any errors in IntelliJ, double check the coce by navigating to Project and right-clicking on it -> Open Module Settings -> Modules -> Select JDK version 1.8.
  • We should maintain proper indentation in the 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 the 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 for cross-browser layout testing? Happy testing!

Topics:
web dev ,cross-browser testing ,galen framework ,intellij ide ,java tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}