Mobile Automation: Appium + Selenide (example with Calculator app, Android)

Mobile Automation: Appium + Selenide (example with Calculator app, Android)

How To:

1. add selenide.jar to the project

2. set your driver with WebDriverRunner.setWebDriver(your_driver);

3. write the test with selenide syntax sugar:

Example: standard android Calculator app.

capabilities.setCapability(MobileCapabilityType.APP_PACKAGE, "com.android.calculator2");

capabilities.setCapability(MobileCapabilityType.APP_ACTIVITY, "com.android.calculator2.Calculator");


package test;

import org.openqa.selenium.By;
import org.testng.annotations.*;

import static com.codeborne.selenide.Selenide.$;
import static com.codeborne.selenide.Condition.text;

import utilits.TestBase;

public class CalculatorTest extends TestBase {


@Test
public void testCalculator(){

    $(By.name("2")).click();
    $(By.name("+")).click();
    $(By.name("4")).click();
    $(By.name("=")).click();

    $(By.className("android.widget.EditText")).shouldHave(text("6"));
  }

}



Link to gist

9. Reporting: Selenide + Allure

Reporting:  Selenide + Allure

Concise UI tests require nice Allure reports :)

1. Selenide + Allure + TestNg

2. Selenide + Allure + JUnit  

1. Selenide + Allure + TestNg

Here is an example of test project from 8. Page Object (but using TestNG instead of Junit) with Allure reports. 


Clone a repository from selenide-allure-testng and go to project folder.

To run tests and generate Allure report:

$ mvn clean test
$ mvn site

Report folder:  /target/site/allure-maven-plugin/

To see a report:

$ mvn jetty:run

open http://localhost:8080 in your browser

2. Selenide + Allure + JUnit

Here is an official example from Selenide:
https://github.com/selenide-examples/selenide-allure-junit

8. Page Object

Page Object

1. How to start

2. Example with Google search

1. How to start

Refresh in memory 1. Introduction

Pay attention to:
Vimeo: How to write UI test in 10 minutes
Selenide site: http://selenide.org/documentation/page-objects.html

2. Example with Google search

You can find concise examples for Classic Selenium Page Object, Selenide Page Object, Selenide Page Object with fields here: selenide-examples (official source) .

The example below is just another variation and not pretending to be something more than simple quick example with a chain of methods inside the test. 

Example:

// test/GoogleTest.java

package ua.in.externalqa.test;

import org.junit.Test;

public class GoogleTest extends TestBase {

  @Test

  public void userCanSearch() {

    onGooglePage()

    .searchFor("selenide")

    .ensureResultsContains("concise UI tests in Java")

    .ensureResultsHaveSize(10);

    

  }

}

// test/TestBase.java

package ua.in.externalqa.test;

import ua.in.externalqa.pages.GooglePage;

import static com.codeborne.selenide.Selenide.open;

import static com.codeborne.selenide.Configuration.baseUrl;

public class TestBase {

    

public GooglePage onGooglePage(){

baseUrl = "http://google.com";

GooglePage page = open("/ncr", GooglePage.class);

return page;

}

}

// pages/GooglePage.java

package ua.in.externalqa.pages;

import static com.codeborne.selenide.Selenide.$;

import static com.codeborne.selenide.Selenide.page;

public class GooglePage {

public SearchResultsPage searchFor(String text) {

        $("#lst-ib").val(text).pressEnter();

    return page(SearchResultsPage.class);

  }

}

// pages/SearchResultsPage.java

package ua.in.externalqa.pages;

import com.codeborne.selenide.ElementsCollection;

import static com.codeborne.selenide.CollectionCondition.size;

import static com.codeborne.selenide.Condition.visible;

import static com.codeborne.selenide.Selenide.$;

import static com.codeborne.selenide.Selenide.$$;

import org.openqa.selenium.By;

public class SearchResultsPage {

  

public SearchResultsPage ensureResultsContains(String text ) {

$(By.partialLinkText(text)).shouldBe(visible);

return this; 

}

public SearchResultsPage ensureResultsHaveSize(int size ) {

getResults().shouldHave(size(size));

return this; 

}

public ElementsCollection getResults() {

    return $$(By.className("rc"));

  }

}

7. Querying

Querying

1. How to find and filter data in table

2. How to check if image is broken

3. How to check if condition is true

4. How to verify elements sorting order

1. How to find and filter data in table

Use findBy("text") or filterBy("text") to get row with "text" from table.

Use excludeWith("text") to get rows without "text" from table.

Example: 

