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"));

4. Forms and other elements (Part 1)

Forms and other elements

4.1. Clicking links and buttons

1. Buttons & Hyperlinks

2. Keys combinations

3. Actions

4. Execute JavaScript

•  How to check hidden element

•  How to drag and drop file

1. Buttons & Hyperlinks

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

$("#element").doubleClick();

$(By.linkText("Logout")).click();

$("#agreement").submit();

$(".g").contextClick();    // context menu

2. Keys combinations

Submit with Enter:

open("http://google.com");

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

$("q").pressEnter();


To navigate (Tab):

$("q").pressTab();


To select all (Ctrl-A):

 open("http://google.com");
 $("#lst-ib").val("qwertyuiop");

 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "a"));

To copy (Ctrl-C):

 open("http://google.com");
 $("#lst-ib").val("qwertyuiop");
 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "a"));

 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "c"));

To cut (Ctrl-X):

 open("http://google.com");
 $("#lst-ib").val("qwertyuiop");
 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "a"));

 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "x"));

To paste (Ctrl-V):

 $("#lst-ib").sendKeys(Keys.chord(Keys.CONTROL, "v"));

3. Actions

actions().click($("#lst-ib").val("selenide")).build().perform();

4. Execute JavaScript

executeJavaScript("console.log('Hello')");

•  How to check hidden element

•  How to drag and drop file

Source: Selenide Cheat Sheet

3. Locating elements

3. Locating elements

0.  $ and $$

1. Locating element by id

2. Locating element by css selector

3. Locating element by xpath selector

4. Locating element by class name

5. Locating element by name

6. Locating element by tag name

7. Locating element by link text

8. Locating element by partial link text

9. Locating element by text

10. Locating element with text

11. Locating element by title

12. Locating element by attribute

13. Locating element by value 

14. Locating one element in another element by chain

0. $ and $$

Use "$" to find one element:
$("#someId")  is the same as driver.findElement(By.id("someId"))

Use "$$" to find all elements:
$$(".someCssSelector") is the same as driver.findElements(By.cssSelector("someCssSelector"))

1. Locating element by id

$("#someId");

$(By.id("someId"));

2. Locating element by css selector

$(".someCssSelector");

$(By.cssSelector(".someCssSelector"));

3. Locating element by xpath selector

$(By.xpath(".//*[@class='price']"));

4. Locating element by class name

$(By.className("nav"));

5. Locating element by name

$(By.className("someName"));

6. Locating element by tag name

$(By.tagName("a"));

7. Locating element by link text

$(By.linkText("Logout"));

8. Locating element by partial link text

$(By.partialLinkText("out"));

9. Locating element by exact text

$(byText("Logout")); 

10. Locating element with text  (substring)

$(withText("out")); 
    

11. Locating element by title attribute

$(byTitle("someTitle")); 

12. Locating element by attribute

$(byAttribute("class", "g")); 

13. Locating element by value attribute 

$(byValue("someValue"));

          

14. Locating one element in another element by chain

$("#mainElement").$("#subElement")



Source: Selenide Cheat Sheet

How to drag and drop and upload file with Selenide and JavaScriptExecutor

Demo page: http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/

This page contains drag and drop area but has no <input type='file'> tags.

