Управление виджетами типа 'карусель'

В прошлом примере мы узнали, что фреймворк содержит абстрактные классы для описания наиболее распространённых элементов. В этом примере рассмотрим, как создать более сложный виджет – карусель (слайдер). Основная суть любой карусели – показывать изображения, зачастую с возможностью их переключения. Для этого существует абстрактный класс AbstractCarousel.

Для наглядности возьмём виджет, описанный на странице carousel.html:

---

---

HTML код виджета

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&w=800" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Second slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Сам абстрактный класс выглядит следующим образом:

@Widget
public abstract class AbstractCarousel extends AbstractWidget {
    public AbstractCarousel() {
        this.setUiElementType(ElementType.CAROUSEL.getType());
    }

    public AbstractCarousel(By rootLocator) {
        super(rootLocator);
        this.setUiElementType(ElementType.CAROUSEL.getType());
    }

    public AbstractCarousel(String selenideRootLocator) {
        super(selenideRootLocator);
        this.setUiElementType(ElementType.CAROUSEL.getType());
    }

    public AbstractCarousel(SelenideElement selenideRootElement) {
        super(selenideRootElement);
        this.setUiElementType(ElementType.CAROUSEL.getType());
    }

    public abstract void scrollForward();

    public abstract void scrollBackward();
}

Опишем наш собственный виджет, создав класс Carousel и отнаследовавшись от класса AbstractWidget:

Нам потребуется переопределить 2 абстрактных метода scrollForward() и scrollBackward()

@Widget
public class Carousel extends AbstractCarousel {

    public Carousel(String selenideLocator) {
        super(selenideLocator);
    }

    @Override
    public void scrollForward() {
        getRoot().$(".carousel-control-next-icon").click();
        UiSteps.waiting(1, "observing the slide");
    }

    @Override
    public void scrollBackward() {
        getRoot().$(".carousel-control-prev-icon").click();
        UiSteps.waiting(1, "observing the slide");
    }
}

Объявим его на странице:

@PageObject
@Getter
@Accessors(fluent = true)
public class CarouselPage extends Page {

    @Name("Random images")
    protected Carousel carousel = new Carousel("#carouselExampleIndicators");
}

И напишем сценарий:

@Test
@DisplayName("Simple carouser example")
public void carouselExample() {
    UiSteps.openBrowser(carouselPageUrl);
    carouselPage.carousel().scrollForward();
    carouselPage.carousel().scrollBackward();
    carouselPage.carousel().scrollForward();
    carouselPage.carousel().scrollForward();
    carouselPage.carousel().scrollBackward();
}

Запускаем тест, смотрим, как проходит выполнение, и анализируем отчёт. В репорте автоматически составились шаги с подстановкой имени и типа элемента.