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