Swa
Swa

Reputation: 193

How to define xpath of button having more than one classes in selenium webdriver

There are two buttons on HTML pop up have almost similar. Both buttons are same except for the span text nothing is different.

Can anyone please suggest, how to write the xpath of OK button?

I have wrote below xpath but system showing error as '.

My Xpath

driver.findElement(By.xpath("//div[@class='ui-dialog-buttonset']/descendant::button[@class='ui-button']/span[contains(@class, 'ui-button-text') and text() = 'OK']")).click();

Error

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element:    

Here is My HTML code of pop up:

HTML

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" style="height: auto; width: 350px; top: 295.5px; left: 621px; display: block; z-index: 102;" tabindex="-1" role="dialog" aria-describedby="DivExtension" aria-labelledby="ui-id-2">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle">
         <span id="ui-id-2" class="ui-dialog-title">内線番号</span>
         <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" type="button" role="button" title="Close">
              <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
              <span class="ui-button-text">Close</span>
         </button>
     </div>

     <div id="DivExtension" class="display-none ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 68px;">
          <div id="extRow" class="display-none" style="display: block;">
                <p class="form-label">
                     <label for="extension">内線番号</label>
                </p>
                <p class="form-input">
                     <input id="Extension" class="text" type="text" placeholder="Extension" value="">
                </p>
          </div>
    </div>

    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
         <div class="ui-dialog-buttonset">
               <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" style="height: 34px; width: 104px;" role="button">
                     <span class="ui-button-text">OK</span>
               </button>

              <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" style="height: 34px; width: 124px;" role="button">
                     <span class="ui-button-text">キヤンセル</span>
              </button>
        </div>
    </div>

Upvotes: 2

Views: 9377

Answers (2)

lauda
lauda

Reputation: 4173

Depending if you have multiple buttons on the page with the text OK.

If you want use multiple condition you can also use something like
//*[condition_1][condition_2]

In this case:

//span[@class='ui-button-text'][text()='OK']

or for the button:

//button[@class='ui-button'][.//span[contains(text(), 'OK')]]

For multiple classes example:

//button[@class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only']

or as you use it with contains. Note: Make sure you are waiting for the element if needed.

For an element with multiple classes you have 2 options:

  1. use @class='my_class' this mean to use the entire value of attribute class => my_class will be all classes, the entire string

  2. use contains(@class, 'my_class') this option allows you to use just a part of the class attribute value => my_class could be any part of the string: ui, button, ui-button etc.

In your case, you used button[@class='ui-button'] which is not correct since the button has class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only".

Upvotes: 3

silpa acharya
silpa acharya

Reputation: 1

Check these two xpath's for ok button

//button/span[contains(text(),'OK')]

OR

//div[@class='ui-dialog-buttonset']/button/span[contains(text(),'OK')]

Upvotes: 0

Related Questions