• Selenium 網頁元件定位的基礎 (Python程式範例)

    Image result for selenium login

    這篇文章主要以一個登入頁面說明 Selenium幾種網頁元件定位的方式

    ID, Name, ClassName, Tag , LinkText, CSS, Xpath 等

    當每個網頁元件被選取到的時候, 就用黃色框框閃爍,

    最後會舉一個Python完整範例示範說明

    測試情境

    simple Login Form

     

     

    HTML範例

    <html>
        <head>
          <meta http-equiv="content-type" content="text/html;charset=utf-8" />
          <title>Form</title>
          <script type="text/javascript" async="" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
          <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
          <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        </head>
        <body>
          <h3>simple login form</h3>
          <form class="form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputEmail">Email</label>
              <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email" name="email">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password" name="password">
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
                <a href="#">register</a>
              </div>
            </div>
          </form>
        </body>
      </html>

    Python程式範例

    from selenium import webdriver
    from time import sleep
    import os
    
    dr = webdriver.Chrome()
    file_path = 'file:///' + os.path.abspath('form.html')
    print file_path
    
    dr.get(file_path)
    
    # by id
    dr.find_element_by_id('inputEmail').click()
    dr.find_element_by_id('inputEmail').send_keys("myEmail@email.com")
    
    # by name
    dr.find_element_by_name('password').click()
    dr.find_element_by_name('password').send_keys("MyPassword")
    
    # by tagname
    print dr.find_element_by_tag_name('form').get_attribute('class')
    
    # by class_name
    e = dr.find_element_by_class_name('controls')
    dr.execute_script('$(arguments[0]).fadeOut().fadeIn()', e)
    dr.execute_script('arguments[0].setAttribute("style", "color: yellow; border: 2px solid yellow;")', e)
    sleep(1)
    
    # by link text
    link = dr.find_element_by_link_text('register')
    dr.execute_script('$(arguments[0]).fadeOut().fadeIn()', link)
    dr.execute_script('arguments[0].setAttribute("style", "color: yellow; border: 2px solid yellow;")', link)
    sleep(1)
    
    # by partial link text
    link = dr.find_element_by_partial_link_text('regist')
    dr.execute_script('$(arguments[0]).fadeOut().fadeIn()', link)
    dr.execute_script('arguments[0].setAttribute("style", "color: red; border: 2px solid red;")', link)
    sleep(1)
    
    
    # by css selector
    div = dr.find_element_by_css_selector('.controls')
    dr.execute_script('$(arguments[0]).fadeOut().fadeIn()', div)
    dr.execute_script('arguments[0].setAttribute("style", "color: yellow; border: 2px solid yellow;")', div)
    sleep(1)
    
    # by xpath
    dr.find_element_by_xpath('/html/body/form/div[3]/div/label/input').click()
    
    sleep(2)
    dr.quit()

     

     

     

     

     

  • Selenium 如何對於分頁索引進行操作 (Python程式完整範例)

    這篇文章主要說明如何針對 Pagenation進行操作

    我們將舉一個實際的例子分頁的網頁元件, 並且利用 Python對該分頁網頁元件進行操作

    例如: 點選 第四頁, 點選下一頁, 計算全部總頁數等

    讀者可以利用這個範例自行延伸修改學習

    分頁網頁元件

    相關 HTML  如下

    <div class="span6">
                        <div class="pagination pagination-large">
                            <ul>
                                <li><a href="#">Prev</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                            </ul>
                        </div>
                    </div>

    要對於分頁的網頁元件操作, 我們主要利用幾個小技巧

    技巧1: 透過顯示文字來點選

    例如要點選第四頁

    dr.find_element_by_xpath("//a[contains(.,'4')]").click()
    
    例如要點選 Next
    dr.find_element_by_xpath("//a[contains(.,'Next')]").click()
    
    

    技巧2: 計算總頁數

    我們主要透過計算 <li>的個數來看全部有多少頁, 當然要扣掉頭尾就是全部的總頁數

    total_pages = len(dr.find_element_by_class_name(‘span6‘).find_elements_by_tag_name(‘li‘))-2

    另外一個方法是計算全部 <a>的個數

     len(driver.find_elements_by_tag_name('a')) - 2

     

    技巧3: 目前所在頁數

    這邊我們主要透過一個特別的 class_name動態的得知當下所在第幾頁

    find_element_by_class_name(‘active‘).text

    Python 完整程式碼

    #coding=utf-8
    from time import sleep
    from selenium import webdriver
    import os
    
    ## 讀取並開啟 PAgination.html
    file_path = 'file:///'+os.path.abspath('pagination.html')
    driver = webdriver.Chrome()
    driver.get(file_path)
    
    # 全部的頁數 - 利用計算 <li> 個數
    total_pages = len(driver.find_element_by_class_name('span6').find_elements_by_tag_name('li')) - 2
    print 'total page is :%s' %total_pages
    
    # 全部的頁數 - 利用計算 <a> 個數
    total_page = len(driver.find_elements_by_tag_name('a')) - 2
    print 'method 2:total_pages is %d' % total_page
    
    # 點選 Next 之後 點選 '4'
    driver.find_element_by_xpath("//a[contains(.,'Next')]").click()
    driver.find_element_by_xpath("//a[contains(.,'4')]").click()
    
     # 印出目前在第幾頁
    current_page = driver.find_element_by_class_name('span6').find_element_by_class_name('active').text
    print 'current page is %s' %current_page
    sleep(5)
    driver.quit()

    HTML  分頁範例

    <html>
            <head>
                <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                <title>Pagination</title>
                <script type="text/javascript" async="" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('.pagination').find('li').click(function(){
                            $(this).parent().find('li').removeClass('active');
                            $(this).addClass('active');
                        });
                    });
                </script>
            </head>
    
            <body>
                <h3>Pagination</h3>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="pagination pagination-large">
                            <ul>
                                <li><a href="#">Prev</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </body>
            <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        </html>

     

     

     

     

    Tags:

  • Selenium如何處理CheckBox (Python篇)

    Selenium Python 網站自動化測試教學,

    這篇文章主要用 Python  程式範例說明 Selenium如何處理 CheckBox

    我們舉三個常見的情境並提供範例程式, 讀者可以根據實際情境加以調整.

     

    情境 1: 將所有的 CheckBox  全部勾選

    這裡我們用一個小技巧 input[type=checkbox], 利用這個方式將所有的 CheckBox選取

    driver.get("http://www.xxxx.com/")
    
    checkboxs=dr.find_elements_by_css_selector('input[type=checkbox]')
    for checkbox in checkboxs:
    	checkbox.click()
    
    
    sleep(1)
    driver.refresh()

     

    情境 2: 計算頁面所有的 CheckBox數量

    藉由 len函數的幫忙, 我們可以計算出所有被選取到的 CheckBox數量

    print len(driver.find_elements_by_css_selector(input[type=checkbox]))

    情境3: 特定 CheckBox的點選

    driver.find_element_by_css_selector(input[TEXT=myCheckBox]).click()

    注意到我們使用 element 與 elements 的差異嗎

    elements 回傳所有找到的checkBox, element是針對特定選取到的CheckBox  進行操作

    完整程式範例

    from selenium import webdriver
    from time import sleep
    import os
    
    dr=webdriver.Chrome()
    
    dr.get("www.xxxx.com")
    
    # 將目前所有的CheckBox選取
    checkboxs=dr.find_elements_by_css_selector('input[type=checkbox]')
    for checkbox in checkboxs:
    	checkbox.click()
    
    dr.refresh()
    
    
    # 將目前所有的CheckBox數量印出
    print len(dr.find_elements_by_css_selector('input[type=checkbox]'))
    
    

     

    Tags: ,

Newsletter

About Me/Blog

He has over 15+ years experiences in Software industry. Experienced with DM, QM and project manager roles to deliver Enterprise, consumer/mobile and hosted cloud solution. He is invited for speech or engineering best practice Training for the following area: 1. SCRUM/Agile Management 2. Web Performance Testing / JMeter 3. Malware Analysis 4. Web Security Testing 5. MS SQL Performance Testing 6. Network Forensic/troubleshooting by WireShark
August 2016
M T W T F S S
« Jul    
1234567
891011121314
15161718192021
22232425262728
293031  

newest guests

Testing Events

    No events