Search code examples
htmlrubycss-selectorsselenium-webdriverweb-testing

CSS selector for div while using selenium webdriver and ruby


I have worked on CSS selectors to find an element while using selenium webdriver, but finding the element for below div seems to be difficult.

<div class="class1 class2" dd:btnfloatingstyle="top-right" dd:entitytexttype="resultval" id="_78891a36-3d75-432e-9906-760bd918e7cb" contenteditable="true"></div>

For finding an element using css selector I usually do:

$driver.find_elements(:css, 'div.classname')

But I have 2 class names in this case and I don't get the element back while I do:

   $driver.find_elements(:css, 'div.class1 class2') or
   $driver.find_elements(:css, 'div.class1 > div.class2') or
   $driver.find_elements(:css, 'div.class1 + div.class2')

Am I missing something or is there any other way I can find this element??


Solution

  • Try as below:

    $driver.find_elements(:css, 'div.class1.class2')
    

    Just to give a live example, I used the Ruby_on_Rails wikipedia link and wrote a code to access the below html table from the link mentioned.

    HTML

     <table class="wikitable sortable jquery-tablesorter" align="left">
     <caption>Version history</caption>
     <thead>
        <tr>
           <th class="headerSort" title="Sort ascending">Version</th>
    

    Ruby code

    require 'selenium-webdriver'
    
    driver = Selenium::WebDriver.for :firefox
    driver.navigate.to "http://en.wikipedia.org/wiki/Ruby_on_Rails"
    elem = driver.find_element(:css, 'table.wikitable.sortable.jquery-tablesorter')
    p elem.tag_name
    # => "table"
    p elem.find_element(:tag_name, 'caption').text
    # =>  "Version history"