Selenium-java: Screenplay example

Last week, i have read a post about ScreenPlay design pattern, and hear it in Selenium Conference 2016. So today I created this post to show “How to implement ScreenPlay in Selenium Java”. For concepts and comparison between Page Object and ScreenPlay, please find in attached links in this my post.

  • URL: http://www.calculator.net/bmi-calculator.html

bmi_sample

  • Test case steps:

  1. Click on metric tab
  2. Fill in BMI form (age, gender, height, weight) then click on “Calculate” button
  3. Verify Bmi result with expectation.
The first: Create maven java project in Inteliji with pom.xml has content below:
<
<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tvn</groupId>
    <artifactId>com.tvn</artifactId>
    <version>1.0</version>
    <packaging>jar</packaging>

    <name>Selenium Java - ScreenPlay sample</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <serenity.version>1.2.5-rc.2</serenity.version>
        <webdriver.driver>firefox</webdriver.driver>
    </properties>

    <repositories>
      <repository>
        <snapshots>
        <enabled>false</enabled>
        </snapshots>
        <id>central</id>
        <name>bintray</name>
        <url>http://jcenter.bintray.com</url>
      </repository>
    </repositories>
    <pluginRepositories>
      <pluginRepository>
        <snapshots>
        <enabled>false</enabled>
        </snapshots>
        <id>central</id>
        <name>bintray-plugins</name>
        <url>http://jcenter.bintray.com</url>
      </pluginRepository>
    </pluginRepositories>

    <dependencies>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-core</artifactId>
            <version>${serenity.version}</version>
        </dependency>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-screenplay</artifactId>
            <version>${serenity.version}</version>
        </dependency>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-screenplay-webdriver</artifactId>
            <version>${serenity.version}</version>
        </dependency>
        <dependency>
            <groupId>net.serenity-bdd</groupId>
            <artifactId>serenity-junit</artifactId>
            <version>${serenity.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.7</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.assertj</groupId>
            <artifactId>assertj-core</artifactId>
            <version>1.7.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.19.1</version>
                <configuration>
                    <skip>true</skip>
                </configuration>
            </plugin>
            <plugin>
                <artifactId>maven-failsafe-plugin</artifactId>
                <version>2.18.1</version>
                <configuration>
                    <includes>
                        <include>**/*Test.java</include>
                        <include>**/Test*.java</include>
                        <include>**/When*.java</include>
                        <include>**/*Index.java</include>
                    </includes>
                    <argLine>-Xmx512m</argLine>
                    <systemPropertyVariables>
                        <webdriver.driver>${webdriver.driver}</webdriver.driver>
                    </systemPropertyVariables>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>integration-test</goal>
                            <goal>verify</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>net.serenity-bdd.maven.plugins</groupId>
                <artifactId>serenity-maven-plugin</artifactId>
                <version>${serenity.version}</version>
                <executions>
                    <execution>
                        <id>serenity-reports</id>
                        <phase>post-integration-test</phase>
                        <goals>
                            <goal>aggregate</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

 

The second step: create packages under src/test/java like below

— src

|_____test

|___screenplay

|___features.bmi

|___questions

|___tasks

|___ui

the third step: create BmiCalculatorPage.java under ui package like:

package screenplay.ui;

import net.serenitybdd.core.pages.PageObject;
import net.thucydides.core.annotations.DefaultUrl;

@DefaultUrl("/bmi-calculator.html")
public class BmiCalculatorPage extends PageObject {
}

and BmiForm.java like below:

package screenplay.ui;

import net.serenitybdd.screenplay.targets.Target;

public class BmiForm {
    public static Target METRIC_TAB = Target.the("metric tab").locatedBy(".//a[.='Metric Units']");
    public static Target AGE_FIELD = Target.the("age field").locatedBy("#cage");
    public static Target MALE_RAD = Target.the("male radio button").locatedBy("#csex1");
    public static Target FEMALE_RAD = Target.the("female radio button").locatedBy("#csex2");

    public static Target HEIGHT_FIELD = Target.the("height field").locatedBy("#cheightmeter");
    public static Target WEIGHT_FIELD = Target.the("weight field").locatedBy("#ckg");
    public static Target CALCULATE_BTN = Target.the("calculate button").locatedBy(".//input[@alt='Calculate']");
    public static Target BMI_RESULT_LBL = Target.the("BMI result").locatedBy(".bigtext");
}

 

The fourth step: create tasks,
    • Create OpenBmiCalculator.java:

 

package screenplay.tasks;

import screenplay.ui.BmiCalculatorPage;
import net.serenitybdd.screenplay.Actor;
import net.serenitybdd.screenplay.Task;
import net.serenitybdd.screenplay.actions.Open;
import net.thucydides.core.annotations.Step;

public class OpenBmiCalculator implements Task {
    BmiCalculatorPage bmiCalculatorPage;

    @Step("Open BMI calculator")
    public <T extends Actor> void performAs(T actor){
        actor.attemptsTo(Open.browserOn().the(bmiCalculatorPage));
    }
}

and Calculate.java :

package screenplay.tasks;

import screenplay.ui.BmiForm;
import net.serenitybdd.screenplay.Actor;
import net.serenitybdd.screenplay.Task;
import net.serenitybdd.screenplay.actions.Click;
import net.serenitybdd.screenplay.actions.Enter;
import net.serenitybdd.screenplay.questions.Text;
import net.thucydides.core.annotations.Step;

import static net.serenitybdd.screenplay.Tasks.instrumented;

public class Calculate implements Task {
    private  final String age;
    private  final String gender;
    private  final String height;
    private  final String weight;

    protected Calculate(String age, String gender, String height, String weight) {
        this.age = age;
        this.gender = gender;
        this.height = height;
        this.weight = weight;
    }

    @Step("Calculate BMI in Metric units")
    public &lt;T extends Actor&gt; void performAs(T actor) {
        actor.attemptsTo(Click.on(BmiForm.METRIC_TAB));
        actor.attemptsTo(Enter.theValue(age).into(BmiForm.AGE_FIELD));
        if (gender.equalsIgnoreCase("male")){
            actor.attemptsTo(Click.on(BmiForm.MALE_RAD));
        }else actor.attemptsTo(Click.on(BmiForm.FEMALE_RAD));

        actor.attemptsTo(Enter.theValue(weight).into(BmiForm.WEIGHT_FIELD));
        actor.attemptsTo(Enter.theValue(height).into(BmiForm.HEIGHT_FIELD));
        actor.attemptsTo(Click.on(BmiForm.CALCULATE_BTN));

    }

    public static Calculate withValue(String age, String gender, String height, String weight){
        return instrumented(Calculate.class,age,gender,height,weight);
    }
}

 

The fifth step: create questions, BMIResult.java
package screenplay.questions;

import screenplay.ui.BmiForm;
import net.serenitybdd.screenplay.Actor;
import net.serenitybdd.screenplay.Question;
import net.serenitybdd.screenplay.annotations.Subject;
import net.serenitybdd.screenplay.questions.Text;

@Subject("Show bmi result")
public class BMIResult implements Question&lt;String&gt; {
    @Override
    public String answeredBy(Actor actor) {
        return Text.of(BmiForm.BMI_RESULT_LBL)
                .viewedBy(actor)
                .asString();
    }

    public static BMIResult text(){
        return new BMIResult();
    }
}

 

last step: create scenario with created steps in previous in features.bmi package CalculateBodyMassIndex.java
package screenplay.features.bmi;

import screenplay.questions.BMIResult;
import screenplay.tasks.Calculate;
import screenplay.tasks.OpenBmiCalculator;
import net.serenitybdd.junit.runners.SerenityRunner;
import net.serenitybdd.screenplay.Actor;
import net.serenitybdd.screenplay.abilities.BrowseTheWeb;
import net.thucydides.core.annotations.Managed;
import net.thucydides.core.annotations.Steps;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.openqa.selenium.WebDriver;

import static net.serenitybdd.screenplay.GivenWhenThen.*;
import static org.hamcrest.core.Is.is;

/**
 * Created by hado on 4/17/17.
 */
@RunWith(SerenityRunner.class)
public class CalculateBodyMassIndex {

    Actor haDo =Actor.named("Ha Do");

    @Managed(uniqueSession = true)
    public WebDriver hisBrowser;

    @Steps
    OpenBmiCalculator openBmiCalculator;

    @Before
    public void haDoCanBrowseTheWeb(){
        haDo.can(BrowseTheWeb.with(hisBrowser));
    }

    @Test
    public void calculate_body_mass_index_test(){
        givenThat(haDo).wasAbleTo(openBmiCalculator);
        when(haDo).attemptsTo(Calculate.withValue("30","male","173","65"));
        then(haDo).should(seeThat(BMIResult.text(),is("BMI = 21.72 kg/m2   (Normal)")));

    }

}

Add serenity configuration:

Create serenity.properties file under java project root with content:

# Define the default driver
webdriver.driver=chrome
webdriver.base.url=http://www.calculator.net

# Appears at the top of the reports
serenity.project.name = TVN Demo Project with ScreenPlay Pattern

# Root package for any JUnit acceptance tests
serenity.test.root=screenplay.features

# Customise your riequirements hierarchy
serenity.take.screenshots=FOR_FAILURES

then open command line/terminal to run maven test

mvn clean verify

mvn_run

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s