selenium IDE trying to get margin-bottom value_问答_开发者

I'm trying to get the value of the bottom margin of an element on my page. The page has a select box that allows the visitor to adjust the botttom margin of an element. I want to create a script that changes the value and then checks that the bottom margin has been changed. I've done a similar thing with the height parameter but there is a specific assert for that. How do I access the bottom margin.

I've tried assertAtribute elementid@style

but this just gives the whole stlye which includes other values.

I've included my height script below although it's not been much help t开发者_开发知识库o me

<tr>
    <td>select</td>
    <td>headerHeightSet</td>
    <td>label=100</td>
</tr>
<tr>
    <td>storeSelectedValue</td>
    <td>headerHeightSet</td>
    <td>topMarginValue</td>
</tr>
<tr>
    <td>assertElementHeight</td>
    <td>wemakeSheetHeaderJpg</td>
    <td>${topMarginValue}</td>
</tr>

Yah, the "storeAttribute" command doesn't work well, from what I've found. I found a couple different ways to do it, but I think using the user-extensions is the best way.

HTML:

<html>
<head>

    <script src="jquery-1.6.2.js"></script>

    <style type="text/css">
        body
        {
            margin:0px 0px 0px 0px;
        }

        .customDiv
        {
            border-style:solid;
            border-color: green;
            margin: 5px 50px 10px 0px; /* top bottom right left */
            margin-color: black;
            background-color: red;
            padding: 50px 50px 50px 50px;
        }

    </style>

    <script>
        $(document).ready(function() {

            jQuery("#BottomMarginSelect").change(function() {
                jQuery("#CustomDiv").css("margin-bottom",jQuery("#BottomMarginSelect").val());
                //alert(jQuery("#CustomDiv").css("margin-bottom"));
            });
        });
    </script>


    </head>

<body>

<div id="CustomDiv" class="customDiv">
text in div
</div>--- bottom margin of div ends here (100px below green div border); margin is always transparent ----

<br />
<br />
<b>Select the bottom margin of the div:<b><br />
<select id="BottomMarginSelect">
    <option value="10px">10px</option>
    <option value="20px">20px</option>
    <option value="30px">30px</option>
</select>
</body>
</html>

Create a file called "user-extensions.js" and place this code in it:

Selenium.prototype.doStoreStyleAttribute = function(locator) {
       var val = selenium.browserbot.getCurrentWindow().document.getElementById(locator).style.marginBottom;
       this.doStore(val,"var_style_attribute_from_custom_command");
};

Set User Extensions file in Selenium-IDE:

Options > Options >

selenium IDE trying to get margin-bottom value

Selenium Commands:

<tr>
    <td>select</td>
    <td>id=BottomMarginSelect</td>
    <td>label=10px</td>
</tr>
<tr>
    <td>storeSelectedLabel</td>
    <td>id=BottomMarginSelect</td>
    <td>var_BottomMarginSelect_select_option_selected_text</td>
</tr>
<tr>
    <td>echo</td>
    <td>${var_BottomMarginSelect_select_option_selected_text}</td>
    <td></td>
</tr>
<tr>
    <td>storeStyleAttribute</td>
    <td>CustomDiv</td>
    <td></td>
</tr>
<tr>
    <td>echo</td>
    <td>${var_style_attribute_from_custom_command}</td>
    <td></td>
</tr>
<tr>
    <td>assertExpression</td>
    <td>${var_style_attribute_from_custom_command}</td>
    <td>${var_BottomMarginSelect_select_option_selected_text}</td>
</tr>
<tr>
    <td>storeText</td>
    <td>//div[@id='CustomDiv']/@style</td>
    <td>var_style_attribute_from_id</td>
</tr>
<tr>
    <td>echo</td>
    <td>${var_style_attribute_from_id}</td>
    <td></td>
</tr>
<tr>
    <td>storeText</td>
    <td>//div[@class='customDiv']/@style</td>
    <td>var_style_attribute_from_class</td>
</tr>
<tr>
    <td>echo</td>
    <td>${var_style_attribute_from_class}</td>
    <td></td>
</tr>
<tr>
    <td>storeAttribute</td>
    <td>CustomDiv@style</td>
    <td>var_style_attribute_from_storeAttribute</td>
</tr>
<tr>
    <td>echo</td>
    <td>${var_style_attribute_from_storeAttribute}</td>
    <td></td>
</tr>

Output:

[info] Executing: |select | id=BottomMarginSelect | label=10px |
[info] Executing: |storeSelectedLabel | id=BottomMarginSelect | var_BottomMarginSelect_select_option_selected_text |
[info] Executing: |echo | ${var_BottomMarginSelect_select_option_selected_text} | |
[info] echo: 10px
[info] Executing: |storeStyleAttribute | CustomDiv | |
[info] Executing: |echo | ${var_style_attribute_from_custom_command} | |
[info] echo: 10px
[info] Executing: |assertExpression | ${var_style_attribute_from_custom_command} | ${var_BottomMarginSelect_select_option_selected_text} |
[info] Executing: |storeText | //div[@id='CustomDiv']/@style | var_style_attribute_from_id |
[info] Executing: |echo | ${var_style_attribute_from_id} | |
[info] echo: margin-bottom: 10px;
[info] Executing: |storeText | //div[@class='customDiv']/@style | var_style_attribute_from_class |
[info] Executing: |echo | ${var_style_attribute_from_class} | |
[info] echo: margin-bottom: 10px;
[info] Executing: |storeAttribute | CustomDiv@style | var_style_attribute_from_storeAttribute |
[info] Executing: |echo | ${var_style_attribute_from_storeAttribute} | |
[info] echo: margin-bottom: 10px;