Ruby code to display table element details

Question

I have a HTML which displays the Product Details in the following way:

<div class="column">
    <h3 class="hidden-xs">Product Details</h3>
    <table class="table table-striped">
        <tbody>
            <tr class="header-row hidden-xs">
                <th>Product</th>
                <th>Duration</th>
                <th>Unit Price</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>google.com</td>
                <td>1 Year</td>
                <td class="hidden-xs">$5</td>
                <td>$5</td>
            </tr>
        </tbody>
    </table>
  <div class="totals text-right">
    <p>Subtotal: $5</p>
    <p>Total: $5</p>
  </div>
</div>

Ruby code is given below:

require 'watir'

browser = Watir::Browser.new(:chrome)

browser.goto('file:///C:/Users/Ashwin/Desktop/text.html')

browser.table(:class, 'table table-striped').trs.each do |tr|
 p tr[0].text
 p tr[1].text
 p tr[2].text
 p tr[3].text
end

I am getting the output this way:

"Product"
"Duration"
"Unit Price"
"Price"
"google.com"
"1 Year"
"$5"
"$5"

But I want the details to be displayed as below:

Product    : google.com
Duration   : 1 Year
Unit Price : $5
Price      : $5

Can anyone please help?

I want it this way since its simple and I want to learn that way — userash, May 24 '17 at 10:14

score 2 · Accepted Answer · answered May 24 '17 at 13:55

The table looks quite simple, so you can use the Table#strings method to convert the table into an array of strings. Then you can output each column header with each row value.

# Get the table you want to work with
table = browser.table(class: 'table table-striped')

# Get the text of the table
rows = table.strings

# Get the column headers and determine the longest one
header = rows.shift    
column_width = header.max { |a, b| a.length <=> b.length }.length

# Loop through the data rows and output the header/value
rows.each do |row|
  header.zip(row) do |header, value|
    puts "#{header.ljust(column_width)} : #{value}"
  end
end
#=> Product    : google.com
#=> Duration   : 1 Year
#=> Unit Price : $5
#=> Price      : $5

score 0 · Answer 2 · answered May 24 '17 at 13:09

This code is only for the given table with two rows

require 'watir'

browser = Watir::Browser.new(:chrome)

browser.goto('file:///C:/Users/Ashwin/Desktop/text.html')

browser.table(:class, 'table table-striped').rows.each_with_index do |row,index|  
  if index.eql?0
    firstRow=row
    next
  end
  p firstRow[0].text+":"+row[0].text
  p firstRow[1].text+":"+row[1].text
  p firstRow[2].text+":"+row[2].text
  p firstRow[3].text+":"+row[3].text
end

Ruby code to display table element details

2 Answers2