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?

Answer 1

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