Wavemaker

What is Selenium?

Short version: Selenium can be used to automate browsers, i.e. to perform 1000 Google searches, or to comment on a friend’s picture on Facebook 10000 times  (I guess so, didn’t try yet ;)).

Why integrating Selenium into WaveMaker?

The reason for me has been: Performance and Load testing of an existing WaveMaker application, by using almost the same conditions as the future customer.

That meant for me: Creating hundreds of new database entries manually by using the graphical user interface…

And that meant for me: FIND ANOTHER WAY!!!

And luckily I did. After reading some tutorials and writing some simple programs I decided to automate a WaveMaker application… and I failed miserably!

I describe the problem later… now it’s your turn 🙂

Preparations

1. Download the Selenium java driver

2. Install the Selenium IDE plugin

3. Install Firebug

4. Create a new project in WaveMaker without using any template. Save and close it.

5. Now open the zip file you have downloaded in step 1 and copy all the 38 jar files to your WaveMaker project’s lib folder.

6. Open your WaveMaker project again.

Part 1 – GUI

Part 2 – Source

dojo.declare("Main", wm.Page, {
"preferredDevice": "desktop",
start: function() {

this.varTheEntries.addItem({item: "demo1", amount: "one"});
this.varTheEntries.addItem({item: "demo2", amount: "two"});
this.varTheEntries.addItem({item: "demo3", amount: "three"});
},

buttonAddItemClick: function(inSender) {
try {
// Add new item to varTheEntries
this.varTheEntries.addItem({item: this.inputItem.dataValue, amount: this.inputAmount.dataValue});
// clear input fields
this.inputItem.clear();
this.inputAmount.clear();

} catch(e) {
console.error('ERROR IN buttonAddItemClick: ' + e);
}
},

buttonRemoveItemClick: function(inSender) {
try {
// Remove selected item from varTheEntries
this.varTheEntries.removeItem(this.dojoGridEntries.selectedItem);
// disable button
this.buttonRemoveItem.disable();

} catch(e) {
console.error('ERROR IN buttonRemoveItemClick: ' + e);
}
},

_end: 0
});

Part 3 – Services

1. Type Definition

To keep it simple, the shopping list will contain entries with just two attributes: item and amount.

To save this data in a single Variable, you need to create a new Type Definition first.

Type in “amount” for the second field’s name and leave the fieldType to “String”.

A little bit confusing: After typing “amount” and hitting Enter, the field is created but it doesn’t appear in the navigator view on the upper left hand side.

But if you close and open your project again, it will be displayed correctly.

2. Variable

Now you can create a Variable which uses the new Type Definition. Be sure to check “isList”.

Now you can bind the dojo grid’s dataSet to varTheEntries

At this point, the application should be functional, but also quite boring…

Part 4 – Selenium

Create a new JavaService

Replace the created code with the one shown below.

package com.selenium;

import com.wavemaker.runtime.javaservice.JavaServiceSuperClass;
import com.wavemaker.runtime.service.annotations.ExposeToClient;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;

@ExposeToClient
public class SeleniumTest extends JavaServiceSuperClass {

public SeleniumTest() {
super(INFO);
}

public void createEntries(int numberToCreate) {

WebDriver driver = new FirefoxDriver();
WebDriverWait wait = new WebDriverWait(driver, 20);

driver.get("http://localhost:8094/Selenium_Integration_01/");

for(int i=0; i<numberToCreate; i++)
{
// click the textBox and enter text for item
WebElement textBoxItem = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//input")));
// alternative
//WebElement textBoxItem = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("/html/body/div/div/div/div[2]/div[2]/div[3]/div/div/div[2]/div/input")));
textBoxItem.click();
textBoxItem.sendKeys("awesomeItem " + i);

// click the textBox and enter text for amount
WebElement textBoxAmount = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("/html/body/div/div/div/div[2]/div[2]/div[3]/div/div[2]/div[2]/div/input")));
textBoxAmount.click();
textBoxAmount.sendKeys("some");

// click button "Add Item"
WebElement buttonAddItem = wait.until(ExpectedConditions.elementToBeClickable(By.id("main_buttonAddItem")));
buttonAddItem.click();
}
}

