Measuring pixel width of table in watir-webdriver

Question

Is there a way to read the pixel dimensions of a table? Percentage already shows width="100%". It is inside a div if that helps to probe instead.

I am trying to get the width to then resize the window for a png screenshot (using Watir functions already available). Currently because it shows its own horizontal scrollbar within the page, the table is truncated to only the first few columns in the screenshot, while vertically the entire page appears as usual, regardless of browser window size.

$browser.div(:id, "ctl27_divDetailFrame").table.row.cells.length

=> 23

shows me that it has 23 columns, though that may vary.

I already shrink the screen font a bit with

$browser.send_keys :home, [:control, "-"], [:control, "-"]

but that is not enough, and the font size shouldn't have to be reduced down to oblivion anyway.

The scraped source:

<div id="ctl27_divDetailFrame">
    <div class="detail-table-wrapper">
        <div id="ctl27_pnlPositionsTable">
                        <table class="detail-table w-Positions" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr class="detail-table-head">
                                <td><a class="hpc-column-sort SymbolHeadOSI" href="#" name="DetailSymbolHeader">Symbol</a><span class="common_icon-sort-up-orange_png" title="Sorted Ascending" style="margin-left: 3px; vertical-align:middle;"></span></td>
                                <td class="detail-heading-numeric"><a class="hpc-column-sort SymbolHeadOSI" href="#" name="DetailQuantityHeader">Qty</a></td>
.
.
.
                                <td class="detail-non-numeric"> LAST CELL of table </td>

                            </tr>
                        </table>

                    </div>
    </div>

Nowhere do I see an explicit width="99999px" which I'd simply be able to read.

2 CORRECTIONs: There is this class defined in one of the css files: And, horizontal resizing page previously did not extend the table's visibility beyond the 830px.

   div.detail-table-wrapper
    {
        width: 830px;
        overflow: auto;
        overflow-x: auto;
        overflow-y: hidden;
    }

So now I'd like to see if I can change that width to ~ 95% from watir-webdriver functions...(keeping it inline with the visible screen, which I can freely resize)

Answer 1

Using Watir-Webdriver for Firefox, I was able to change the width style to 95% with the following:

$browser.execute_script("document.getElementById('ctl27_divDetailFrame')
      .getElementsByTagName('DIV')[0].style.width='95%';")

Note that the locator is based on the HTML sample. Depending on whether that ID is consistent or not, you might need a better locator. For example, you might be able to do a regex for the ID using http://www.boards.ie/vbulletin/showthread.php?p=59109660 (but I have not tested it).

Aside: With Watir, you could more directly do this with the following code. However, being new to Watir-Webdriver, I could not find a similar document() method.

$ie.div(:index, 2).document.style.width = '95%'