Posting codes on WordPress.

WordPress.com don’t support for code posting on your blog because of potential treat of posting malicious codes. But it supports for code wrapper short code for syntax highlighting (No need to add a plugin for this).

You just have to add your code within below tags. (you should remove spaces I here add them unless it will used as short code)

[ code language="css" ][ / code ]

This support various languages including java, javascript, html, css, python, xml etc.

You can read more about this referring below link.

https://en.support.wordpress.com/code/posting-source-code/

But main purpose of this blog is to learn how to avoid the know bug which you may often face if you use

for posting your codes.

If you new to WordPress you might not experienced this. So lets look at this bug.

The Above is how you can see when you used

 

in normal way.

This bug happens because of Calypso editor. The most suitable solution is to avoid usage of Calypso editor and go to classic editor. Normally when you are creating post in Calypso editor. (That fancy looking editor you use to create posts.)

Solution is go through Wp-Admin to create post. I’m using the free blog support given from WordPress.com. So here is the way.

  • Log in to wordpress account (You might already logged in)
  • Select My Site And Scrol down.

Screenshot from 2016-06-30 13-37-39

  • Then Select WP-Admin
  • Select Post and Do your Publishing and Editing task through there.

This will avoid adding unnecessary symbols to your codes.

Advertisements

How to create user defined properties in the pom.xml

It is a best practice to use the version number of dependencies as custom property tags.  Because when  a dependencies need to change it’s easy to maintain, because you just have to change one place.

Open the pom.xml and open the <properties> tags like below

<properties
<your.dependency.name>4.3.0.RELEASE</your.dependency.name>
</properties>

Normally we use for “dependency.version” for <your.dependency.name> like this <spring.version>.  It’s more readable but you can use whatever name you want. After that you can call the version number as this ${spring.version}. Let’s see an example.


<properties>
<spring.version>4.3.0.RELEASE</spring.version>
<servlet.api>2.5</servlet.api>
<jstl.version>1.2</jstl.version>
</properties>

<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>

<dependencies>

I use the Intellij IDEA as my ide. My ide suggest the tags as soon as they added.

 

How to create Spring Maven web app in Intellij

If you are new to Spring you might notices that most of tutorials are based on Eclipse. So if you uses Intellij (Which is pretty cool IDE ) this might confuses you. So today lets see how to configure Intellij IDE for Spring maven web app.

Here I’m going to use maven web arch type for generating the web template.  Run below command in terminal to generate web template.

mvn archetype:generate -DgroupId=menuka.hsenid -DartifactId=Spring-Maven-App -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Then Open Intellij and import the project. If you are already have opened a previous project you can one below

  1. Open -> Close Project then you will get below window.

IDE

Then click Import Project then browse the generate maven project’s pom.xml then press Next till you get Finish then Finish.

2. Or you can Simply go File -> Open select the relevant pom.xml and import it as before we instructed.

Now you have imported the maven project. Now we have to import fundamental Spring components Spring Core, Beans and Context (According to documentations http://docs.spring.io/spring/docs/current/spring-framework-reference/html/overview.html)

Click relevant component and select dependency version you want and copy and paste it to pom.xml

</pre>
<pre><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <groupId>menuka.hsenid</groupId>
    <artifactId>Spring-Maven-Test</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>Spring-Maven-Test Maven Webapp</name>
    <url>http://maven.apache.org</url>

    <dependencies>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>4.3.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>4.3.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.0.RELEASE</version>
        </dependency>


    </dependencies>

    <build>
        <finalName>Spring-Maven-Test</finalName>
    </build>

</project></pre>
<pre>

Your pom.xml now like above one.
Now we write a simple hello world to test whether Spring is working.

In my project I created Folder name java to put my java files and created package named hSenid in it. Package have 2 files which are HelloWorld.java and MainApp.java 

The code should be like below.
HelloWorld.java

</pre>
<pre>package hsenid;

public class HelloWorld {
    private String message;

    public void setMessage(String message){
        this.message = message;
    }

    public void getMessage(){
        System.out.println("Your Message : " + message);
    }

}

MainApp.java 

package hsenid;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class MainApp {
    public static void main(String[] args) {
        ApplicationContext context = new ClassPathXmlApplicationContext("Beans.xml");

        HelloWorld obj = (HelloWorld) context.getBean("helloWorld");
        obj.getMessage();
    }
}

Now we have to configure the Beans.xml. Create a file in the Beans.xml in the resources folder. and Below content.

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">

    <bean id="helloWorld" class="hsenid.HelloWorld">
        <property name="message" value="Hello World!"/>
    </bean>

</beans>

Now run the MainApp.java file. If you succeed you will get below output.

Your Message : Hello World!

I’ll add the folder structure of the project if you not clear about the above procedure.

Screenshot from 2016-06-23 17-50-52

Testing front-end with Selenium WebDriver (Beginners guide with Intellij/TestNG)

When you want to test your front end Selenium WebDriver is a good solution. Because one of its advantages is, its cross platform and support many languages.

selenium-webdriver-automation

Lets see how we can use it. Here I used a web app created by maven web app template.

First lets add maven Selenium WebDriver maven dependency to our project. Open your pom.xml and paste below dependency.

http://www.seleniumhq.org/download/maven.jsp

<dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>2.53.0</version>
</dependency>

Now we can write test cases using selenium. Here I’m using Intellij IDE. So here I can set Test folder in

File -> Project Structure -> Modules

Select the folder where you are going to create the tests, then choose Test in “Mark as”.  Then press Apply -> Ok. Now we are good to create some Tests. Lets see some most used commands.

1. Creating New Instance Of Firefox Driver

WebDriver driver = new FirefoxDriver();

This will create instance of Firefox. (As we mentioned before you can use many browsers. Not only Firefox)

2. Command To Open URL In Browser

driver.get(“https://www.google.lk/&#8221;);

We use .get() to open URLs. Here you can see browser goes to google.

3. Clicking on any element or button of webpage

driver.findElement(By.id(“submitButton”)).click();

Above given syntax will click on targeted element in the opened window. There other ways to lock a targeted elements.

Screenshot from 2016-06-08 11-09-56

All of these methods are useful. By.Xpath is very useful when a testing bootstrap table.

4. Store text of targeted element in variable

String dropdown = driver.findElement(By.tagName(“select”)).getText();

This syntax will retrieve text from targeted element of software web application page and will store it in variable = dropdown.

5. Typing text in text box or text area.

driver.findElement(By.name(“name”)).sendKeys(“My Name”);

Above syntax will type specified text in targeted element. (In elements like input , textarea)

6. Applying Implicit wait in webdriver

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

This syntax will force webdriver to wait for 15 second if element not found on page of software web application.

7. Get page title in selenium webdriver

driver.getTitle();

It will retrieve page title and you can store it in variable to use in next steps. This will help you to check whether you have arrived to a certain page.

8. Get Current Page URL In Selenium WebDriver

driver.getCurrentUrl();

It will retrieve current page URL and you can use it to compare with your expected URL.

These are some of basics you must know to use Selenium.  Here is a good reference guide for Selenium WebDriver.

http://www.software-testing-tutorials-automation.com/p/selenium-webdriver.html