Managing 'Carousel' Widgets

In the previous example, we learned that the framework contains abstract classes for describing the most common elements. In this example, we will consider how to create a more complex widget – a carousel (slider). The main idea of any carousel is to display images, often with the ability to switch between them. For this purpose, there is an abstract class AbstractCarousel.

For illustration, let's take the widget described on the carousel.html page:

---

---

HTML code of the widget

<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>

The abstract class itself looks as follows:

@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();
}

Let's describe our own widget by creating the Carousel class and inheriting from the AbstractWidget class:

We need to override 2 abstract methods: scrollForward() and 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");
    }
}

Declare it on the page:

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

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

And write the test scenario:

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

Run the test, watch how it executes, and analyze the report. The report automatically compiles steps with the element name and type substituted.