0

I am trying to click on the button that same classes. How can I click on both one by one.

I am using below python code for that

clk_but1 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]")))
driver.execute_script("arguments[0].click();", clk_but1)

clk_but2 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]")))
driver.execute_script("arguments[0].click();", clk_but2)

Following is the HTML code:

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
     style="display: block; top: 118px; left: auto; right: 0px;">
  <div class="ranges">
    <ul>
      <li data-range-key="Yesterday" class="">Yesterday</li>
      <li data-range-key="Last 7 Days">Last 7 Days</li>
      <li data-range-key="Last 30 Days">Last 30 Days</li>
      <li data-range-key="Last 45 Days">Last 45 Days</li>
      <li data-range-key="Last 60 Days">Last 60 Days</li>
      <li data-range-key="Last 90 Days">Last 90 Days</li>
      <li data-range-key="This Month">This Month</li>
      <li data-range-key="Last Month">Last Month</li>
      <li data-range-key="Custom Range" class="active">Custom Range</li>
    </ul>
    <div class="range_inputs">
     <button class="applyBtn btn btn-sm btn-red" type="button">Apply</button>
     <button class="cancelBtn btn btn-sm btn-gray" type="button">Cancel</button></div>
  </div>
  <div class="calendar left">
    <div class="daterangepicker_input">
      <input class="input-mini form-control active" type="text" name="daterangepicker_start" value="">
      <i class="fa fa-calendar glyphicon glyphicon-calendar"></i>
      <div class="calendar-time" style="display: none;">
        <div></div>
        <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
      </div>
    </div>
    <div class="calendar-table">
      <table class="table-condensed">
        <thead>
          <tr>
            <th class="prev available">
              <i class="fa fa-chevron-left glyphicon glyphicon-chevron-left"></i></th>
            <th colspan="5" class="month">May 2017</th>
            <th></th>
          </tr>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="weekend off available" data-title="r0c0">30</td>
            <td class="available" data-title="r0c1">1</td>
            <td class="available" data-title="r0c2">2</td>
            <td class="available" data-title="r0c3">3</td>
            <td class="available" data-title="r0c4">4</td>
            <td class="available" data-title="r0c5">5</td>
            <td class="weekend available" data-title="r0c6">6</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r1c0">7</td>
            <td class="available" data-title="r1c1">8</td>
            <td class="available" data-title="r1c2">9</td>
            <td class="available" data-title="r1c3">10</td>
            <td class="available" data-title="r1c4">11</td>
            <td class="available" data-title="r1c5">12</td>
            <td class="weekend available" data-title="r1c6">13</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r2c0">14</td>
            <td class="available" data-title="r2c1">15</td>
            <td class="available" data-title="r2c2">16</td>
            <td class="active start-date available" data-title="r2c3">17</td>
            <td class="in-range available" data-title="r2c4">18</td>
            <td class="in-range available" data-title="r2c5">19</td>
            <td class="weekend in-range available" data-title="r2c6">20</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r3c0">21</td>
            <td class="in-range available" data-title="r3c1">22</td>
            <td class="in-range available" data-title="r3c2">23</td>
            <td class="in-range available" data-title="r3c3">24</td>
            <td class="in-range available" data-title="r3c4">25</td>
            <td class="in-range available" data-title="r3c5">26</td>
            <td class="weekend in-range available" data-title="r3c6">27</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r4c0">28</td>
            <td class="in-range available" data-title="r4c1">29</td>
            <td class="in-range available" data-title="r4c2">30</td>
            <td class="in-range available" data-title="r4c3">31</td>
            <td class="off in-range available" data-title="r4c4">1</td>
            <td class="off in-range available" data-title="r4c5">2</td>
            <td class="weekend off in-range available" data-title="r4c6">3</td>
          </tr>
          <tr>
            <td class="weekend off in-range available" data-title="r5c0">4</td>
            <td class="off in-range available" data-title="r5c1">5</td>
            <td class="off in-range available" data-title="r5c2">6</td>
            <td class="off in-range available" data-title="r5c3">7</td>
            <td class="off in-range available" data-title="r5c4">8</td>
            <td class="off in-range available" data-title="r5c5">9</td>
            <td class="weekend off in-range available" data-title="r5c6">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="calendar right">
    <div class="daterangepicker_input">
      <input class="input-mini form-control" type="text" name="daterangepicker_end" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i>
      <div class="calendar-time" style="display: none;">
        <div></div>
        <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
      </div>
    </div>
    <div class="calendar-table">
      <table class="table-condensed">
        <thead>
          <tr>
            <th></th>
            <th colspan="5" class="month">Jun 2017</th>
            <th class="next available"><i class="fa fa-chevron-right glyphicon glyphicon-chevron-right"></i></th>
          </tr>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="weekend off in-range available" data-title="r0c0">28</td>
            <td class="off in-range available" data-title="r0c1">29</td>
            <td class="off in-range available" data-title="r0c2">30</td>
            <td class="off in-range available" data-title="r0c3">31</td>
            <td class="in-range available" data-title="r0c4">1</td>
            <td class="in-range available" data-title="r0c5">2</td>
            <td class="weekend in-range available" data-title="r0c6">3</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r1c0">4</td>
            <td class="in-range available" data-title="r1c1">5</td>
            <td class="in-range available" data-title="r1c2">6</td>
            <td class="in-range available" data-title="r1c3">7</td>
            <td class="in-range available" data-title="r1c4">8</td>
            <td class="in-range available" data-title="r1c5">9</td>
            <td class="weekend in-range available" data-title="r1c6">10</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r2c0">11</td>
            <td class="in-range available" data-title="r2c1">12</td>
            <td class="active end-date in-range available" data-title="r2c2">13</td>
            <td class="available" data-title="r2c3">14</td>
            <td class="available" data-title="r2c4">15</td>
            <td class="available" data-title="r2c5">16</td>
            <td class="weekend available" data-title="r2c6">17</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r3c0">18</td>
            <td class="available" data-title="r3c1">19</td>
            <td class="available" data-title="r3c2">20</td>
            <td class="available" data-title="r3c3">21</td>
            <td class="available" data-title="r3c4">22</td>
            <td class="available" data-title="r3c5">23</td>
            <td class="weekend available" data-title="r3c6">24</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r4c0">25</td>
            <td class="available" data-title="r4c1">26</td>
            <td class="available" data-title="r4c2">27</td>
            <td class="available" data-title="r4c3">28</td>
            <td class="available" data-title="r4c4">29</td>
            <td class="available" data-title="r4c5">30</td>
            <td class="weekend off available" data-title="r4c6">1</td>
          </tr>
          <tr>
            <td class="weekend off available" data-title="r5c0">2</td>
            <td class="off available" data-title="r5c1">3</td>
            <td class="off available" data-title="r5c2">4</td>
            <td class="off available" data-title="r5c3">5</td>
            <td class="off available" data-title="r5c4">6</td>
            <td class="off available" data-title="r5c5">7</td>
            <td class="weekend off available" data-title="r5c6">8</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="daterangepicker dropdown-menu ltr opensright show-calendar" style="display: none; top: 118px; left: auto; right: 0px;">
  <div class="ranges">
    <ul>
      <li data-range-key="Yesterday" class="">Yesterday</li>
      <li data-range-key="Last 7 Days">Last 7 Days</li>
      <li data-range-key="Last 30 Days">Last 30 Days</li>
      <li data-range-key="Last 45 Days">Last 45 Days</li>
      <li data-range-key="Last 60 Days">Last 60 Days</li>
      <li data-range-key="Last 90 Days">Last 90 Days</li>
      <li data-range-key="This Month">This Month</li>
      <li data-range-key="Last Month">Last Month</li>
      <li data-range-key="Custom Range" class="active">Custom Range</li>
    </ul>
    <div class="range_inputs">
      <button class="applyBtn btn btn-sm btn-red" type="button">Apply</button>
      <button class="cancelBtn btn btn-sm btn-gray" type="button">Cancel</button></div>
  </div>
  <div class="calendar left">
    <div class="daterangepicker_input">
      <input class="input-mini form-control active" type="text" name="daterangepicker_start" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i>
      <div class="calendar-time" style="display: none;">
        <div></div>
        <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
      </div>
    </div>
    <div class="calendar-table">
      <table class="table-condensed">
        <thead>
          <tr>
            <th class="prev available"><i class="fa fa-chevron-left glyphicon glyphicon-chevron-left"></i></th>
            <th colspan="5" class="month">May 2017</th>
            <th></th>
          </tr>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="weekend off available" data-title="r0c0">30</td>
            <td class="available" data-title="r0c1">1</td>
            <td class="available" data-title="r0c2">2</td>
            <td class="available" data-title="r0c3">3</td>
            <td class="available" data-title="r0c4">4</td>
            <td class="available" data-title="r0c5">5</td>
            <td class="weekend available" data-title="r0c6">6</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r1c0">7</td>
            <td class="available" data-title="r1c1">8</td>
            <td class="available" data-title="r1c2">9</td>
            <td class="available" data-title="r1c3">10</td>
            <td class="available" data-title="r1c4">11</td>
            <td class="available" data-title="r1c5">12</td>
            <td class="weekend available" data-title="r1c6">13</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r2c0">14</td>
            <td class="active start-date available" data-title="r2c1">15</td>
            <td class="in-range available" data-title="r2c2">16</td>
            <td class="in-range available" data-title="r2c3">17</td>
            <td class="in-range available" data-title="r2c4">18</td>
            <td class="in-range available" data-title="r2c5">19</td>
            <td class="weekend in-range available" data-title="r2c6">20</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r3c0">21</td>
            <td class="in-range available" data-title="r3c1">22</td>
            <td class="in-range available" data-title="r3c2">23</td>
            <td class="in-range available" data-title="r3c3">24</td>
            <td class="in-range available" data-title="r3c4">25</td>
            <td class="in-range available" data-title="r3c5">26</td>
            <td class="weekend in-range available" data-title="r3c6">27</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r4c0">28</td>
            <td class="in-range available" data-title="r4c1">29</td>
            <td class="in-range available" data-title="r4c2">30</td>
            <td class="in-range available" data-title="r4c3">31</td>
            <td class="off in-range available" data-title="r4c4">1</td>
            <td class="off in-range available" data-title="r4c5">2</td>
            <td class="weekend off in-range available" data-title="r4c6">3</td>
          </tr>
          <tr>
            <td class="weekend off in-range available" data-title="r5c0">4</td>
            <td class="off in-range available" data-title="r5c1">5</td>
            <td class="off in-range available" data-title="r5c2">6</td>
            <td class="off in-range available" data-title="r5c3">7</td>
            <td class="off in-range available" data-title="r5c4">8</td>
            <td class="off in-range available" data-title="r5c5">9</td>
            <td class="weekend off in-range available" data-title="r5c6">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="calendar right">
    <div class="daterangepicker_input">
      <input class="input-mini form-control" type="text" name="daterangepicker_end" value=""><i class="fa fa-calendar glyphicon glyphicon-calendar"></i>
      <div class="calendar-time" style="display: none;">
        <div></div>
        <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
      </div>
    </div>
    <div class="calendar-table">
      <table class="table-condensed">
        <thead>
          <tr>
            <th></th>
            <th colspan="5" class="month">Jun 2017</th>
            <th class="next available"><i class="fa fa-chevron-right glyphicon glyphicon-chevron-right"></i></th>
          </tr>
          <tr>
            <th>Su</th>
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="weekend off in-range available" data-title="r0c0">28</td>
            <td class="off in-range available" data-title="r0c1">29</td>
            <td class="off in-range available" data-title="r0c2">30</td>
            <td class="off in-range available" data-title="r0c3">31</td>
            <td class="in-range available" data-title="r0c4">1</td>
            <td class="in-range available" data-title="r0c5">2</td>
            <td class="weekend in-range available" data-title="r0c6">3</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r1c0">4</td>
            <td class="in-range available" data-title="r1c1">5</td>
            <td class="in-range available" data-title="r1c2">6</td>
            <td class="in-range available" data-title="r1c3">7</td>
            <td class="in-range available" data-title="r1c4">8</td>
            <td class="in-range available" data-title="r1c5">9</td>
            <td class="weekend in-range available" data-title="r1c6">10</td>
          </tr>
          <tr>
            <td class="weekend in-range available" data-title="r2c0">11</td>
            <td class="in-range available" data-title="r2c1">12</td>
            <td class="in-range available" data-title="r2c2">13</td>
            <td class="in-range available" data-title="r2c3">14</td>
            <td class="in-range available" data-title="r2c4">15</td>
            <td class="in-range available" data-title="r2c5">16</td>
            <td class="weekend in-range available" data-title="r2c6">17</td>
          </tr>
          <tr>
            <td class="weekend active end-date in-range available" data-title="r3c0">18</td>
            <td class="available" data-title="r3c1">19</td>
            <td class="available" data-title="r3c2">20</td>
            <td class="available" data-title="r3c3">21</td>
            <td class="available" data-title="r3c4">22</td>
            <td class="available" data-title="r3c5">23</td>
            <td class="weekend available" data-title="r3c6">24</td>
          </tr>
          <tr>
            <td class="weekend available" data-title="r4c0">25</td>
            <td class="available" data-title="r4c1">26</td>
            <td class="available" data-title="r4c2">27</td>
            <td class="available" data-title="r4c3">28</td>
            <td class="available" data-title="r4c4">29</td>
            <td class="available" data-title="r4c5">30</td>
            <td class="weekend off available" data-title="r4c6">1</td>
          </tr>
          <tr>
            <td class="weekend off available" data-title="r5c0">2</td>
            <td class="off available" data-title="r5c1">3</td>
            <td class="off available" data-title="r5c2">4</td>
            <td class="off available" data-title="r5c3">5</td>
            <td class="off available" data-title="r5c4">6</td>
            <td class="off available" data-title="r5c5">7</td>
            <td class="weekend off available" data-title="r5c6">8</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
yong
  • 13,357
  • 1
  • 16
  • 27
Usman_Ahmed
  • 67
  • 1
  • 9

2 Answers2

1

It is better that you use find_elements_by_css_selector because there is a big chance xpath changes. Therefore, its difficult to maintain codes. And then loop over the elements.

elements = driver.find_elements_by_css_selector("button.daterangepicker")

for element in elements:
   element.click();

update

stackoverflow - Nilesh has argued well why you should go for SSS-selector.

mahan
  • 12,366
  • 5
  • 48
  • 83
1

There are two same block: <div class="daterangepicker. But one is visible, another is invisible. Therefor you can only click the button in the visible block.

The visible block set style display: block

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
     style="display: block; top: 118px; left: auto; right: 0px;">

The invisible block set style display: none

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
    style="display: none; top: 118px; left: auto; right: 0px;">

You can firstly find the visible block, then find the button inside the block.

div.daterangepicker:not([style*='display: none']) // can find the visible block

driver.find_element_by_css_selector(
   "div.daterangepicker:not([style*='display: none']) .applyBtn"
).click()
yong
  • 13,357
  • 1
  • 16
  • 27