@Test
    public void testTableFilter() {

        open("https://the-internet.herokuapp.com/tables");

        SelenideElement _row = $$("#table1 > tbody > tr").findBy(text("Smith"));
        /* Result:
        *  Smith John jsmith@gmail.com $50.00 http://www.jsmith.com edit delete
        */
    

        ElementsCollection rows = $$("#table1 > tbody > tr").excludeWith(text("Doe"));
        /* Result:
        *  Smith John jsmith@gmail.com $50.00 http://www.jsmith.com edit delete
        *  Bach Frank fbach@yahoo.com $51.00 http://www.frank.com edit delete
        *  Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com edit delete
        */


        ElementsCollection rows1 = $$("#table1.tablesorter tbody tr td").filterBy(text("Conway"));
        /* Result:
        *  Conway
        *  tconway@earthlink.net
        * /
    }

2. How to check if image is broken

        open("https://the-internet.herokuapp.com/broken_images");

        assertTrue("Broken image1", $(By.xpath(".//*[@id='content']/div/img[1]")).isImage()); // fail
        assertTrue("Broken image2", $(By.xpath(".//*[@id='content']/div/img[2]")).isImage()); // fail
        assertTrue("Broken image3", $(By.xpath(".//*[@id='content']/div/img[3]")).isImage()); // pass

3. How to check if condition is true

The most common conditions:

          $("#element").isSelected();
        $("#element").isDisplayed();
        $("#element").isEnabled();
        $("#element").exists();
        $("#element").isImage();

Or mix is() with other conditions. To get more information about Conditions please refer to 5. Conditions and Assertions

        $("#element").is(Condition condition);

6. Waits

Waits

1. Wait for element state

2. Wait for element text

3. Wait for element value

4. Wait for element attribute

Cheat Sheet

Element + waitUntil + Condition or Conditions + Time in ms

For more information about Conditions please refer to 5. Conditions and Assertions 

1. Wait for element state

        $("#username").waitUntil(present, 5000);

        $("#username").waitUntil(enabled, 5000);

        $("#username").waitUntil(disabled, 5000);

        $("#username").waitUntil(visible, 5000);

        $("#username").waitUntil(appears, 5000);

        $("#username").waitUntil(disappears, 5000);

        $("#username").waitUntil(empty, 5000);

        $("#username").waitUntil(focused, 5000);

        $("#username").waitUntil(selected, 5000);   

2. Wait for element text

        $("#welcome").waitUntil(hasText("Hello, Johny!"), 2000);
                
        $("#username").waitUntil(matchesText("Johny"), 2000);
                
        $("#username").waitUntil(not(matchesText("Noname")), 2000);
                
        $("#username").waitUntil(matchText("^Johny$"), 2000);
        

3. Wait for element value

        $("#username").waitUntil(hasValue("123"), 2000);

4. Wait for element attribute

        $("#username").waitUntil(hasAttribute("name", "user.name"), 2000);

        $("#username").waitUntil(hasClass("green-button"), 2000);

5. Conditions and Assertions

Conditions and Assertions

1. How to check element state?

2. How to check that element has text (exactly match)?

3. How to check that element contains some text (pattern match)?

4. How to check that element contains some text (regexp match)?

5. How to check that element has some attribute?

6. How to check that elements collection have expected size?

7. How to check hidden element?

Cheat Sheet

How To:

Element + Assertions + Conditions == Check that element has something expected (text, value or state)

1. How to check element state?

You can use conditions with assertions to check if element  is visible or disappears or focused etc.

The most common conditions related to element state are available in Selenide.

Condition | Another name of condition

visible  or appear (appears)
present  or exist
notPresent (deprecated)
hidden or disappear (disappears) or not(visible)
readonly
enabled
disabled
focused
empty
selected

$("#element")  +  should() or shouldBe() +  condition or conditions
$("#element")  +  shouldNotBe() +  condition or conditions

Usage:

        $("input").shouldBe(visible, enabled); //visible | appear
        $("input").shouldBe(exist); //present | exist
        $("input").shouldBe(hidden); //hidden | disappear | not(visible)
        $("input").shouldBe(readonly);
        $("input").shouldBe(focused);
        $(".errors").shouldBe(Condition.empty);
        $$(".errors").shouldHave(CollectionCondition.empty);
        $(".errors").shouldBe(notPresent); 
        $(".errors").shouldBe(selected);
        $("input").shouldNotBe(visible, enabled);
        $("input").shouldNotBe(visible, disabled);

2.0 How to check that element has some text  ?

        $("#element")  +  shouldHave() +  condition or conditions
        $("#element")  +  shouldNotHave() +  condition or conditions

Usage:

         $(".element").shouldHave(text("text"));
         $(".element").shouldHave(textCaseSensitive("text"));

         $$(".errors").shouldHave(texts("text 1", "text 2"));

2.  How to check that element has text (exactly match)?

      
        $(".element").shouldHave(exactText("text"));
        $(".element").shouldHave(exactTextCaseSensitive("text"));

For elements:

        $$(".errors").shouldHave(exactTexts("text 1", "text 2"));

3. How to check that element contains some text (pattern match)?

         $(".element").shouldHave(matchesText("text"));

or assert $(".element").text().contains("text");

4  How to check that element contains some text (regexp match)?

        $(".element").shouldHave(matchText("^text$"));

5. How to check that element has some attribute?

to check that element has expected value:

        $(".element").shouldHave(hasValue("text"));

to check that element has expected class:
       
        $(".element").shouldHave(hasAttribute("class", "g"));
      
        $(".element").shouldHave(hasClass("nav"));

to check that element has expected id:

        $(".element").shouldHave(id("password"));

to check that element has expected name:

        $(".element").shouldHave(name("name"));         

to check that element has expected type:

        $(".element").shouldHave(type("file"));

6. How to check that elements collection have expected size?

        $$(".errors").shouldHave(size(2));
        $$(".errors").shouldHaveSize(2);

        $$(".errors").shouldBe(empty);

4. Forms and other elements (Part 2)

Forms and other elements (Part 2)

4.2 Interacting with forms

1. Basic authorization

2. TextField and TextArea

3. Radio button

4. CheckBox

5. Dropdown List

6. Frames

1. Basic authorization

    @Test
    public void testBasicAuthOk() {

        // login="admin", password="admin"
        open("http://admin:admin@the-internet.herokuapp.com/basic_auth");
        
        $("html").shouldHave(text("Congratulations! You must have the proper credentials."));

    }

2. TextField and TextArea

Login Form:

    @Test

    public void testLoginOk() {

        // login="tomsmith", password="SuperSecretPassword!"

        // Version 1

       open("http://the-internet.herokuapp.com/login");

        $("#username").val("tomsmith"); // or setValue("tomsmith")

        $("#password").val("SuperSecretPassword!"); // or setValue("SuperSecretPassword!")

        $(byText("Login")).submit();

        $("html").shouldHave(text("You logged into a secure area!"));

        // Version 2

        open("http://the-internet.herokuapp.com/login");

        $(byText("Username")).sendKeys("tomsmith");

        $(byText("Password")).sendKeys("SuperSecretPassword!");

        $(byText("Login")).submit();

        $("html").shouldHave(text("You logged into a secure area!"));

    }

Might be useful:

$("#username").click();

$("#username").clear();

TextArea:

open("http://derp-bear.herokuapp.com/forms/basic_form_example");

$("#free_text_area").val("At w3schools.com you will learn how to make a website.\n" +

                "We offer free tutorials in all web development technologies.\n\n" +

                " :)");

Should get multiline text in the text area :

"At w3schools.com you will learn how to make a website. 

We offer free tutorials in all web development technologies.

:)"

3. Radio button

    open("http://derp-bear.herokuapp.com/forms/basic_form_example");

    $(byText("Female")).setSelected(true);

    $(byText("Male")).setSelected(false);

    $("#female").shouldBe(selected);

    $("#male").shouldNotBe(selected);

    $(byText("Male")).click();

    $("#female").shouldNotBe(selected);

    $("#male").shouldBe(selected);

4. Checkboxes

   open("http://the-internet.herokuapp.com/checkboxes");

 // to set selected all checkboxes

        for (SelenideElement checkbox : $$("#checkboxes>input")){

            System.out.println("Is selected? " + checkbox.isSelected());

            if (!checkbox.isSelected()) {

                checkbox.setSelected(true);

            }

        }

// mark checkboxes as definitely checked or unchecked

        $$("#checkboxes>input").get(0).setSelected(true);

        $$("#checkboxes>input").get(1).setSelected(false);

// or use click to change from checked to unchecked and vice versa

        $$("#checkboxes>input").get(0).click();

        $$("#checkboxes>input").get(1).click();

5. Dropdown List

Usually it is easy to select some option from dropdown menu:

$("#menu").selectOption("text");

$("#menu").selectOptionByValue("value");

Example (not so easy to select some option from dropdown list):

    open("http://derp-bear.herokuapp.com/forms/basic_form_example");

    $(".select").$("#pet_select").click();

    $(".select").$(byText("Rabbit")).click();

    $(byText("Rabbit")).shouldBe(selected);

    $(".select").$(byText("Dog")).setSelected(true);

    $(byText("Dog")).shouldBe(selected);

    /* Not working for this example. Please see example below with JavaScript

    $(".select").selectOption("Horse");

    $(byText("Horse")).shouldBe(selected);

    $(".select").$(byValue("23")).click();

    $(byText("Snake")).shouldBe(selected);

    */

        

      executeJavaScript("document.getElementById('pet_select').style='';");

    $("#pet_select").selectOption("Horse");

    $(byText("Horse")).shouldBe(selected);

    $("#pet_select").selectOptionByValue("23");

    $(byText("Snake")).shouldBe(selected);

    }

6. Frames

open("http://demo.prestashop.com/");

switchTo().frame($("#framelive"));