So  $("#fileInput").uploadFile(file); is not working in this situation.
Drag and drop actions chain is not working too because we need to take files from user`s side.

Here is a workaround.
JavaScript part
1. Create fake input field with type="file" and other necessary attributes
2. Add it to DOM 
3. Dispatch drag and drop event
4. Remove the fake input field (optionally)

Java part
1. prepare files
2. execute javascript to get new input field
3. use $("#fileInput").uploadFile(file);   from Selenide to send file
4. execute javascript to dispatch drag and drop event

  

public class DragAndDropFilesTest{

    @Test
    public void testUserCanDragAndDropFiles() {
        open("http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/");

        // prepare files
        ArrayList<File> files = new ArrayList<File> ();
        files.add(new File("/path/to/file/file1.png"));
        files.add(new File("/path/to/file/file2.png"));

        // drag and drop area
        SelenideElement dragTarget = $("#dropbox");

        // drag and drop the 1st file
        
        dragAndDropFile(files.get(0), dragTarget);
        // drag and drop the 2nd file
        //  it might be necessary to wait for uploaded files appearing on the page. Css selector ".uploaded"         
        dragAndDropFile(files.get(1), dragTarget, ".uploaded");

        assertEquals($$(".uploaded").size(), files.size(), "Not all files are attached");


    }

    public void dragAndDropFile(File file, SelenideElement dragTarget) {
    /*
    *    Usage:
    *    dragAndDropFile(files.get(0), $("#dragAndDropAreaId");
    *
    */
        createInputFile();
        SelenideElement fileInput = $("#selenideUpload");
        fileInput.uploadFile(file);

        dispatchFileDragAndDropEvent("dragenter", "document", fileInput);
        dispatchFileDragAndDropEvent("dragover", "document", fileInput);
        dispatchFileDragAndDropEvent("drop", dragTarget, fileInput);

        // remove fake input file element
        executeJavaScript("arguments[0].parentNode.removeChild(arguments[0]);", fileInput);
    }

    public void dragAndDropFile(File file, SelenideElement dragTarget, String waitForCss ) {
    /*
    *    Usage:
    *    dragAndDropFile(files.get(0), $("#dragAndDropAreaId", ".uploaded");
    *
    */
        createInputFile();
        SelenideElement fileInput = $("#selenideUpload");
        fileInput.uploadFile(file);

        dispatchFileDragAndDropEvent("dragenter", "document", fileInput);
        dispatchFileDragAndDropEvent("dragover", "document", fileInput);
        dispatchFileDragAndDropEvent("drop", dragTarget, fileInput);
        $(waitForCss).waitUntil(appears, 5000); // wait until file appears on the page
        // remove fake input file element
        executeJavaScript("arguments[0].parentNode.removeChild(arguments[0]);", fileInput);
    }

    public void dragAndDrop(SelenideElement fileInput, SelenideElement dragTarget) {
    /*
    *         Usage:
    *
    *         // upload the first file
    *        createInputFile();
    *        SelenideElement fileInput = $("#selenideUpload");
    *        fileInput.uploadFile(files.get(0));
    *
    *        // upload the second file
    *        createInputFile();
    *        SelenideElement fileInput = $("#selenideUpload");
    *        fileInput.uploadFile(files.get(1));
    *
    */
        dispatchFileDragAndDropEvent("dragenter", "document", fileInput);
        dispatchFileDragAndDropEvent("dragover", "document", fileInput);
        dispatchFileDragAndDropEvent("drop", dragTarget, fileInput);
        $(".uploaded").waitUntil(appears, 5000); // wait until file appears on the page
        executeJavaScript("arguments[0].parentNode.removeChild(arguments[0]);", fileInput);
    }

    public void createInputFile() {
        // Generate a fake input file selector
        executeJavaScript("var input = document.createElement('input');" +
                "input.id = 'selenideUpload';" +
                "input.type = 'file';" +
                "input.style.display = 'block';" +
                "input.style.opacity = '1';" +
                "input.style['transform']='translate(0px, 0px) scale(1)';" +
                "input.style['MozTransform']='translate(0px, 0px) scale(1)';" +
                "input.style['WebkitTransform']='translate(0px, 0px) scale(1)';" +
                "input.style['msTransform']='translate(0px, 0px) scale(1)';" +
                "input.style['OTransform']='translate(0px, 0px) scale(1)';" +
                "input.style.visibility = 'visible';" +
                "input.style.height = '1px';" +
                "input.style.width = '1px';" +
                "input.name = 'uploadfile';" +
                "if (document.body.childElementCount > 0) {" +
                "document.body.insertBefore(input, document.body.childNodes[0]);" +
                "} else {" +
                "document.body.appendChild(input);" +
                "}");

    }

    public void dispatchFileDragAndDropEvent(String eventName, Object to, SelenideElement fileInputId){
    String script =  "var files = arguments[0].files;" +
            "var items = [];" +
            "var types = [];" +
            "for (var i = 0; i < files.length; i++) {" +
            " items[i] = {kind: 'file', type: files[i].type};" +
            " types[i] = 'Files';" +
            "}" +
            "var event = document.createEvent('CustomEvent');" +
            "event.initCustomEvent(arguments[1], true, true, 0);" +
            "event.dataTransfer = {" +
            " files: files," +
            " items: items," +
            " types: types" +
            "};" +
            "arguments[2].dispatchEvent(event);";

        if (to instanceof String) {        // for "document" in dispatchFileDragAndDropEvent("dragenter", "document", fileInput)
            script = script.replace("arguments[2]", to.toString());
        } else {
            executeJavaScript(script,fileInputId, eventName, to);
        }

    }

}

JavaScript Source: Thanks for idea to PT024/ProfessionalTester-December2013-Herrmann.pdf