I want to show a WebPage on another WebPage using InlineFrame.
I initialized it like this:
Wicket/ Java:
InlineFrame choosenTestcaseInlineFrame =
new InlineFrame("inlineFrame", AuthenticationPage.class);
public WhatToDoPage() {
Form whatToDoForm = configureWhatToDoForm();
add(whatToDoForm);
add(choosenTestcaseInlineFrame.setOutputMarkupId(true));
add(choosenTestcaseInlineFrame);
}
'
HTML:
<iframe wicket:id="inlineFrame" style="margin-left: 200px; height: 500px; width: 1000px">
The Problem is That the InlineFrame seems to refuse to show the Content.
here is a Screenshot:
I don't know if Chrome has a specific option to allow iframe to be displayed, but you might find some clues to solve the problem here:
iframe refuses to display
Related
I have a print button in my application. This print button opens a PDF in a new window. On top of this window is the Print icon that can be clicked to open a Chrome's print preview window where one can select "Save as PDF" option to save the PDF file.
I would like to test this flow in selenium.
--- I click the Print button on my webpage. This opens a new Chrome window with the PDF
driver.findElement(By.cssSelector("ID")).click();
--- I switch to the newly opened Chrome window
driver.switchTo().window(driver.getWindowHandles().toArray()[1].toString());
I can see in the Logs that selenium is indeed switching to the new window.
--- I try to get the element of the new Chrome window opened
driver.findElement(By.cssSelector("viewer-pdf-toolbar"))
This is where the issue is. Selenium is unable to interact with this newly opened window and cant find this element. When I inspect the newly opened window I see the following DOM structure -
<body>
<viewer-pdf-toolbar id="toolbar"></viewer-pdf-toolbar>
<div id="sizer" style="width: 735px; height: 1092px;"></div>
<viewer-password-screen id="password-screen"></viewer-password-screen>
...
..
.
</div>
The element I'm looking for does exist in the DOM structure and I can access it via Console but I cant access it using Selenium. You can view this DOM by opening any PDF file in Chrome browser and inspecting the window.
Any ideas why this is happening?
Note : When the new window loads, for a second or two it shows "Printing, Please wait" and then the PDF loaded. Not sure if this information is relevant to the problem here.
Additional Information -
In debug mode, after the Driver has switched to the new PDF window I evaluated - driver.getCurrentUrl() - this URL is the correct URL as displayed in the address bar of the preview window. This means that my driver is on the correct window.
But when I execute driver.getPageSource - I get the following output
<html>
<head>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);">
<embed name="XXXXXXD474B71424EC89403FB4FA75CF" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="XXXXXXD474B71424EC89403FB4FA75CF"></body>
</html>
So the driver sees this as the page source whereas when I do an inspect on the same window I see a different DOM. Why is this happening? Is Chrome replacing the <embed> tag with the final DOM? How can selenium be made aware of this change?
Please help!
I am learning to automate procress in a website. I chose http://logos.iti.gr/logos/ as a website to automate. I am facing a problem when uploading the image file using the upload an image button because this button when clicked seems to convert into a text field.
The other tutorials I followed get the id of the text field and use sendkeys to send the path because they do have separate text field and upload button key.
Here is the code that I tried :
driver.get("http://logos.iti.gr/logos/");
driver.findElement(By.id("fileToUpload")).clear();
System.out.println("Cleared");
driver.findElement(By.id("fileToUpload")).sendKeys("/home/test.jpg");
I don't know what the problem is. It just get IPDL protocol error: Handler returned error code!
org.openqa.selenium.ElementNotInteractableException: Element <input id="fileToUpload" class="input_file" name="fileToUpload" type="file"> could not be scrolled into view
Build info: version: '3.141.5', revision: 'd54ebd709a', time: '2018-11-06T11:42:16'
You get ElementNotInteractableException - it is thrown to indicate that although an element is present on the DOM, it is not in a state that can be interacted with. In your case it happens because the element has style display:none. Basically, selenium (and real users as well) can't interact with non-visible elements. You need to make element visible at the frist place and then continue.
driver.get("http://logos.iti.gr/logos/");
WebElement el = driver.findElement(By.id("fileToUpload"));
System.out.println("Making element visible");
((JavascriptExecutor)driver).executeScript("arguments[0].style.display = 'block';", el);
el.clear();
System.out.println("Cleared");
el.sendKeys("/home/test.jpg");
By the way here is the default element style (you can see it in browser dev tools). Pay attention to display:none. When you change the value to block don't be confused that you actually don't see any changes on a screen because element's width and height are very small.
.input_file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
display: none;
}
Try updating your client and Firefox. Hopefully that should solve this issue.
I have never faced any issue with file uploads until the webpage mandates the dialog box while clicking the image upload. I am using latest version of ChromeDriver and Chrome.
If possible, you too switch to ChromeDriver since I find the pair working seamlessly together in my experience! :)
I am currently testing a GWT web application similar to MS Paint and the problem which I am facing is that my test case passes on the browsers like Chrome, Firefox, and IE but sadly, it fails in the Microsoft Edge browser. I am unable to find out how to fix this issue after searching the whole Internet and trying out many methods which are written on the Stack Overflow and Google Groups, I am feeling extremely hopeless. Meanwhile, here is my code:
public class Insert_Element_in_Edge {
private static WebDriver driver;
#Test
public void main() throws InterruptedException, IOException
{
// TODO Auto-generated method stub
System.setProperty("webdriver.edge.driver", "D:\\SELENIUM\\Drivers\\MicrosoftWebDriver.exe");
driver = new EdgeDriver();
driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS);
driver.manage().window().maximize();
Thread.sleep(3000);
driver.get("xxxx.com");
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(ExpectedConditions.titleContains("xxxx"));
WebElement canvas = driver.findElement(By.id("frontCanvas"));
Thread.sleep(3000);
final String InsertPath="//img[contains(#src,'Insert Element')]";
WebElement Insert = driver.findElement(By.xpath(InsertPath));
Thread.sleep(3000);
Insert.click();
}
}
Here's the error which I am facing:
org.openqa.selenium.ElementNotVisibleException: Element not displayed (WARNING: The server did not provide any stacktrace information)
Given below is the HTML code of the element which I am trying to locate in the Edge browser.
<div id="isc_2Q" eventproxy="isc_XXXIconButton_SClient_1" role="button" aria-label="xxx"
onfocus="isc.EH.handleFocus(isc_XXXIconButton_SClient_1,true);"
onblur="if(window.isc)isc.EH.handleBlur(isc_XXXIconButton_SClient_1,true);"
tabindex="1020" style="position: absolute; left: 0px; top: 54px; width: 40px;
height: 34px; z-index: 201152; padding: 0px; opacity: 1; overflow: visible;
cursor: pointer;" onscroll="return isc_XXXIconButton_SClient_1.$lh()" class="iconHoverZindex">
<div id="isc_2R"
eventproxy="isc_XXXIconButton_SClient_1" style="position: relative;
-webkit-margin-collapse: separate separate; visibility: inherit;
z-index: 201152; padding: 0px; cursor: pointer;">
<table role="presentation" cellspacing="0" cellpadding="0" width="40px" height="34px">
<tbody>
<tr>
<td nowrap="true" class="iconButton" style="background-color:transparent;"
align="center" valign="middle" onfocus="isc_XXXIconButton_SClient_1.$47()">
<img src="Insert Element.png" width="24" height="24" align="TEXTTOPundefined"
class="iconButtonHIcon" eventpart="icon" border="0"
suppress="TRUE" draggable="true"/>
<span style="vertical-align:middle;align-content:center;"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This element is visible in other 3 browsers and is clicked successfully. But I just got stuck in Edge. Also, in Edge, the HTML5 canvas is also not displayed using Selenium. Please help.
You can add wait statement before click on it as given below.
wait.until(ExpectedConditions.ElementIsVisible(By.xpath(InsertPath)));
You have to use element to be clicable as it is a button
WebDriverWait wait = new WebDriverWait (driver, 50);
final String InsertPath="//img[contains(#src,'Insert Element')]";
WebElement Insert= wait.until(ExpectedConditions.elementToBeClickable(By.xpath(InsertPath)));
Insert.click();
In the past I aslo had some trouble location elements with xPath in Edge, GWT and Selenium
Sadly I didnt found a solution but a workaround:
We gave every Element an ID
for example:
panel.getElement().setId("panel-id");
and then used the ID-Locator to find the Element:
findElement(By.id("panel-id"))
I read answers to your question that should solve your problem.
But noone asked you (and you did not provide us, in your question) informations about the version of your MicrosoftWebDriver, Selenium, and Browser that are you using.
From Microsoft WebDriver download, are you using a version that should be supported from your browser?
From EdgeHTML issue tracker, I found only 2 issues (that are fixed) with key element ElementNotVisibleException.
In these cases I usually take a screenshot just before the line where exception occurs and save it somewhere to further investigation. Then I mostly have to add a scrollUp()/scrollToVisible() function before this line to fix the problem.
I would suggest a few tweaks in your code block as follows:
First of all we will try to get rid of all the Thread.sleep(n) calls.
Now, to address the reason for ElementNotVisibleException, we will scroll the element of our interest within the Viewport and then invoke click() method.
Your final code block will may look:
driver = new EdgeDriver();
driver.manage().window().maximize();
driver.get("xxxx.com");
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(ExpectedConditions.titleContains("xxxx"));
WebElement canvas = driver.findElement(By.id("frontCanvas"));
WebElement Insert = driver.findElement(By.xpath("//div[#id='isc_2R']//td/img[#class='iconButtonHIcon' and contains(#src,'Insert Element.png')]"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].scrollIntoView()", Insert);
Insert.click();
Other than above suggestions,
Make sure that "Your Element" that you are looking for is physically visible in your Browser screen. Meaning, if element is not visible , user needs to scroll down in order to see it. Driver behaves similar. In order to prevent "ElementNotVisiable" exception make sure it is also visible on browser page
Try This,
Select elm = new Select(driver.findElement(By.Xpath("Your element's Absolute Xpath")));
//Thread.sleep(100);
elm.selectByValue("Dropdown Value which you want to select");
I've exactly the same problem with GWT. For any reason there's no way to call click directly.
Workaround that worked for me
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click()", element);
I am running a test and am running into unexpected issue managing a modal dialog box.
The user uploads a file in a modal dialog box and if the file already exist on the system another seperate modal dialog opens asking the user if they want to overwrite the existing file.
I am having difficulties in manipulating the buttons on this second dialog.
When I manage the first dialog I do the following, which works:
void switch_to_dialog_window(WebDriver driver){
driver.switchTo().frame(driver.findElement(By.cssSelector("div.d2l-dialog>div>iframe")));
}
The html when both dialogs are open looks like this:
<div class="d2l-dialog" style="top: 70px; width: 700px; height: 520px; left: 630px; z-index: 1002;">
<div class="d2l-dialog-inner" style="height: 518px;">
<iframe class="d2l-dialog-frame" src="/d2l/common/dialogs/file/main.d2l?ou=11346&af=MyComputer%2cOuFiles%2cSharedFiles%2cgooglefiledownloader%2coffice365filedownloader&am=1&fsc=1&asc=0&mfs=0&afid=0&uih=&area=MyComputer&f=&path=%2fcontent%2fenforced%2f11346-Gherkin_Cucumber%2f&d2l_body_type=2" name="d2l_c_10_968" allowfullscreen="" scrolling="no" style="width: 698px; height: 518px; overflow: hidden;" frameborder="0"/>
</div>
</div>
<div class="d2l-dialog" style="top: 90px; width: 475px; height: 415px; left: 800px; z-index: 1004; display: block;">
<div class="d2l-dialog-inner" style="height: 413px;">
<iframe class="d2l-dialog-frame" src="/d2l/lp/fileinput/11346/Duplicates?files=photo.jpg" name="d2l_c_1_182" allowfullscreen="" scrolling="no" style="width: 473px; height: 413px; overflow: hidden;" frameborder="0"/>
</div>
</div>
I'm trying to control the dialog which mentions duplicates.
I tried to modify the method for switch_to_dialog_window to be more specific (as a test to identify the first dialog box to control that):
driver.switchTo().frame(driver.findElement(By.cssSelector("div.d2l-dialog>div>iframe[src^='/d2l/common/dialogs/file/main.d2l']")));
This doesn't work though so i cant implement that way to manage the 2 dialogs.
I tried to switch to the default content and then switch back to the Dialog using the method 'switch_to_dialog_window' but that doesn't work either. I tried just trying to access the button on the dialog box directly but that doesnt work:
public void confirm_duplicate() {
//driver.findElement(By.xpath("//iframe[starts-with(#src, '/d2l/lp/fileinput/11346/Duplicates')]"));
//driver.switchTo().frame(driver.findElement(By.cssSelector("div>div>iframe[src^='/d2l/lp/fileinput/11346/Duplicates']")));
try{
//driver.switchTo().frame(driver.findElement(By.cssSelector("div>div>iframe[name^='d2l_c_1_']")));
driver.findElement(By.linkText("Update")).click();
}catch(Exception e)
{
System.out.println("could not click on the Update button on the top most dialog box");
e.printStackTrace();
}
}
I seem to be running around in circles with this one and is exhausting. Can someone explain how to get control of this top most dialog box?
And also could you possibly teach me as to why the following expression isnt working:
driver.switchTo().frame(driver.findElement(By.cssSelector("div.d2l-dialog>div>iframe[src^='/d2l/common/dialogs/file/main.d2l']")));
Robot API can be used to get handle topmost modal box if there is an issue with switching to frame.
To use Robot API, give the following line of codes
Robot key = new Robot();
key.keyPress(KeyEvent.VK_ENTER);
key.keyRelease(KeyEvent.VK_ENTER);
Make sure that the control is already on the intended button. If the focus is on another button on the modal, then give 'tab' or other keyevent to get the control on the update button.
I have taken a break of a couple of months from automation. I happened to be doing some maintenance on my scripts and found the root cause of this problem.
The issue was not with my code, the code was fine just i forgot one crucial step. During the business process a second window was opened which required user input. I used the code to switch to this popup window.:
public void get_window_ids(){
//Get the handles for the main window and the popup window for the upload button
try {
Set<String> AllWindowHandles = driver.getWindowHandles();
System.out.println(AllWindowHandles.size()+ " distinct windows: " + AllWindowHandles);
window1 = (String) AllWindowHandles.toArray()[0];
System.out.println("\nwindow 1 is " + window1+"\n");
window2 = (String) AllWindowHandles.toArray()[1];
System.out.println("\nwindow 2 is " + window2+"\n");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public String getWindow1() {
return window1;
}
public String getWindow2() {
return window2;
}
When I switched to the window2 I forgot to switch back to the first window. I just missed the fact that there was a popup window I forgot about. So if you are using these modal popups remember to return control back to the main window.
I've the current situation:
Have a Link in some HTML page.
When the user click that Link, an NORMAL (vs Ajax) HTTP request is being sent to a Web Server (typically a Java Servlet)
After that, of course the browser will bring the contents from the server and start rendering it. (actually it's the same page with modified contents - don't ask me to do it in ajax, cause it is the requirements)
Before step 3 is being done (while the page is being loaded) I need to display some frame to the user saying something like loading ....
Well, just populate a div somewhere on the page with "Loading..." when the link is clicked. Here's some rough code
$('#yourlink').click(function(){
$('#loading').html('Loading....');
});
<div id="loading">
</div>
And when the page loads, the current loading div will be replaced with an empty one, this will signify that the loading is complete.
Another approach:
The css
#loading
{
display: none;
}
The html
<div id="loading">
Loading....
</div>
The js
$('#yourlink').click(function(){
$('#loading').show();
});
Well, there's several non Ajax ways to do this. The simplest I guess would be to have a giv animated image with your loading bar, which you keep in a hidden div in your initial page:
<div style="display:hidden;"><img src="/img/loading.gif"></div>
Then add some javascript to the link/button that submits the page, such as when it is clicked it unhides the div with image.
There are many ways to do this. I handle it something like this:
// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
overlay();
});
// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
var skipOverlay = $(this).hasClass("noOverlay");
if(!skipOverlay){
overlay();
}
return valid;
});
// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
$.blockUI({
fadeIn: 500,
css: {
height: '150px',
top: '35%'
},
message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
});
}