The following javascript, intended to open a new window and jump to a specified anchor, works great in IE. Unfortunately, in Firefox, it opens the window, but it doesn't jump to the anchor.
I've been struggling with this problem for a couple of days now (searches and modifications) to no avail.
If anybody has any insight as to how I can get this to work as intended in both IE and Mozilla browsers, I'd be forever grateful.
Here's the javascript function containing window.open() and the link calling the function containing window.open():
<html>
<head>
<script language=javascript>
function openPopupWindow_Why(sPopupUrl, sPopupLabel)
{
window.open(sPopupUrl, sPopupLabel, 'toolbar=no,resizable=yes,
scrollbars=yes,height=250,width=450', false);
return false;
}
</script>
</head>
<body>
<A onclick="openPopupWindow_Why('MyProfile_WhyAsk.htm#ethnicity', 'Why')"
href="javascript:void(0)" class="WhyAsk">Why do we ask?</a>
</body>
</html>
Here's the HTML anchor on the page that's opened by window.open():
<tr>
<td align="center">
<a name="#ethnicity"> </a>
</td>
</tr>
Try removing the # from the ethnicity anchor name like so:
<tr>
<td align="center">
<a name="ethnicity"> </a>
</td>
</tr>
Works in at least IE, Firefox and Chrome
Related
I am trying to click on checkbox (which represents as ) in Firefox using Watir. I have code left to me from the previous tester, and this code works in Chrome, but not Firefox.
Here is what I have.
Here is the code that leads to this div:
<div class="x-grid3-body" style="width:515px;" id="ext-gen201">
<div class="x-grid3-row x-grid3-row-first" style="width:515px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:515px;">
<tbody>
<tr>
<td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 158px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-0 x-unselectable" unselectable="on">Organisation</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 298px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-1 x-unselectable" unselectable="on">Catch Software</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-scopeCheckColumn x-grid3-cell-last x-grid3-check-col-td" style="width: 53px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-scopeCheckColumn x-unselectable" unselectable="on">
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What I need essentially is to click on this div
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
I can't attach screenshots (rating is low), but this div is the checkbox that I need to click.
This piece of code works in Chrome:
#browser.div(:class => 'x-box-inner', :index => 1).table(:class => 'x-grid3-row-table').td(:text => 'Organisation').parent.td(:index => 2)
But in Firefox I can see that Watir is just click on the whole parent div (can see selection appear in browser), not on the checkbox div.
Thank you.
First off, there is only one element in the html you've showed that has the class 'x-grid3-cc-scopeCheckColumn', so is there a reason you can't do:
#browser.td(class: 'x-grid3-cc-scopeCheckColumn').click
If not, you can simplify your element location drastically to get the td you want, since there is only one td that has the text 'Organisation', and .parent would only get the td above it, but it looks like you want the tr tag above that, so perhaps you want:
#browser.td(text: 'Organisation').parent.parent.td(index: 2)
Using an XPath worked for me in Firefox:
#browser.div(:xpath, "//*[#id='ext-gen201']/div/table/tbody/tr/td[3]/div/div").click
I was able to verify it with .flash in place of .click since your div just contains a space and there was nothing to otherwise see.
Apparently there is an expired certificate on a site that I use for automated testing with Selenium Webdriver. I've tried disabling the certificate revocation in Internet Settings, and restarting IE (as well as Windows, just to be safe), but to no avail.
I also tried using Webdriver to navigate past the warning page, but no success there either. For some reason it can't detect the "Continue" button on the page, either using xpath, or the built in "By.id" locating mechanism. I'm open to a WebDriver solution to this problem, but I would prefer a solution that allows me to disable certificate revocation. I don't use IE for anything else than automated testing on a VM, so I'm not concerned about security problems.
Just in case WebDriver is the only option, here is the source code of the page
<HTML dir=ltr><HEAD><TITLE>Certificate Error: Navigation Blocked</TITLE><LINK rel=stylesheet type=text/css href="ErrorPageTemplate.css">
<META name=MS.LOCALE content=EN-US>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META content=Yes http-equiv=MSThemeCompatible>
<SCRIPT language=javascript type=text/javascript src="errorPageStrings.js">
</SCRIPT>
<SCRIPT language=javascript type=text/javascript src="httpErrorPagesScripts.js">
</SCRIPT>
<SCRIPT language=javascript type=text/javascript src="invalidcert.js">
</SCRIPT>
</HEAD>
<BODY class=securityError onload="BodyLoad(); initMoreInfo('infoBlockID');">
<TABLE border=0 cellSpacing=0 cellPadding=0 width=730><!-- Main title -->
<TBODY>
<TR>
<TD id=shieldIconAlign vAlign=top rowSpan=3 width=60 align=left><IMG id=shieldIcon alt="Shield icon" src="red_shield_48.png"> </TD>
<TD id=mainTitleAlign vAlign=center width=* align=left>
<H1 id=mainTitle>There is a problem with this website's security certificate.</H1></TD></TR>
<TR>
<TD>
<H3>
<DIV id=linkdiv name="linkdiv"></DIV></H3></TD></TR>
<TR><!-- This row is for the the divider-->
<TD id=errorCodeAlign class=errorCodeAndDivider align=right>
<DIV class=divider></DIV></TD></TR><!-- Error Body -->
<TR>
<TD></TD>
<TD>
<H3>
<DIV style="DISPLAY: none" id=CertUnknownCA name="CertUnknownCA"></DIV>
<DIV style="DISPLAY: block" id=CertExpired name="CertExpired">The security certificate presented by this website has expired or is not yet valid.</DIV>
<DIV style="DISPLAY: block" id=CertCNMismatch name="CertCNMismatch">The security certificate presented by this website was issued for a different website's address.</DIV>
<DIV style="DISPLAY: none" id=CertRevoked name="CertRevoked"></DIV><NOSCRIPT id=securityCert1></NOSCRIPT><BR><ID id=securityCert2>Security certificate problems may indicate an attempt to fool you or intercept any data you send to the server.</ID> </H3></TD></TR><!-- Recommendation-->
<TR>
<TD> </TD>
<TD>
<H2 id=recommendation><B>We recommend that you close this webpage and do not continue to this website. </B></H2></TD></TR><!-- close webpage-->
<TR>
<TD> </TD>
<TD id=closeWebpageAlign vAlign=center align=left>
<H4 id=closeWebpage><IMG class=actionIcon border=0 alt="Recommended icon" src="green_shield.png">Click here to close this webpage. </H4></TD></TR><!-- continue to site-->
<TR>
<TD> </TD>
<TD id=continueToSiteAlign vAlign=center align=left>
<H4 id=continueToSite><IMG id=ImgOverride class=actionIcon border=0 alt="Not recommended icon" src="red_shield.png"><A id=overridelink href="<href>" name=overridelink>Continue to this website (not recommended).</A> </H4></TD></TR><!-- InfoBlock -->
<TR>
<TD id=infoBlockAlign vAlign=top align=right> </TD>
<TD id=moreInformationAlign vAlign=center align=left>
<H4>
<TABLE>
<TBODY>
<TR>
<TD vAlign=top><A onclick="javascript:expandCollapse('infoBlockID', true); return false;" href="#"><IMG id=infoBlockIDImage class=actionIcon border=0 alt="More information" src="down.png"></A> </TD>
<TD vAlign=top><SPAN id=moreInfoContainer>More information</SPAN><NOSCRIPT></NOSCRIPT></TD></TR></TBODY></TABLE></H4>
<DIV style="DISPLAY: none" id=infoBlockID class=infoBlock>
<P>
<LI id=errorExpl1>If you arrived at this page by clicking a link, check the website address in the address bar to be sure that it is the address you were expecting.
<LI id=errorExpl2>When going to a website with an address such as https://example.com, try adding the 'www' to the address, https://www.example.com.
<LI id=errorExpl3>If you choose to ignore this error and continue, do not enter private information into the website.
<P></P>
<P id=moreInfoSeeHelpPF>For more information, see "Certificate Errors" in Internet Explorer Help.</P></LI></DIV></TD></TR></TBODY></TABLE></BODY></HTML>
And here is what I tried (in Java):
ieDriver.findElement(By.id("overridelink")).click();
ieDriver.findElement(By.xpath("//a[#id='overridelink']")).click();
ieDriver.findElement(By.xpath("//A[#id='overridelink']")).click();
Which I'm guessing doesn't work because the attribute value is not specified in quotes, so it's incorrect html.
I also tried this:
ieDriver.findElement(By.xpath("//a[#href='<href>']")).click();
ieDriver.findElement(By.xpath("//A[#id='<href>']")).click();
Where
<href>
Symbolizes the actual URL.
I also was unable to locate surrounding tags using the same method.
Note: This also did not work for me: Webdriver not finding elements in remote IE
I suspect because it doesn't alleviate security concerns to trust an expired certificate.
If this is an alert box that IE is creating you can try the .SwitchTo() I use it for alert boxes.
WebDriver.SwitchTo().Alert().Accept();
Hope that helps
Well, one solution that works is just to create a new certificate with an acceptable end date. This works only if you have access to the server, permission from the administrator to do so, and don't mind signing your own certificate (at least temporarily). I don't really like this solution, but because it seems like a valid answer to my question, I'll just go with it. I'll create a new question related to WebDriver functionality specifically.
This view works well with IE9 and Chrome. However, not with IE8.
When the page is rendered, this is how it looks like:
My HTML (MVC3 View) is as shown below.
<div id="machinedisplay" data-bind="with: selectedMachine" >
<h2><span data-bind="text: MachineDesciption" /></h2>
<!-- ko with: my.vm.machineData -->
<table>
<thead><tr>
<th>Point Name</th><th>Description</th><th>Points Data</th>
</tr></thead>
<tbody data-bind="foreach: Points">
<tr>
<td data-bind="text: PointName()"></td>
<td data-bind="text: PointDesciption()"></td>
<td>
<table style="width:100%;">
<thead><tr>
<th>Name</th><th>Description</th><th>Value</th><th></th>
</tr></thead>
<tbody data-bind="foreach: Params">
<tr>
<td data-bind="text: ParameterName"></td>
<td data-bind="text: ParameterDescription"></td>
<td data-bind="text: StringValue"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
Any ideas on IE8 work around?
EDIT:
To illustrate this problem on a simpler model, check out this fiddle http://jsfiddle.net/ericpanorel/nzKvb/
I figured that I am running into problems because I am using the "with" or "if" bindings. I read somewhere that this causes problems with IE8.
I used IE9, and if you use your developer tools to switch from IE9 to IE8, this Fiddle doesn't work properly anymore. This fiddle is actually derived from one of knockout's samples (http://knockoutjs.com/examples/gridEditor.html)
EDIT:
I updated the fiddle... http://jsfiddle.net/nzKvb/20/
It has something to do with short-hand closing of tags inside the nested containerless bindings
<!-- ko if: Allowed-->
<h2>
<span data-bind="text: Dummy"/> <===== This will bomb in IE8
</h2>
The jsFiddle had an extra comma at the end of the array, which IE8 was treating as a null object:
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"},
{ name: "HK 416", price: "2420.00"}, <-- HERE !!!
]);
ko.applyBindings(viewModel);
The fiddle works fine without the comma:
http://jsfiddle.net/XPMUA/
Not sure if this solves your underlying problem but at least the fiddle is working now :-)
The problem is here because
<!-- ko if: Allowed-->
Older IE versions can be picky about using JavaScript reserved words
for property names.
So you should write 'if'
Check Same problem in another link!
Would love some help here... Firefox displays the last column in the table (an image they click on to edit their email address, it's a link), and IE8 displays nothing for the last column (doesn't even appear to display a column!) I've left out other rows in the table, but similar stuff happens.
Anyone know why?
<table class="profile-display">
<tr>
<td style="text-align: right; color: red;"> Email address: </td>
<td class="profile-content"> <?php echo("$evar"); ?> </td>
<td> <a href="profile_change.php?edit=13"
<img src="../images/writegreen.png" class="profile-edit" alt="Edit"
title="Edit Email Address"
border="0" />
</a>
</td>
</tr>
</table>
Your <a> tag is missing its >. That will cause a browser to not recognize the end of the tag until the first > it sees, which is the end of the img tag. Frankly, I'm surprised that Firefox shows the img.
Edit: Other common causes of this problem are missing quotes and misspelled tags.
I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100px and overflow:auto, hoping for scrollbars to appear when the content does not fit.
It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.
I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.
This is also logged as an official bug in the final, release version of IE8
Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.
This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.
It is logged as a bug in the final version of IE8 with no fix.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
There is a really, really hacky CSS workaround:
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
/*
SUPER nasty IE8 hack to deal with this bug
*/
pre
{
max-height: none\9
}
and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.
{
overflow:auto
}
Try div overflow:auto
I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
.calendarBody
{
overflow: scroll;
max-height: 500px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
This is a cell in the outer table.
<div class="calendarBody">
<table>
<tbody>
<tr>
<td>
This is a cell in the inner table.
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
{max-height:200px, Overflow:auto}
Thanks to Srinivas Tamada, The above code did work for me.
Similar situation, a pre element with maxHeight set by js to fit in allotted space, width 100%, overflow auto. If the content is shorter than maxHeight and also fits horizontally, we're good. If you resize the window so the content no longer fits horizontally, a horizontal scrollbar appears, but the height of element immediately jumps to the full maxHeight, regardless of the height of the content.
Tried various forms of the css hack mentioned by Jeff, but didn't find anything like it that wasn't a js bad-parameter error.
Best I could find was to pick your poison for ie8: Either drop the maxHeight limit, so the element can be any height (best for my case), or set height rather than maxHeight, so it's always that tall even if the content itself is much shorter. Very not ideal. Wacked behavior is gone in ie9.
Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.
To reproduce:
(This crashes the whole page.)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
X
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(Whereas this works fine...)
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
The quick brown fox
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(And, madly, so does this. [No content in the div at all.])
<HTML>
<HEAD>
<META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>
<BODY>
look:
<TABLE width="100%">
<TR>
<TD>
<TABLE width="100%">
<TR>
<TD>
<DIV style="overflow-y: scroll; max-height: 100px;">
</DIV>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I found this :
https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
and this works for me perfectly so I decided to share this.