Ruby Selenium Web Drive: How to find specific elem

Question

I have a below html which am trying to test using ruby selenium web driver

<div class="container-fluid container-results">
    <div class="result-row" id="0">
        <ul>
            <li class="process-status-column upload-success-icon">
                <svg class="glyphicon-upload-green" viewBox="0 0 100 100">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#doc_upload"></use>
                </svg>
            </li>
            <li class="file-label-column"><span>validated.txt</span></li>
            <li class="client-company-column"><span>test-client</span></li>
            <li class="reference-column"><span>Ref001</span></li>
        </ul>
    </div>
    <div class="result-row" id="1">
        <ul>
            <li class="process-status-column upload-error-icon">
                <svg class="glyphicon-exclamation" viewBox="0 0 100 100">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#exclamation"></use>
                </svg>
            </li>
            <li class="file-label-column"><span>Error.txt</span>
                <div class="attachment-row">This invoice contains an error</div>
            </li>
            <li class="client-company-column"><span>test-client</span></li>
            <li class="reference-column"><span>Ref002</span></li>            
        </ul>
    </div>   
    <div class="result-row" id="2">
        <ul>
            <li class="process-status-column upload-pending-icon">
                <svg class="glyphicon-spin" viewBox="0 0 100 100">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#refresh"></use>
                </svg>
            </li>
            <li class="file-label-column"><span>Pending.txt</span></li>
            <li class="client-company-column"></li>
            <li class="reference-column"></li>            
        </ul>
    </div>
</div>

I am trying to find the svg element of any given div id as below in Ruby using selenium web driver

    rows = driver.find_elements(:css => "div.container-fluid.container-results >div\##{row_number.to_i-1} >ul >li >a >svg")

But I am getting below exception when am running the script with row number 1

    invalid selector: An invalid or illegal selector was specified
  (Session info: chrome=57.0.2987.133)
  (Driver info: chromedriver=2.28.455520 (cc17746adff54984afff480136733114c6b3704b),platform=Windows NT 6.1.7601 SP1 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 25 milliseconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/invalid_selector_exception.html

Driver info: org.openqa.selenium.chrome.ChromeDriver

*** Element info: {Using=css selector, value=div.container-fluid.container-results >div#0 >ul >li >a >svg} (org.openqa.selenium.InvalidSelectorException)
[remote server] sun.reflect.GeneratedConstructorAccessor17():-1:in `newInstance'
[remote server] sun.reflect.DelegatingConstructorAccessorImpl():-1:in `newInstance'
[remote server] java.lang.reflect.Constructor():-1:in `newInstance'
[remote server] org.openqa.selenium.remote.ErrorHandler(ErrorHandler.java):206:in `createThrowable'
[remote server] org.openqa.selenium.remote.ErrorHandler(ErrorHandler.java):158:in `throwIfResponseFailed'
[remote server] org.openqa.selenium.remote.RemoteWebDriver(RemoteWebDriver.java):678:in `execute'
[remote server] org.openqa.selenium.remote.RemoteWebDriver(RemoteWebDriver.java):388:in `findElements'
[remote server] org.openqa.selenium.remote.RemoteWebDriver(RemoteWebDriver.java):496:in `findElementsByCssSelector'
[remote server] org.openqa.selenium.By$ByCssSelector(By.java):441:in `findElements'
[remote server] org.openqa.selenium.remote.RemoteWebDriver(RemoteWebDriver.java):351:in `findElements'
[remote server] sun.reflect.GeneratedMethodAccessor19():-1:in `invoke'
[remote server] sun.reflect.DelegatingMethodAccessorImpl():-1:in `invoke'
[remote server] java.lang.reflect.Method():-1:in `invoke'
[remote server] org.openqa.selenium.support.events.EventFiringWebDriver$2(EventFiringWebDriver.java):103:in `invoke'
[remote server] com.sun.proxy.$Proxy1():-1:in `findElements'
[remote server] org.openqa.selenium.support.events.EventFiringWebDriver(EventFiringWebDriver.java):177:in `findElements'
[remote server] org.openqa.selenium.remote.server.handler.FindElements(FindElements.java):50:in `call'
[remote server] org.openqa.selenium.remote.server.handler.FindElements(FindElements.java):1:in `call'
[remote server] java.util.concurrent.FutureTask():-1:in `run'
[remote server] org.openqa.selenium.remote.server.DefaultSession$1(DefaultSession.java):176:in `run'
[remote server] java.util.concurrent.ThreadPoolExecutor():-1:in `runWorker'
[remote server] java.util.concurrent.ThreadPoolExecutor$Worker():-1:in `run'
[remote server] java.lang.Thread():-1:in `run'

If I try running $("div.container-fluid.container-results >div#0 >ul >li >a >svg") in my browser console I do see the svg elements but its not working from Ruby, can someone please help me with this?

Answer 1

According to the Selenium documentation :css is not a valid selector for find_elements.

It specified :class, :class_name, :id, :link_text, :link, :partial_link_text, :name, :tag_name, :xpath to be valid selectors.

The :css selector do still work in many situations, however it does not always work as you would expect. For example would div.container-fluid.container-results > div#0 be invalid for selenium, even tho it is valid for the browsers.

You could use xpath or some of the other selectors to get the svg.

If you want to use the css selector to find it, you could use nokogiri, here is an example:

selenium_driver = Selenium::WebDriver.for :chrome
selenium_driver.get("http://stackoverflow.com/")

# do whatever with selenium

doc = Nokogiri::HTML(selenium_driver.page_source)
doc.css("div.container-fluid.container-results >div##{row_number.to_i-1} >ul >li >a >svg")

Answer 2

You are specifying a lot of levels in the CSS selector. From the HTML you posted, it doesn't look like you need them all. Using > in a CSS selector specifies a child where using a space signifies any descendant. Any SVG descendant of the DIV should work. You should be able to use just this

rows = driver.find_elements(:css => "div.container-fluid.container-results svg")

Answer 3

I am trying to find the svg element of any given div id

If this is what you want, you can try this one:

driver.find_element(:id => "the_given_id").find_elements(:tag_name => "svg")