J soup example for editing html

In static web pages some times we might need parse and edit the pages.

Simple example would be generating static html report we might want to make use of html parser or html editing libs.

Jsoup is one of the good create/editing libs that is available.

Below is simple example of editing the html file with Jsoup.

There are three simple steps in the process for the editing of htmls with Jsoup.

Step 1 : Parsing the html code.

Following is the example for parsing the html file with Jsoup. The document is type of html document.

Document reportDoc = Jsoup.parse(new File(filePath), "UTF-8");

Now that we have reportDoc as html document that we need to update, lets just say if html is containing below structure, problem statement is to add data to the following table in the existing html doc.

Step 2 : Update/Append or change the text in the doc

JSoup1

In general all html objects (I.E the elements that are inside the tags) are called as elements in Jsoup.

Steps to insert data would be to find the “Element” with table tag and append the element with a row i.e “tr” tag and then add the data to the table in td tags. We can insert all data at once or we can edit data by index of the tr and td as shown below.

Element ele = reportDoc.getElementsByTag("tbody").last();
ele.append("<tr class='styleincss'>
     <td style='text-align: center;'>1</td>
     <td style='text-align: left;'>desc</td>
     <td style='text-align: left;'>col3</td>
     <td style='text-align: left;'>col4</td>
     <td style='text-align: left;'>col5</td>
     <td style='text-align: center;'>col6</td>
     <td style='text-align: center;'>Complete</td>
    </tr>")
//This will generte the html
reportDoc.html()

//If we want to change the values of existing rows we can write
reportDoc.getElementsByTag("tr").last().getElementsByTag("td").get(4).text(data);

//If you want to change or add attribute
reportDoc.getElementsByTag("a").last().attr("style", "text-align: center;Color: " + colorCode);

 

In the above code we have seen ways to add inline html, editing dynamically with rows and columns, we can loop through as well and write some intelligent code to go to particular column and particular row and edit data.

We can also set attributes for example as color, or href for links shown in above example.

But we just appended the document, how do we save ?

Step 3 : Save and flush to disk

We can use Buffered-reader to read the html that J soup has just appended to the original document.

Lets just say you have file name that you want to create and also appended document, below is the code to save to disk.

public static void writeToFileAndFlushToDisk(Document doc, String outputFile) throws IOException {
BufferedWriter htmlWriter = new BufferedWriter(
new OutputStreamWriter(new FileOutputStream(outputFile), "UTF-8"));
htmlWriter.write(doc.html());
//Optional new line
htmlWriter.newLine();
htmlWriter.flush();
htmlWriter.close();
}

 

This is general idea on how to use J Soup for editing html files. I have used this and created simple html reporting for LeanFT tests. We can create files and dynamically update link references so that test results can be systematically generated.

Please write to me if you need more information.

Advertisement

LeanFT ApplicationModel project setup and overview on ECLIPS.

Hello, lets look at how to create your first test using application model with LeanFT step by step.

Once you install and configure the LeanFT for eclips ( LeanFT quick setup for ECLIPS IDE) you can create new ApplicationModel project.

  • Select  file -> new -> Project in ECLIPS IDE.
  • Select ApplicationModel Project
  • newProject
  • you can opt out Maven project or you can choose maven depending on your project requirement, I am going ahead without maven since it is just for demo.
  • CAUTION : If you are creating without maven, then you might have to add decencies manually.
  •       MavenProject
  • Give a name to project and give a package name (example com.demo) After click on finish you should see project default structure like below.
  • ProjectDefaults
  • Now if you see the com.demo it is disabled and it contains the application model which is nothing but object structure or object repository in old UFT terms.
  • ApplicationModel
  • As you see you have Hat icon and + icon on the top right side of the Application Model which indicates Inspecting and  Adding the objects to Object Repository.
  • Lets look at test case where we want to open googole site and search for LeanFT.
  • Lets first make sure in the system tray  LeanFT runtime Engine is running. As discussed in earlier post, leanFT runtime engine is responsible for the identifying the objects and running the created tests.
  • SystemTray
  • We must select web engine in the UFTRuntime settings so that objects will be identified as web objects. Right click on the icon in system tray and select Web as option, once you do it Runtime Engine will automatically restarts. If not do it manually and check if all objects are identifying as web objects.
  • DefineENgine.PNG
  • To create test first we need to define UI objects and pages you want to test on.
  • Lets click on Had Icon to identify the objects, and use add icon (+CUBE icon) on the inspect screen to add objects. Add text box object and google search button too.
  • googleTextBox
  • Once you add objects, you should see Application Model as follows.
  • AddedObjects
  • Notice few things here
    • WebPages – Hierarchic objects
    • WebElements – Child elements in the WebPages.
  • In the left hand side, you see name and Code name, Code name is what we use to invoke the object, it is like function that returns this object.
  • LeanFT automatically creates the associated page classes and creates objects in ApplicationModel.java class.
  • Do not modify this class as code gets regenerated everytime you update ApplcationModel.
  • ApplicationModel_Class
  • Now lets look at test case and some of the jar files that are needed to run the test cases.
  • The ApplicationModel.java has all methods that returns the UI objects with code names.
  • TestClass can make use of it and create test cases. Following is the way to generate the test case.
import java.net.URI;
import java.net.URISyntaxException;
import org.junit.Test;
import com.demo.ApplicationModel;
import com.hp.lft.report.Reporter;
import com.hp.lft.sdk.*;
import com.hp.lft.sdk.web.*;
import com.hp.lft.sdk.GeneralLeanFtException;
import com.hp.lft.sdk.web.Browser;
import com.hp.lft.sdk.web.BrowserFactory;
import com.hp.lft.sdk.web.BrowserType;

public class TestClass { 
@Test 
public void test() throws Exception 
{  
Browser browser = BrowserFactory.launch(BrowserType.CHROME); 
browser.navigate("https://google.com"); 
ApplicationModel app = new ApplicationModel(browser); 
app.googlePage().searchEditField().setValue("LeanFT"); 
app.googlePage().googleSearchButton().click(); 
}
}

in the above @Test method, you can see application model app is being created as object.

After creating the “app” object, the first thing model returns is pages, and each page returns all objects in it. You can invoke the object with their code names and perform actions on it.

Going back to import statements , there are are lot of them, along with already loaded jar files. LeanFT requires these jar files to include in the test to avoid sdk loading issues.

additionalJars

After adding you project should look like below.

AllJars

Now you are ready to start the execution of created test.

When you run your tests you might get following exception for loading sdk. Also you might not see view las run results enabled.

SDK Load Issue

to avoid above issues, include loading sdk and generating report part through code. I have got this from micro focus site after running around few hours. Please find below link for detailed explanation. I have added code from same to my test and it worked like charm.

load SDK

@Test public void test_modified() throws Exception 

{ 

//code to resolve sdk lodaing issues 
ModifiableSDKConfiguration config = new ModifiableSDKConfiguration(); 
SDK.init(config); 
Reporter.init();   

Browser browser = BrowserFactory.launch(BrowserType.CHROME); 
browser.navigate("https://google.com"); 
ApplicationModel app = new ApplicationModel(browser); 
app.googlePage().searchEditField().setValue("LeanFT");
 app.googlePage().googleSearchButton().click(); 

//Code to generate report and cleanup 
Reporter.generateReport();         
SDK.cleanup();
}

Now the issue got resolved and I got the report link enabled after I run the script. if it is not enabled we can get the latest report from RunResults directory. Sample leanFT report for the above test will look like below.

LeanFTReport

This is how we can quickly setup the project for leanFT and execute the tests for Application model.

LeanFT quick setup for ECLIPS IDE

Hello, recent days I have been working with LeanFT and faced some hiccups in installing configuring and setting up for ECLIPS IDE.

LeanFT is plugin for integrated development environments. It supports ECLIPS and MS Visual Studio and ItelliJ.

In this blog, I will quickly discuss about setup for ECLIPS IDE and issues I have faced with step by step instructions.

  1. First of all we have to down load ECLIPS IDE. As per LeanFT documentation ECLIPS Oxygen 32 bit version is most supported. you can view from the same.                Eclips download link
  2. ECLIPS
  3. Now got to micro focus site and download the LeanFT installable.
  4. In the installation follow the instructions carefully to avoid the issues later.
  5. The most important instruction is, you have to select the path of the ECLIPS exe folder.
  6. You might have several ECLIPS installations, but which one you want to use it, carefully keep the same path and use the same ECLIPS exe to see the LeanFT plugin.
  7. After installation, restart the machine.
  8. Boom!! now if you open LeanFT menu will appear in ECLIPS. But, unfortuantely we have few more steps to see the LeanFT plugin.
  9. Download and copy (gson-2.8.1.jar) file to plugins directory in ECLIPS folder, it is mentioned as known sssue in the leanFT instructions manual a, see below.    LeanFT KnownIssues

KnownIssues

9. Once everything is done, lets open the ECLIPS exe. There is another .exe file gets generated in the ECLIPS directory, see below.

ECLIPSFolder10.  Use eclipsec.exe to launch the IDE.  You should see below menu in the ECLIPS.

LeanFTMeny

11. You should see leanFT related projects when you click File->New->Project from ECLIPS. See below

newProject

12. LeanFT is UFTPro, if you are worked with UFT its like cake walk for automating anytype of project, if you are UFT guy better to start project as Application Model project.

13. In LeanFT, there is run time engine called LFTRuntime, when you start project LFTRuntime will start on port 5095. This is responsible for detection of objects and running the created tests. Lets see how to kick start project as Application Model project and resolving starting hiccups in next section.