Как установить флажок с помощью Selenium WebDriver и C #

Question

То, что я пытаюсь сделать, это нажать (или выключить) любой из флажков на моей странице. Как вы можете видеть из HTML, каждый элемент флажка будет иметь уникальный идентификатор, но когда я пытаюсь щелкнуть по нему, я получаю исключение «Элемент не найден». Я перепробовал все стандартные локаторы (тоже нет iframe) - я могу найти элемент checkbox, но я просто не могу щелкнуть по нему.

Пожалуйста, просмотрите следующий HTML:

<div class="form-horizontal">
    <div class="row">
        <div class="col-sm-3">
            <label for="Url_option1">Option 1</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option1" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_url_option1" name="Url.url_option1" type="hidden" value="no"> &nbsp;
        </div>
        <div class="col-sm-3">
            <label for="Url_option2">Option 2</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option2" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_translation_c" name="Url.option2" type="hidden" value="no"> &nbsp;
        </div>
        <div class="col-sm-3">
            <label for="Url_option3">Option 3</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option3" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_option3" name="Url.option3" type="hidden" value="no"> &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <label for="Url_option4">Option 4</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option4" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_option4" name="Url.option4" type="hidden" value="no"> &nbsp;
        </div>
        <div class="col-sm-3">
            <label for="Url_option5">Option 5</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_option5" name="Url.option5" type="hidden" value="no"> &nbsp;
        </div>
        <div class="col-sm-3">
            <label for="Url_option6">Option 6</label>
        </div>
        <div class="col-sm-1">
            <input type="checkbox" data-yesno-name="Url_option6" class="url-field-toggle">
            <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
            <input id="Url_option6" name="Url.option6" type="hidden" value="no"> &nbsp;
        </div>
    </div>
</div>

Единственный способ, которым я могу нажать на любой из элементов флажка, - найти следующий элемент:

<span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>

Использование локатора XPath:

i.e //*[@id="toggle_undefined"]

В этом случае вызывается событие click, но оно, очевидно, будет щелкать только первый элемент (или флажок в этом случае) на странице (у меня более 20 флажков на странице).

На основании приведенного выше HTML-кода, допустим, я хотел включить второй элемент флажка во второй строке. Вот код для этого элемента флажка:

<div class="col-sm-3">
    <label for="Url_option5">Option 5</label>
</div>
<div class="col-sm-1">
    <input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle">
    <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
    <input id="Url_option5" name="Url.option5" type="hidden" value="no"> &nbsp;
</div>

Основываясь на информации выше, я могу только установить флажок, найдя и нажав на следующий элемент:

<span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>

Как я должен создать уникальный локатор XPath для этого элемента, который я мог бы использовать, чтобы щелкнуть по любому из флажков на моей странице?

c# selenium-webdriver

1

Banjaxx 21 Авг 2018 в 19:33

Answer 1

Так как вам нужно нажать на SPAN, например,

<span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>

И на нем нет уникальных идентификаторов / атрибутов, нам нужно найти правильный, используя один из окружающих элементов.

Вероятно, я бы использовал поиск SPAN по относительной метке, например,

<label for="Url_option1">Option 1</label>

Вы можете использовать XPath как

//label[.='Option 3']//following::span[@id='toggle_undefined']

То, что это делает, находит LABEL, который содержит желаемую строку, «Option 3», а затем находит первый SPAN, который следует с идентификатором «toggle_undefined».

Если бы это был я, я бы обернул это в функцию и передал бы имя опции, которую я хотел щелкнуть, например

public void Toggle(string optionName)
{
    Driver.Value.FindElement(By.XPath($"//label[.='{optionName}']//following::span[@id='toggle_undefined']")).Click();
}

И назовите это как

Toggle("Option 3");

1

JeffC 22 Авг 2018 в 13:58

Answer 2

Чтобы получить ввод с флажком типа просто используйте css селектор ниже.

Элемент:

<input type="checkbox" data-yesno-name="Url_Transaction_Out" class="url-field-toggle" style="" checked="checked"><span class="glyphicon clickable glyphicon-ok" id="toggle_undefined">

Css Selector:

input[data-yesno-name='Url_Transaction_Out']

Код:

driver.FindElement(By.CssSelector("input[data-yesno-name='Url_Transaction_Out']")).Click();

Для проверки и выбора:

IWebElement checkbox = driver.FindElement(By.CssSelector("input[data-yesno-name='Url_Transaction_Out']"));
if(!checkbox.IsSelected())
{
    checkbox.Click();
}

1

Sers 21 Авг 2018 в 17:29

Answer 3

Для этого используйте следующий CSS-селектор:

.url-field-toggle[data-yesno-name='Url_Transaction_Out']

Код:

driver.FindElement(By.CssSelector("url-field-toggle[data-yesno-name='Url_Transaction_Out']")).Click();

Надеюсь, это вам поможет!

1

Ratmir Asanov 22 Янв 2019 в 10:01

Answer 4

В соответствии с HTML , которым вы поделились, чтобы вызвать click() на желаемом флажке , вы можете использовать любое из следующих решений:

CssSelector :

driver.FindElement(By.CssSelector("label[for=Url_Transaction_Out]")).Click();

XPath :

driver.FindElement(By.XPath("//label[@for='Url_Transaction_Out']")).Click();

1

DebanjanB 22 Авг 2018 в 07:44

Как установить флажок с помощью Selenium WebDriver и C #

4 ответа

Новые вопросы

c#