<dependencies>
        <dependency>
            <groupId>com.codeborne</groupId>
            <artifactId>selenide</artifactId>
            <version>2.20</version>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
    </dependencies>
/*
    можно использовать версии Selenide поновее)

    А лучше - использовать более новый Selenide )

    Рабочая комбинация  - Selenide 3.11 + Firefox 47.0.1

     Как можно определиться с версиями
        Посмотреть сюда - какие версии Selenide уже доступны - http://ru.selenide.org/blog.html
        Обычно в описании изменений - можно увидеть и эту информацию -
        какая версия Selenium используется и с какой версией Firefox можно работать.
        Если этого не описано для последней версии, то значит - этот момент не изменился по сравнению с
        предыдущими версиями. Можно почитать описания предыдущих версий.

        Возможно, будет быстрее - посмотреть на более техническое описание
        https://github.com/codeborne/selenide/blob/master/CHANGELOG
        Можно найти упоминания о FireFox и/или Selenium и таким образом сориентироваться по версиям браузера
        (упомянутая версия - точно подходит, возможно - также подойдет и версия повыше, но не факт)

        Еще важный момент - настройка FireFox об автоматическом обновлении до последней версии. Она может мешать )
*/
********************
public class TodoMVCTest {

    @Test
    public void testCreateTask(){
        /*
            если бы мы тестировали только создание таски - да, имя для тест-метода
            подходило бы

            а мы тестируем - несколько действий)

            если их все перечислить в имени метода - получится длинновато
            это тоже плохо влияет на наглядность

            в таких случаях - пригодится вот такой прием - называть тест-метод
            например вот так - testTasksLifeCycle/ testTasksCommonFlow
        */

        open("https://todomvc4tasj.herokuapp.com/");
        $("#new-todo").setValue("task1").pressEnter();
        $("#new-todo").setValue("task2").pressEnter();
        $("#new-todo").setValue("task3").pressEnter();
        $("#new-todo").setValue("task4").pressEnter();
        $$("#todo-list li").shouldHave(exactTexts("task1", "task2", "task3", "task4"));

        // delete task2
        $("#todo-list li[data-index = '1'] ").click();
        $("#todo-list li[data-index = '1'] .destroy").click();
        $$("#todo-list li").shouldHave(exactTexts("task1", "task3", "task4"));
         /*
                    не самый лучший способ найти нн-ый элемент - использование атрибута data-index
                    попробуй сначала добавить 3 таски, а затем удалить вторую
                    получишь - что data-index не будет отражать порядковый номер элемента

                    хотя, конечно, ты можешь возразить - что мы сами контролируем сценарий
                    и соответственно - data-index элементов - тоже

                    в рамках challenge - попробуй переписать, используй возможности синтаксиса css selector-ов
                    http://www.w3schools.com/cssref/css_selectors.asp
                    вот тут ты найдешь варианты - как обратиться к такому-то элементу списка
                    (не используя для этого атрибуты типа data-index)

                    конечно, этот код мы еще раз переделаем в итоге
                    т к на самом деле - разумнее обращаться к таске по ее тексту
                    (пока это отложи, ты сможешь это улучшить после просмотра следующего видео,
                    а сейчас важнее разобраться с css selector-ами)
         */

        // mark task4 as completed
        $("#todo-list li[data-index = '3'] .toggle").click();
        $$(".completed").shouldHave(exactTexts("task4"));
        /*
            к этой проверке еще вернемся )

            пока - в общем, верное решение
            проверить все таски списка с классом completed

            единственное, что стоит улучшить - это обратиться к списку тасок, указывая и #todo-list li в селекторе
            да, технически - не обязательно
            но - уже сейчас - это даст больше понимания - что работаем мы по-прежнему со списком тасок
            $$("#todo-list li.completed") - будет более наглядно

            и далее по коду это учти
        */

        // clear completed
        $("#clear-completed").click();
        $$("#todo-list li").shouldHave(exactTexts("task1", "task3"));

        // mark all tasks as completed
        $("#todo-list li[data-index = '0'] .toggle").click();
        $("#todo-list li[data-index = '2'] .toggle").click();
        /*
            тут имелось в виду использование вот этого чекбокса
            http://joxi.ru/n2YkKaGUjLKjgr
        */
        $$(".completed").shouldHave(exactTexts("task1", "task3"));

        // clear completed
        $("#clear-completed").click();
        $$("#todo-list li").shouldHave(size(0));
        /*
            технически - верная проверка
            можно переписать ее лаконичнее
            $$("#todo-list li").shouldBe(empty);
        */

    }
}