Selecting Button element with webdriver-selenium in nodejs

Question

I have an html page for posting data to server, i need to select specific button for automating job

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

I am trying to select "text2" with selenium

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

but it fails:

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

also tried

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

failed again. How should i select ?

supputuri · Accepted Answer · 2020-03-28 21:14:38Z

1

Root cause is there is not element that have the cdk-overlay-pane btn btn-blue in the source. Instead element with btn btn-blue class is in the div with cdk-overlay-pane class. So you have to use By.css in this case as you are pointing to the element using css. please use the By.className only when you are locating the element with class of destination element.

Note: you don't have to explicitly replace the white spaces between classes in the element class with . as the selenium code it take care of this.

Ex:

findElement(By.className('btn.btn-blue')) - correct

findElement(By.className('btn btn-blue')) - correct

findElement(By.className('.btn.btn-blue')) - Wrong (as selenium will prepend . to the className sent here)

Here is the logic used by selenium for your reference.

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

Source SeleniumHQ

So, you can try with the below.

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

Screenshot:

edited Mar 28, 2020 at 21:14

answered Mar 28, 2020 at 20:34

supputuri

14.2k2 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

trmt Over a year ago

it failed also like { "cdk-overlay-pane\.btn\.btn-blue" }

supputuri Over a year ago

Please check the updated answer. If still if you are getting NoSuchElement Exception please check if the element is wrapped in iframe.

supputuri Over a year ago

@trmt please find the detailed explanation in the updated answer. Let me know if you still have any questions.

Collectives™ on Stack Overflow

Selecting Button element with webdriver-selenium in nodejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related