Селен сложный выпадающий список - PullRequest
Новая
       4

Селен сложный выпадающий список

0 голосов
/ 22 января 2019

Я пишу основы автоматизации в Selenium / C #. В настоящее время я сталкиваюсь с проблемой выпадающих списков и способа их легко обработать.

Я создал методы CheckCategoryType, которые используют перечислимый класс и Iwebelement: 

    public void CheckCategoryType(CategoryType categoryType, string categoryTypeText)
    {
        CategoryTypeField.Click();
        driver.WaitForElementVisibleAndClickable(By.XPath(string.Format(categoryTypeOptions, categoryType.ToDescriptionString())));
        var categoryTypeOption = driver.WaitForElementVisibleAndClickable(By.XPath(string.Format(categoryTypeOptions, categoryType.ToDescriptionString())));
        Assert.IsTrue(categoryTypeOption.GetAttribute("data-value").Contains(categoryType.ToDescriptionString()), $"Category type list is missing: '{categoryType}' option");
        Assert.AreEqual(categoryTypeText, categoryTypeOption.Text, "Text is not correctly shown");
        Thread.Sleep(1500);
        CategoryTypeField.Click();
    }

Если я хочу взаимодействовать с раскрывающимся списком, я использую тот же метод, но с функциональностью «Click»: 

    public void CategoryTypeClick(CategoryType categoryType)
    {
        CategoryTypeField.Click();
        driver.WaitForElementVisibleAndClickable(By.XPath(string.Format(categoryTypeOptions, categoryType.ToDescriptionString()))).Click();
    }

<div id="category-type-row-0" class="form-row" css="1">
    <div class="MuiFormControl-root-263 outlined-select ">
        <label class="MuiFormLabel-root-274 MuiFormLabel-filled-278 MuiInputLabel-root-267 MuiInputLabel-formControl-268 MuiInputLabel-animated-271 MuiInputLabel-shrink-270 solteq-label" data-shrink="true" for="categories[0].type">Category Type</label>
        <div class="MuiInputBase-root-294 MuiOutlinedInput-root-281 MuiInputBase-disabled-297 MuiOutlinedInput-disabled-283 MuiInputBase-formControl-295 solteq-input " wraperclassname="outlined-select" label="Category Type" helpertext="">
            <fieldset aria-hidden="true" class="MuiNotchedOutline-root-311 MuiNotchedOutline-disabled-315 MuiOutlinedInput-notchedOutline-288" style="padding-left: 8px;">
                <legend class="MuiNotchedOutline-legend-312" style="width: 15.5px;"></legend>
            </fieldset>
            <div class="MuiSelect-root-340">
                <div class="MuiSelect-select-341 MuiSelect-selectMenu-344 MuiSelect-disabled-345 MuiInputBase-input-304 MuiOutlinedInput-input-289 MuiInputBase-disabled-297 MuiOutlinedInput-disabled-283" aria-pressed="false" role="button" aria-haspopup="true">Product group</div>
                <input name="categories[0].type" type="hidden" id="categories[0].type" value="group">
                <svg class="MuiSvgIcon-root-58 MuiSelect-icon-346" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
                    <path d="M7 10l5 5 5-5z"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

Однако, когда мы нажимаем на конкретный раскрывающийся список, например, «Тип категории», мы получаем другой список DOM: 

<ul class="MuiList-root-389 MuiList-padding-390" role="listbox" css="1">
    <li class="MuiButtonBase-root-55 MuiListItem-root-120 MuiListItem-default-123 MuiListItem-gutters-127 MuiListItem-button-128 MuiMenuItem-root-118" tabindex="0" role="option" data-value="1">UPS<span class="MuiTouchRipple-root-333"></span></li>
    <li class="MuiButtonBase-root-55 MuiListItem-root-120 MuiListItem-default-123 MuiListItem-gutters-127 MuiListItem-button-128 MuiMenuItem-root-118" tabindex="-1" role="option" data-value="2">TNT<span class="MuiTouchRipple-root-333"></span></li>
    <li class="MuiButtonBase-root-55 MuiListItem-root-120 MuiListItem-default-123 MuiListItem-gutters-127 MuiListItem-button-128 MuiMenuItem-root-118" tabindex="-1" role="option" data-value="3">FEDEX<span class="MuiTouchRipple-root-333"></span></li>
    <li class="MuiButtonBase-root-55 MuiListItem-root-120 MuiListItem-default-123 MuiListItem-gutters-127 MuiListItem-button-128 MuiMenuItem-root-118" tabindex="-1" role="option" data-value="4">SKYNET<span class="MuiTouchRipple-root-333"></span></li>
    <li class="MuiButtonBase-root-55 MuiListItem-root-120 MuiListItem-default-123 MuiListItem-gutters-127 MuiListItem-button-128 MuiMenuItem-root-118" tabindex="-1" role="option" data-value="5">SCHENKER<span class="MuiTouchRipple-root-333"></span></li>
</ul>

Просто на экране показано, как это выглядит: https://imgur.com/a/J3MZW6F

Мои локаторы: 

    private static string categoryTypeFields = "//div[contains(@id,'category-type-row-'{0}'')]/div";
        private static string categoryTypeOptions = "//li[contains(@data-value,'{0}')]";
        private static readonly By categoryTypeOptionsListLocator = By.CssSelector("ul");
        private static readonly By categoryTypeOptionLocator = By.XPath("//li[@role ='option']");
        private static readonly By categoryFieldLocator = By.CssSelector("#category-row-0 > div");

Я хотел бы создать решение, которое можно использовать повторно. Все мои компоненты ввода выглядят одинаково на всей системе, в настоящее время я вынужден создавать десятки методов для каждого раскрывающегося списка (проверка / клик). Который: а) выглядит ужасно б) ужасно работает

Мне интересно, можно ли это сделать более зрелым способом? Я думал о функции «Выбрать» в Selenium, но мой DOM-код выглядит ужасно, и я не уверен, что его можно использовать с классом «Выбор». Можете ли вы дать мне какие-либо советы?

...