Списки виджетов, со списками внутри виджетов

Мы уже рассмотрели, как строить виджеты и списки виджетов, а также как строить пути элементов и виджетов внутри виджетов. Однако периодически встречаются списки виджетов, внутри которых находятся другие списки элементов или более мелких виджетов. Рассмотрим, как это делать на примере аккордеона, но в этот раз внутри каждого блока добавим список из кнопок.

---

---

Вариант на Selenide

1. Описываем 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. Создаём сценарий, в котором будут разворачиваться разные блоки аккордеона и нажиматься кнопки из списка внутри блоков.

@Test
@DisplayName("Switching accordion sections and ")
public void sectionsWithListsOfElements() {
    Selenide.open(formPageUrl);
    formPage.leftBarLinks().filter(Condition.text("List locator chain")).first().click();
    listLocatorPage.clickSection("Section 2");
    listLocatorPage.selectOption("Section 2", "Option 3");
    listLocatorPage.clickSection("Section 3");
    listLocatorPage.selectOption("Section 3", "Option 4");
    listLocatorPage.selectOption("Section 3", "Option 5");
    listLocatorPage.clickSection("Section 1");
    listLocatorPage.selectOption("Section 1", "Option 1");
    listLocatorPage.selectOption("Section 1", "Option 2");
    listLocatorPage.contextClickOption("Section 1", "Option 5");
    listLocatorPage.selectOption("Section 1", "Option 4");
}

Смотрим отчёт:

Вариант на Allurium

1. Описываем 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") // Или: @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. Описываем сценарий

@Test
@DisplayName("Switching accordion sections and ")
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();
}

Смотрим отчёт: