处理button dropdown · webdriver-ruby

场景

button dropdown就是把按钮和下拉菜单弄到了一起。处理这种对象的思路一般是先点击这个按钮，等待下拉菜单显示出来，然后使用层级定位方法来获取下拉菜单中的具体项。

代码

下面的代码演示了如何找到watir-webdriver这个菜单项。其处理方法是先点击info按钮，然后等到下拉菜单出现后定位下拉菜单的ul元素，再定位ul元素中link text为watir-webdriver的link，并点击之。

button_dropdown.html

    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8" />
            <title>button group</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(){
                    $('.btn').click(function(){
                        alert($(this).text());
                    });
                });            
            </script>
        </head>
        <body>
            <h3>button group</h3>
            <div class="row-fluid">
                <div class="span3">        
                    <div class="well">
                        <div class="btn-toolbar">
                            <div class="btn-group">
                                <div class="btn">first</div>
                                <div class="btn">second</div>
                                <div class="btn">third</div>
                            </div>
                        </div>
                    </div>            
                </div>        
            </div>        
        </body>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </html>

button_dropdown.rb

    #encoding: utf-8
    require 'selenium-webdriver'

    dr = Selenium::WebDriver.for :chrome
    file_path = 'file:///' + File.expand_path(File.join('.', 'button_dropdown.html'))
    dr.get file_path

    # 定位text是watir-webdriver的下拉菜单
    # 首先显示下拉菜单
    dr.find_element(:link_text, 'Info').click()
    wait = Selenium::WebDriver::Wait.new(timeout: 10)
    wait.until { dr.find_element(:class, 'dropdown-menu').displayed? }

    # 通过ul再层级定位
    dr.find_element(:class, 'dropdown-menu').find_element(:link_text, 'watir-webdriver').click()
    sleep(1)

    dr.quit()