public void deleteEntries(int numberToDelete) {

WebDriver driver = new FirefoxDriver();
WebDriverWait wait = new WebDriverWait(driver, 20);

driver.get("http://localhost:8094/Selenium_Integration_01/");

try {

for(int j=0; j<numberToDelete; j++) {

// Select first dojoGrid column
WebElement dojoColumnFirst = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//td")));
dojoColumnFirst.click();

// Click button Remove Item
WebElement buttonRemove = wait.until(ExpectedConditions.elementToBeClickable(By.id("main_buttonRemoveItem")));
buttonRemove.click();

}

} catch (Exception e) {
log(ERROR, "Error in deleteEntries: " + e);
}
}
}

The JavaService now has two methods: createEntries and deleteEntries.
Create two serviceVariables and bind them to those methods.
Don’t forget to bind the inputs. svCreateEntries expects an Integer for numberToCreate, svDeleteEntries expects an Integer for numberToDelete.
So you have to bind those inputs to the corresponding text boxes on the canvas.

Finally, you have to tell the two “Let’s go” buttons what to do when they are clicked.

     

And that's it, the application should now do the following:

You: “Now I’m clicking Let’s go”

WebDriver: “Hey Firefox, give me a new window and open “http://localhost:8094/Selenium_Integration_01/”

Firefox: “Ok!”

WebDriver: “Wow, nice website! There should be an element at position “//input”. Let’s check if I can click it. If not, let’s wait 20 seconds for it. Ah, there it is! Now I click it and send some text.”

WebDriver: “Another element at position “/html/body/div/div/div/div[2]/div[2]/div[3]/div/div[2]/div[2]/div/input”. Waiting… got it! Click, send text.”

WebDriver: “Me again? A button with id “main_buttonAddItem”? There it is. Click it!”

…and a second time…

Quite the same procedure as for createEntries…

But now, we simply tell the WebDriverWait to select the first column of the dojo grid (“//td”) and click the Remove Item button – in this case both actions three times.

If would like to delete column x, you can do the following:

While recording with the Selenium IDE, click the second column of the grid, then the third column. When selecting “xpath:position” as target, you will get:

As you can see, the difference is the number of the first div. To delete column x, you would write something like this:

if(position == 1)
{
WebElement dojoColumnFirst = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//td")));
dojoColumnFirst.click();
}

else
{
WebElement dojoColumnX = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div["+position+"]/table/tbody/tr/td")));
dojoColumnX.click();
}

Problem:The id’s

The text box for the item’s name is called “inputItem” within the project. But if you run the application and analyze the item with Firebug, you will realize, that it’s now called “dijit_form_TextBox_0”.

Wouldn’t be a problem, if it would keep this id all the time, but it doesn’t! Every item, which’s id has a number in it, can change at runtime.

So the best way to identify those elements is using xpath. (I didn’t have problems with button id’s)

1. Using the Selenium IDE to get xpath or id of an element

• Run the application and hit CTRL + ALT + S to open the Selenium IDE

• The Selenium IDE should now use the project’s URL and be in record mode
• Click the Item text box, enter some text and hit Enter
• The Selenium IDE should now show two commands

• Click the type command to show it’s details.

• You see, the type command uses the id “dijit_form_TextBox_0”, which we don’t want to use.

• Click the Target select menu to show all available methods for identifying the text box element. You will see, except of one, they are all containing “…TextBox_0…”. So let’s trust that single one which doesn’t  😉
• Code line in Java Service: WebElement textBoxItem = wait.until(ExpectedConditions.elementToBeClickable(By.xpath(“//input“)));

• Close Selenium IDE

2. Using Firebug to get xpath of an element

• On the running application’s window, right-click the Item text box and “Inspect Element with Firebug”

• Now the console will open and highlight the part of code which was generated for the text box’s input field

• Now just hover your cursor over the text in that highlighted area and you will see the complete xpath expression

• Unfortunately, I didn’t find a way to copy & paste that expression, so you have to write it down
• Code line in Java Service: WebElement textBoxItem = wait.until(ExpectedConditions.elementToBeClickable(By.xpath(“/html/body/div/div/div/div[2]/div[2]/div[3]/div/div/div[2]/div/input“)));

Ok, that’s it so far. I will keep trying some other cool stuff and hopefully I soon have something more to share 🙂

Have fun, kindest regards

Tobi

Download the sample project