Mobile Testing Tutorial Part 2: Page Objects

Introduction

Very often we'll interact with the same controls on a page several times. If there's a small change in the page, you might have to update lots of different tests. The solution is to use Page Objects. In this tutorial we'll move the functionality from the check expense Test Case to a page object so that it can be reused easily.

Prerequisites

• Complete part 1 of the Mobile Testing Tutorial
• Start Appium

Open Appium and click the Start Server button.

Open a terminal and run:

appium

• Start automatic compilation.

npm run compile -- -w

Creating a New Page Object

1. Right click on the src folder in the project root and select New Folder. Name the folder pages
2. Right click on the pages folder select New Gondola Page, GTD will open.

Starting TestBuilder

1. Start your emulator or connect your device.

Adding a method

1. In the section Methods you should see blank method, enter addExpense in the name field (no spaces), add expense in the keyword field, and add an expense in the description.
2. Start a new TestBuilder session by pressing the TestBuilder icon. After starting TestBuilder the Create new session dialog will open:
   • Select gondola.android.json as the capabilities file.
3. In the Device Live Screen, right click on the + button. When the menu pops up, enter addExpenseBtn as the name and select wait for element as the action. Enter 10 as the number of seconds to wait.

TIP

If you see a button that says Add Locator, press the switch button to get the action menu.

You should see a new locator named addExpenseBtn in the locators section, and an action line with the wait for element action.

1. Right click the addExpenseBtn again, and select the tap action.
2. Right click the Description field, enter description as the name and select wait for element as the action. Enter 10 as the number of seconds to wait.
3. Right click the Description field again, notice Gondola detects that you've already saved this locator, so you won't need to fill out the name field again. Select enter as the action and Coffee as the text to enter.
4. Now do the same for the other fields

Field names:

• Date: date, 2020-03-27
• Amount: amount, 3.00

8. Tap the "Add Expense" button and use saveExpenseBtn for its name (we already have a button with the name addExpenseBtn)

When you've finished the Page Object should look like this:

import { action, gondola, locator, page } from "@logigear/gondola";
@page
export class expensePage {
    @locator
    public addExpenseBtn = {android: "~Add Expense Button", ios: "",};
    @locator
    public description = {android: "~Description", ios: "",};
    @locator
    public date = {android: "~Date", ios: "",};
    @locator
    public amount = {android: "~Input Price", ios: "",};
    @locator
    public saveExpenseBtn = {android: "~save button", ios: "",};
    @action("add expense", "add an expense")
    public async addExpense() {
        await gondola.waitForElement(this.addExpenseBtn, 10);
        await gondola.tap(this.addExpenseBtn);
        await gondola.waitForElement(this.description, 10);
        await gondola.enter(this.description, "Coffee");
        await gondola.enter(this.date, "2020-03-27");
        await gondola.enter(this.amount, "3.00");
        await gondola.tap(this.saveExpenseBtn);
    }
}
export default new expensePage();

Using the method in your test case

1. Open up the test from the previous tutorial
2. Go the add expense test case, and delete all the rows
3. Now in a blank row, type add expense. Auto-complete will assist you.
   
4. Save and run the test

Modifying the method for variable data

The add expense method above works fine, but what if we want to use it several times with different values for the description, date, and price? For that we can add arguments to the method.

1. In a blank line above the wait for element addExpenseBtn action type argument. In the name field enter descriptionTxt. In the type field enter string and in the default value field enter coffee.
2. Repeat this for the Date and Price fields
3. Then, go to the enter action for $description, change the value to $descriptionTxt, repeat this for all fields

import { action, gondola, locator, page } from "@logigear/gondola";
@page
export class expensePage {
    @locator
    public addExpenseBtn = {android: "~Add Expense Button", ios: "",};
    @locator
    public description = {android: "~Description", ios: "",};
    @locator
    public date = {android: "~Date", ios: "",};
    @locator
    public amount = {android: "~Input Price", ios: "",};
    @locator
    public saveExpenseBtn = {android: "~save button", ios: "",};
    @action("add expense", "Add an expense")
    public async addExpense(descriptionTxt: string = "coffee", dateTxt: string = "2020-03-27", priceTxt: string = "3.00") {
        await gondola.waitForElement(this.addExpenseBtn,10)
        await gondola.tap(this.addExpenseBtn);
        await gondola.waitForElement(this.description,10);
        await gondola.enter(this.description, descriptionTxt);
        await gondola.enter(this.date, dateTxt);
        await gondola.enter(this.amount, priceTxt);
        await gondola.tap(this.saveExpenseBtn);
    }
}
export default new expensePage();

Using the modified method in your Test Case

1. Go back to your Test Case and and delete the line with add expense, then add it again. This time you will see fields for descriptionTxt, dateTxt, and priceTxt
2. Create 3 new rows and the use the add expense, add different data such as coffee, couch, movie tickets for the description fields and run your test again.

TestCase("add expense", async () => {
    await expensePage.addExpense("Coffee", "2020-03-27", "3.00");
    await expensePage.addExpense("Beer", "2020-04-01", "2.00");
    await expensePage.addExpense("Soda", "2020-03-30", "1.00");
});