Building Widget Lists with Nested Widgets

We have already covered how to build widgets and lists of widgets, as well as how to build locators for elements and widgets inside widgets. However, sometimes you encounter widget lists that contain other lists of elements or smaller widgets. Let's see how to do this using the example of an accordion, but this time, inside each block we add a list of buttons.

---

---

Selenide Version

1. Define the Page Object

@Getter
@Accessors(fluent = true)
public class ListLocatorPage {

    protected ElementsCollection sections = $$("#accordion .card").as("Sections");

    @Step("Select section {sectionTitle}")
    public void clickSection(String sectionTitle) {
        SelenideElement target = null;
        for (SelenideElement section : sections) {
            if (section.find(".card-header button").text().equals(sectionTitle))
                section.find(".card-header button").click();
        }
    }

    @Step("Select {option} in the section {sectionTitle}")
    public void selectOption(String sectionTitle, String option) {
        sections.filter(Condition.text(sectionTitle)).first()
                .findAll(".card-body .btn")
                .filter(Condition.text(option)).first().click();
    }

    @Step("Open context menu {option} in the section {sectionTitle}")
    public void contextClickOption(String sectionTitle, String option) {
        sections.filter(Condition.text(sectionTitle)).first()
                .findAll(".card-body .btn")
                .filter(Condition.text(option)).first().contextClick();
    }
}

2. Create a test scenario in which different accordion sections are expanded and buttons from the list inside the sections are clicked.

@Test
@DisplayName("Switching accordion sections and selecting options")
public void sectionsWithListsOfElements() {
    Selenide.open(formPageUrl);
    formPage.leftBarLinks().get("List locator chain").click();
    listLocatorPage.sections().get("Section 2").sectionTitle().click();
    listLocatorPage.sections().get("Section 2").listOptions().get("3").click();
    listLocatorPage.sections().get("Section 3").sectionTitle().click();
    listLocatorPage.sections().get("Section 3").listOptions().get("Option 4").click();
    listLocatorPage.sections().get("Section 3").listOptions().get("Option 5").click();
    listLocatorPage.sections().get("Section 1").sectionTitle().click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 1").click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 2").click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 5").contextClick();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 4").click();
}

Let's view the report:

Allurium Version

1. Define the Page Object

@PageObject
@Getter
@Accessors(fluent = true)
public class ListLocatorPage {

    @Name("Sections")
    @ListLocator(css = "#accordion .card")
    protected ListWC<Section> sections = new ListWC<>();

    @Widget
    @Getter
    @Accessors(fluent = true)
    public static class Section extends AbstractWidget {

        @LocatorChain(css = ".card-header button")
        protected Title sectionTitle;

        @Name("Options")
        @ListLocatorChain(css = ".card-body .btn") // Or: @ListLocatorChain(xpath="//div[@class='card-body']/button")
        protected ListWC<Button> listOptions = new ListWC<>();

        public Section(SelenideElement root) {
            super(root);
        }

        @Override
        public String getId() {
            return sectionTitle.text();
        }
    }
}

2. Define the test scenario

@Test
@DisplayName("Switching accordion sections and selecting options")
public void sectionsWithListsOfElements() {
    UiSteps.openBrowser(formPageUrl);
    formPage.leftBarLinks().get("List locator chain").click();
    listLocatorPage.sections().get("Section 2").sectionTitle().click();
    listLocatorPage.sections().get("Section 2").listOptions().get("3").click();
    listLocatorPage.sections().get("Section 3").sectionTitle().click();
    listLocatorPage.sections().get("Section 3").listOptions().get("Option 4").click();
    listLocatorPage.sections().get("Section 3").listOptions().get("Option 5").click();
    listLocatorPage.sections().get("Section 1").sectionTitle().click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 1").click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 2").click();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 5").contextClick();
    listLocatorPage.sections().get("Section 1").listOptions().get("Option 4").click();
}

Let's view the report: