Comparing 2 HTML <TABLE>s in Katalon Studio

Product Forums Katalon Studio
,
2

I have got another solution to the problem how to compare 2 HTML tables. Let me explain.

Previously I developed and published a project named Visual Inspection in Katalon Studio. This project can compare some pairs of web pages of a single Web application (e.g, the Production and the Development env) by taking screenshot images and scraping HTML source codes. The materialstore library, on which the “Visual Inspection” project is built upon, has a good capability of making diff info of 2 text files. I found that the materialstore library is applicable to solve the “compare 2 tables” problem as well.

I made a sample that does the following steps:

  1. I developed a Test Case plus a Custom Keyword.
  2. The Test Case should navigate to URL of a web page with <table> . It will scrape the text <table> content and transform it to a Java object in the data type of <List<List<String>>> type.
  3. Repeat this for 2 URLs. You will get 2 objects.
  4. The Test Case will call your Custom Keyword. Your Keyword class should extend com.kazurayam.materialstore.textgrid.DefaultTextGridDiffer . This class implements diffTextGrids() method. Your Test Case will call this method while passing 3 parameters.
  • the content of the 1st <table> in the data type of List<List<String>>
  • the content of the 2nd <table> in the data type of List<List<String>>
  • the variable in the type of java.lang.nio.file.Path that represents a file where the report will be written into

Sample output

When you run “Test Cases/TC2x”, you will find a HTML file created at <projectDir>/store/TC2x-index.html . See a sample in action:

TC2x index

The diff of 2 <table> tags is nicely presented, isn’t it?

Source code

import java.nio.file.Path
import java.nio.file.Paths

import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.util.KeywordUtil
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

import your.ks.keyword.YourTextGridDiffer

Path projectDir = Paths.get(RunConfiguration.getProjectDir())
Path webDir = projectDir.resolve("Include/web")

// open a web page in browser, scrape data out of a <table id="table1">
URL page1 = webDir.resolve("page1.html").toFile().toURI().toURL()
List<List<String>> t1 = YourTextGridDiffer.getDataFromPage(page1, 'table1')

// open another web page in browser, scrape data out of a <table id="table2">
URL page2 = webDir.resolve("page2.html").toFile().toURI().toURL()
List<List<String>> t2 = YourTextGridDiffer.getDataFromPage(page2, 'table2')

// convert data into JSON files, make the diff information, compile a report
YourTextGridDiffer differ = new YourTextGridDiffer()
int warnings = differ.diffTextGrids(t1, t2, 0..1, "TC2x")

WebUI.comment("the report is found at " + differ.getReportPathRelativeTo(projectDir))

if (warnings > 0) {
    KeywordUtil.markWarning("found ${warnings} differences.")
}

package your.ks.keyword

import org.openqa.selenium.By
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement

import com.kazurayam.materialstore.textgrid.DefaultTextGridDiffer
import com.kms.katalon.core.util.KeywordUtil
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

class YourTextGridDiffer extends DefaultTextGridDiffer {

    /**
     * open a URL in browser, scrape table data, return data as List&lt;List&lt;String>>
     *
     * @param url
     * @return List&lt;List&lt;String>> data collected from a &lt;table>
     */
    public static final List<List<String>> getDataFromPage(URL url, String tableId) {
        List<List<String>> data = new ArrayList<>()
        WebUI.openBrowser("")
        WebUI.navigateToUrl(url.toString())
        WebDriver driver = DriverFactory.getWebDriver();
        WebElement table = driver.findElement(By.xpath("//table[@id='${tableId}']"))
        if (table != null) {
            data.addAll(scrapeDataOutOfTable(table))
        } else {
            KeywordUtil.markFailedAndStop("<table id=${tableId}> is not found in ${url}")
        }
        WebUI.closeBrowser()
        return data
    }

    /**
     * scrape data out of a &lt;table&gt;
     */
    private static final List<List<String>> scrapeDataOutOfTable(WebElement table) {
        Objects.requireNonNull(table)
        List<List<String>> data = new ArrayList<>()
        List<WebElement> trList = table.findElements(By.xpath("tbody/tr"))
        if (trList != null) {
            for (WebElement tr in trList) {
                List<WebElement> tdList = tr.findElements(By.xpath("td"))
                List<String> row = new ArrayList<>()
                for (WebElement td in tdList) {
                    row.add(td.getText())
                }
                data.add(row)
            }
        }
        return data
    }
}

Please note that YourTextGridDiffer class extends com.kazurayam.materialstore.textgrid.DefaultTextGridDiffer which encapsulates all detail processing, which include:

  1. the code is given with 2 Java objects of <List<List<String>>> type; it will transform them into JSON texts
  2. the code makes the diff of 2 JSON texts using java-diff-utils
  3. the code compiles a report in HTML format.

External dependencies

You need to download some externa jar files and locate them into the Drivers directory of your project. https://github.com/kazurayam/ks_comparing_2_HTML_tables/tree/master/Drivers already includes them.

  1. materialstore version 0.1.11 https://mvnrepository.com/artifact/com.kazurayam/materialstore
  2. java-diff-util version 1.3.0 https://mvnrepository.com/artifact/com.googlecode.java-diff-utils/diffutils