Выбор элемента Button с помощью webdriver-selenium в nodejs

Question

У меня есть html страница для отправки данных на сервер, мне нужно выбрать указанную c кнопку для автоматизации задания

   <div id="cdk-overlay-17" class="cdk-overlay-pane" style="max-width: position: static;">
    <div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c21-58 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-17" role="dialog" aria-labelledby="mat-dialog-title-17" style="transform: none;">
        <!---->
        <app-pin-dialog class="ng-star-inserted">
            <button class="modal-close-button" mat-dialog-close="" type="button" hidden="" title="name1" aria-label="Close dialog"></button>
            <h2 class="mat-dialog-title" mat-dialog-title="" id="mat-dialog-title-17">name2</h2>
            <mat-dialog-content class="mat-typography mat-dialog-content">
                <p class="description">name2</p>
                <div class="form">
                    <app-input form-name="code" has-content="" max-length="6" required="" type="password">
                        <!---->
                        <div class="form-group ng-pristine ng-invalid ng-star-inserted has-error ng-touched" style="">
                            <!---->
                            <div class="form-control ng-star-inserted">
                                <input type="password" name="code" placeholder="PIN" maxlength="6" class="ng-pristine ng-invalid ng-touched">
                            </div>
                            <!---->
                            <div class="form-error ng-star-inserted">
                                <!---->
                                <div class="ng-star-inserted">name3</div>
                                <!---->
                            </div>
                        </div>
                    </app-input>
                </div>
            </mat-dialog-content>
            <mat-dialog-actions align="center" class="mat-dialog-actions">
                <ul class="button-group">
                    <li>
                        <button class="btn btn-navy" mat-dialog-close="" type="button" aria-label="Close dialog">text1</button>
                    </li>
                    <li>
                        <button class="btn btn-blue" type="button">text2</button>
                    </li>
                </ul>
            </mat-dialog-actions>
        </app-pin-dialog>
    </mat-dialog-container>
    <div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    </div>

Я пытаюсь выбрать «text2» с селеном

      (await driver).findElement(By.className("cdk-overlay-pane btn btn-blue")).click();

, но это не удается:

      Unable to locate element: {"method":"css selector","selector":"cdk-overlay-pane btn btn-blue"} 

также попытался

 (await driver).findElement(By.className("btn btn-blue")).click();

снова не удалось. Как выбрать?

Answer 1

Root причина в том, что в источнике нет элемента с cdk-overlay-pane btn btn-blue. Вместо этого элемент с классом btn btn-blue находится в div с классом cdk-overlay-pane. Поэтому вы должны использовать By.css в этом случае, поскольку вы указываете на элемент с помощью css. используйте By.className только тогда, когда вы находите элемент с class элемента назначения.

Примечание: вы не должны явно заменить пробелы между классами в элементе class с . в качестве кода селена это позаботится об этом.

Пример:

findElement(By.className('btn.btn-blue')) - правильно

findElement(By.className('btn btn-blue')) - правильно

findElement(By.className('.btn.btn-blue')) - Неправильно (поскольку селен будет предшествовать . к имени класса, отправленному здесь)

Вот логика c, используемая селеном для справки.

static className(name) {
    let names = name.split(/\s+/g)
        .filter(s => s.length > 0)
        .map(s => escapeCss(s));
    return By.css('.' + names.join('.'));
  }

Источник SeleniumHQ

Итак, вы можете попробуйте следующее:

(await driver).findElement(By.css(".cdk-overlay-pane .btn.btn-blue")).click();

Снимок экрана: