I have some Selenium tests I've been building with the Firefox IDE plugin. This is the first I've attempted tests like this, the client asked for it, as I'm refactoring some code and they want to be certain things still work.
I have an element that resizes via a script, and I need to test its height. My Selenium source currently looks something like:
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>/landing-page</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>css=a.facebook.</td>
<td></td>
</tr>
</tbody></table>
I need to test that an element is greater than a certain height. How do I write that in after clicking on the .facebook link?
There is not a vanilla way of doing such a thing. You'd have to create your own javascript plugin to put into the IDE. Learn how to structure a javascript plugin for the IDE, then you can put something like this into it (mind you this is pseudo-code):
function validateHeight(HTMLElement element, int height) {
return assertTrue(element.height == height);
}
Related
I have a simple React weather app I am experimenting around with.
The "table" and "table-hover" css classes used below are bootstrap classes.
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature (K)</th>
</tr>
</thead>
</table>
As a test, I changed as follows:
<table className="tableJIBERRISH table-hoverJIBBERISH">
<thead>
<tr>
<th>City</th>
<th>Temperature (K)</th>
</tr>
</thead>
</table>
As expected, the formatting breaks.
However, in my debugging tools (I am using Firefox), I don't have any indication as to whether the CSS class being used is valid or not. How can I get this feedback from my browser's devtools?
OK, this is pretty simple. As mentioned in the comments above,
Open Firefox devtools
Right-click and select "Inspect Element"
On the right side of devtools under the Inspector tab, there is another group of tabs. By default, "Rules" should display all rules that are applied to the element.
All css classes that are applied should display here (there is a search bar to help filter as well)
We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.
What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.
Here is a basic example of how our layout is structured:
<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<!--Header Banner goes here This displays fine-->
</td>
</tr>
<tr style="height:100%" valign="top">
<!--Content Goes Here. Problem is that page only expands
as much as its content section vs filling up the whole page. -->
</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
</tr>
</tbody>
</table>
Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).
I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.
If this is an existing web app that you can't change the HTML of then Javascript might be a solution...
There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.
Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:
// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
You are missing some <td></td> and " in your code.
Also add
html,body {
height:100%;
min-height:100%;
}
to the StyleSheet. And HTML is
<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" style="background-color:red">
Header Banner goes here This displays fine
</td>
</tr>
<tr valign="top">
<td style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content section vs filling up the whole page.</td>
</tr>
<tr>
<td style="background-color:blue">Footer Goes here. This works fine!!</td>
</tr>
</tbody>
</table>
Live preview >> jsfiddle
Set margin-top:0px in your content tr tag
Is it possible to draw a dynamic bar graph in email body. (need to be compatible with Outlook)
I need to draw a graph in email sent through oracle database and dynamic value will be passed through a procedure.
The best solution is to create your bar chart dynamically then transform it into an image. You could simply use print screen for this and import it into Photoshop or whatever and edit the image there.
HTML emails are notoriously bad things in that they respond best to html code from 10+ years ago.
Some basic guidelines:
Don't try to use HTML5 in an email.
Don't try to use fancy CSS or link to an external stylesheet or even use css styles in the HEAD.
Don't try and use javascript as it won;t work
Don't try and use Flash as it won't work.
DO use inline CSS
DO use HTML TABLES for layout
DO use images but try and keep the filesize as small as possible.
You could use something like google charts to create a dynamic image (passing through the correct data sets) that you embed into your html email.
http://imagecharteditor.appspot.com/
http://www.jonwinstanley.com/charts/
You can't do anything with JavaScript, because email clients don't parse it.
But you can tell your server to set a header on the file to make it a JPEG or GIF. The file extension should also be jpg or gif, because some email clients freak out at rendering an image that doesn't have an extension, or has a non-image extension. Not sure what you're using server-side but most have some kind of dynamic image producing library.
Alternatively, render the graph using tables.
<table>
<tr>
<td colspan="10" bgcolor="pink"></td>
</tr>
<tr>
<td colspan="5" bgcolor="pink"></td>
<td colspan="5" bgcolor="white"></td>
</tr>
</table>
You get the idea. Unfortunately, you'd have to write something to generate the relevant HTML.
This has to be done the "old" html way. Meaning with tables and plain images.
Let's say you want to create a bar graph with 5 items. You create a table with all the cells you need, and then you would have, let's say 5 different images you would scale dynamically vertically when sending the personalized email. Every image is just a solid block of, let's say 10x10px in 5 different colors. You would override the size of the image to the size of the block for every email sent. Then you would place the substitute pattern of your emailer application (i.e. %%variable%%) and use the right values for every single email sent.
for example:
<table border=0>
<tr>
<td align=bottom><img src=redblock.gif width=20 height=%%height1%%></td>
<td align=bottom><img src=greenblock.gif width=20 height=%%height2%%></td>
<td align=bottom><img src=yellowblock.gif width=20 height=%%height3%%></td>
<td align=bottom><img src=blueblock.gif width=20 height=%%height4%%></td>
<td align=bottom><img src=greyblock.gif width=20 height=%%height5%%></td>
</tr>
<tr>
<td colspan=5 bgcolor=#000000 height=1><img src=singlepixel.gif width=1 height=1></td>
</tr>
<tr>
<td>Spain</td>
<td>France</td>
<td>US</td>
<td>UK</td>
<td>Italy</td>
</tr>
</table>
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>
I am developing a card board which is 4x3. So I have tryed to do markup with XTHML Transitional. I have used containers mixed with tables.
The example for first row:
<table>
<tr>
<div class="slot_01"></div>
<div class="slot_02"></div>
<div class="slot_03"></div>
<div class="slot_04"></div>
</tr>
<tr>
...
</tr>
</table>
Is this correctly done? Or its better to use only div/span blocks instead everywhere and make styling through css?
If you use a table, use table, tr, td, not div.
I think most people nowadays try to avoid tables for anything but "really tabular data" and prefer the "pure CSS" solution.
It depends a bit on your overall markup (e.g. what you want to display in the cells). In your case, I guess I would go for a tableless solution.
No, You need td's in there, like this:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
If you really need to, put your divs inside the TDs.
If your data is tabular in nature there's nothing wrong with using tables. Everyone else is correct - you need to use table cells instead of the divs in your sample code.
Ideally use div/span blocks if you can, but the above code is ok, you just need to wrap each div in a td element:
<table>
<tr>
<td><div class="slot_01"></div></td>
<td><div class="slot_02"></div></td>
<td><div class="slot_03"></div></td>
<td><div class="slot_04"></div></td>
</tr>
<tr>
...
</tr>
</table>
For the lay out of the entIre page I would do it tableless. Remember: XHTML is for structure, CSS for displaying the structure.