javascript - 在nodejs中使用webdriver-selenium选择按钮元素

Question

我有一个用于将数据发布到服务器的 html 页面，我需要选择特定按钮来自动化作业

   <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>

我正在尝试使用 Selenium 选择“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

根本原因是源中不存在具有 cdk-overlay-pane btn btn-blue 的元素。相反，具有 btn btn-blue 类的元素位于具有 cdk-overlay-pane 类的 div 中。因此，在这种情况下，您必须使用 By.css，因为您使用 css 指向该元素。仅当您使用目标元素的 class 定位元素时，请使用 By.className。

注意: 您不必必须用 . 显式替换元素 class 中类之间的空格，因为 selenium 代码会处理此问题。

例如:

findElement(By.className('btn.btn-blue')) - 正确

findElement(By.className('btn btn-blue')) - 正确

findElement(By.className('.btn.btn-blue')) - 错误(因为 selenium 会将 . 添加到此处发送的 className)

这里是selenium使用的逻辑，供大家引用。

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();

屏幕截图: