как выбрать имя класса из кнопки span, используя селектор css в приведенном ниже коде, и получили ошибку

Question

как выбрать имя класса из кнопки span, используя селектор css в приведенном ниже коде, следующим образом и получил ошибку.

<span class="input-group-btn-vertical">   
   <button class="btn btn-white bootstrap-touchspin-up " type="button">+</button>   
   <button class="btn btn-white bootstrap-touchspin-down " type="button">-</button>
</span>

this.demoTestBailrafting = function (browser) {
    browser
        .url('https://www.phptravels.net/')
        .waitForElementVisible('body', 500)
        .assert.title('PHPTRAVELS | Travel Technology Partner')

        /*trying to select first element in button tag of span class*/

        .click('span[class=input-group-btn-vertical]>button[1]')
        .pause(500)
        .end()
    };

ОШИБКА: невозможно найти элемент: "span [class =input-group-btn-vertical]> кнопка [1] "с помощью: селектор CSS

Answer 1

Предполагая, что вы хотите получить атрибут class с обеих кнопок ниже диапазона - не знаете, какой язык вы здесь используете. Но вы должны иметь возможность использовать функцию getAttribute для WebElement объекта.

List<IWebElement> buttons = driver.findElements(By.XPath("//span[@class='input-group-btn-vertical']/button"));

foreach(IWebElement button in buttons)
{
    // this is the class name
    string className = button.getAttribute("class");
}

Answer 2

Ваш метод клика

.click('span[class=input-group-btn-vertical]>button[1]')

, очевидно, ожидает селектор CSS на основании сообщения об ошибке

ERROR: Unable to locate element: "span[class=input-group-btn-vertical]>button[1]" using: css selector
                                                                                  ^^^^^^^^^^^^^^^^^^^

Индекс [1], который имеется в вашем селекторе CSS, не являетсядействительный. Это также не нужно здесь, так как вы ищете первый элемент, и Selenium всегда будет действовать на первый элемент, если вы не укажете иное. Кроме того, чтобы сделать ваш CSS-селектор более похожим на CSS (и более гибким), вы должны изменить его на

span.input-group-btn-vertical > button
    ^ this dot indicates a class name follows
                                      ^ I removed the [1] since it's not needed

Проверьте, работает ли он сейчас.