Easy setup
https://docs.google.com/document/d/1fodHkTunrtit-EiMBrb91Mc6rbnQ5LwtBL9rISQveKA/edit?usp=sharing

FAQ
https://docs.google.com/document/d/10qSwWTQ6pGfVZSwOes-1QSmdflMiGD2U_y53VHq2m20/edit?usp=sharing


public class QACourseAutomationTest {
/*
    почитай раздел по naming - FAQ
    и прими решение по поводу имени тест-класса
*/
    @Rule
    public ScreenShooter makeScreenShot = ScreenShooter.failedTests().succeededTests();
/*
    Selenide по умолчанию делает скриншоты при падении теста
    а если тест прошел - польза от скриншота - сомнительная)

    смело убирай эту строчку
*/

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

        подправь имя тест-метода
        раздел по неймингу в faq - тоже должен помочь
    */
        Configuration.timeout = 4000;
        /*
            таймаут по умолчанию - и есть - 4 секунды)
            тоже - смело убирай эту строку
        */
        open("http://todomvc.com/examples/troopjs_require/#/");
        /*
            Как Яков писал - если планируешь у нас учиться - лучше используй версию
            https://todomvc4tasj.herokuapp.com/
            но пока и так ОК
        */

        //Start of creating tasks (1-4)
        $(By.xpath("//input[@class='new-todo']")).setValue("task1").pressEnter();
        $(By.xpath("//input[@class='new-todo']")).setValue("task2").pressEnter();
        $(By.xpath("//input[@class='new-todo']")).setValue("task3").pressEnter();
        $(By.xpath("//input[@class='new-todo']")).setValue("task4").pressEnter();
        /*
            в данном случае - использование xpath - неоправданно
            на самом деле, xpath - редко нужен)
            особенно - если речь о Selenide)

            используй css Selector
            http://www.w3schools.com/cssref/css_selectors.asp

            тест - это не только нужные действия
                       это еще и проверки результатов действий
                       и правильнее - не откладывать проверки
                       а делать их сразу после действий
                       т к именно это позволит нам понять - что конкретно работает не так как нужно

                       важно - проверки должны касаться не только таски, с которой мы непосредственно работали
                       а всех тасок в списке
                       ведь ошибка может проявляться и так - после работы с одной таской - состояние другой(или других) тасок тоже как-то портиться

                       есть причины и/или цели
                       по которым мы можем отложить проверку на несколько шагов
                       вот, например выше - мы выполнили проверку после добавления всех 4-ех тасок
                       даже если тест упал бы на той проверке - мы бы могли быстро понять - с чем у нас проблема - с добавлением тасок
                       т е - точности мы не потеряли, проверив состояние списка тасок аж после добавления 4-ой таски
                       пока - принимая решение - делать ли проверку или ее отложить - руководствуйся вот такими соображениями
                       но в целом правило такое - проверки нужно делать сразу после выполненного действия
        */

        //Check if list have four elements
        $$(".todo-list li").shouldHave(CollectionCondition.size(4));
        /*
            это недостаточно сильная проверка
            тасок может быть нужное количество
            но они могут идти не в том порядке
            или - у них могут быть искажены тексты

            нам достаточно проверки $$(...).shouldHave(exactTexts("task1", "task2", "task3", "task4"))
            как осуществяется проверка по кондишену exactTexts
            сверяется количество, порядок и тексты
                количество элементов коллекции должно быть равно количеству переданных текстов
                иначе - проверка не прошла
                и далее - по порядку сверяются текст элемента и переданный текст
                нулевой - с нулевым
                первый с первым
                и  т д
            таким образом - уже не нужно проверять размер списка
            раз уже проверили  exactTexts

        */

        //Deleting task 2 (5)
        $(byText("task2")).hover().$(By.xpath("//li[2]/div/button")).shouldBe(Condition.visible).click();
        /*
            круто)
            ты таску по ее тексту нашел)

            только - советую все же - оттолкнуться от коллекции тасок
            $$(".todo-list li")

            найти элемент коллекции по его точному тексту =
            $$(...).findBy(exactText(...))

            вариант $(byText("task2")) не так хорош - т к таким образом
            мы получаем любой элемент страницы с таким именем

            а в варианте $$(...).findBy(exactText(...)) - мы более точны
            мы говорим - что работаем со списком тасок
            и у него - получаем элемент - так-то
            т е - код - хоть и немного длиннее
            но - гораздо точнее

            $(By.xpath("//li[2]/div/button")) - используй css Selector
            и у кнопки - удаления - есть селектор и понагляднее
            просмотри у этого элемента все свойства
            выбери то, которое максимально точно характеризует - что это кнопка удаления

            .shouldBe(Condition.visible).click()
            .shouldBe(Condition.visible) - не нужно выполнять
            Selenide работает так
            когда мы выполняем любое действие над элементом
            ожидание его видимости - выполняется автоматически (в рамках таймаута)
        */

        //Marking task 4 as completed (6)
        $(By.xpath("//label[(text()='task4')]/preceding-sibling::input[@type='checkbox']")).click();
        /*
            выше - уже разобрали, как получить таску по ее тексту - $$(...).findBy(exactText(...))
            и тут также - получи таску по ее тексту

            и далее - ее внутренний элемент-чекбокс - $$(...).findBy(exactText(...)).find("....")
            его - ищи по css Selector
            тоже - подбери понагляднее
        */

        //Clearing completed (7)
        $(By.xpath("//button[@class='clear-completed']")).shouldBe(Condition.visible).click();
        /*
            нужен css Selector

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

            про .shouldBe(Condition.visible) перед click() - писала
        */

        //Mark all as completed (8)
        $(By.xpath("//input[@type='checkbox']")).click();
        /*
            нужен наглядный css Selector
        */
        //Clear remaining completed tasks (9)
        $(By.xpath("//button[@class='clear-completed']")).shouldBe(Condition.visible).click();
        /*
            нужен наглядный css Selector
        */
/*
    постарайся комментарии - применить не только там, где он написан
    но и для последующего кода

    про xpath вот это еще почитай - https://gist.github.com/yashaka/4810feb446e82c5566ba26a0996c1023

*/