I am trying to automate a scenario where I would need to access elements inside an iFrame and continue my testing.
My current problem is that, I am able to switch to the iframe successfully, but I am unable to access contents inside the frame.
The contents inside the iframe are Shadow DOM contents and are inside a document.
The HTML code looks like this::(Please see attachedHTML)
I have tried the below and get
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element
By accessing the shadow root
driver.switchTo().frame("iframe_id");
WebElement root1 = driver.findElement(By.className("class_abs"));
WebElement shadowRoot1 = expandRootElement(root1);
Here webdriver is unable to find element by classname.
2.By using Javascript executor
driver.switchTo().frame("iframe_id");
JavascriptExecutor js=(JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", driver.findElement(By.xpath("button_xpath")));
Here webdriver is unable to access the Xpath.
3.
Using normal Xpath after switching to IFrame.
I would like to know if I need to access the contents of the document inside iFrame first to access its elements. If that is the case, how can I do it.
P.S- Tried this on both chrome and Firefox browser.
All,
I have finally managed to resolve the issue.
So the issue resolutions goes like this.
-The frame designed on the page were actually hidden.
-I had to switch to the hidden frame after switching to the main frame.
-Then the elements were then identified easily.
Problems what I faced:
1. In Firefox browser-The hidden frame was not detected in the 'Firefinder' when I checked with filter 'frame' which was detecting all the frames except the hidden frame. Same was the case with 'Firepath'
2. In Chrome browser- Though the document inside the main frame was displayed, traversing inside did not show the hidden iframe.
Solution:
In Firefox browser, inspecting the element using the HTML tab helped me to identify the hidden frame inside the main frame.
Carefully traversing the iframe hidden document helped me.
But, I am still not sure why the Chrome browser 'Inspect' doesn't show this frame.
Related
In my website project, an element only changes style when I drag something over it. It does this by adding a CSS class to it.
The problem is that I have a hard time editing this style because I can't live edit it in Chrome. I have to edit the file, reload the webpage, then drag something to see the changes.
Is there any way to do this just inside Chrome? Most magically, would be if there was some way to freeze my dragging and then be able to edit. Anything close?
Browse to the desired page
Open console (F12)
Select 'SOURCES' tab in chrome inspector
Drag the element
Hit F8 to freeze (if you have clicked anywhere on the actual page F8
will do nothing, your last click needed to be somewhere in the inspector, like the sources tab)
Go back to elements tab in inspector
It should now be nested in the trigger element's html
Try this trick:
in Google Chrome Console type at any time you want to test that class
var elm = document.getElementById('yourElementId'); elm.classList.add('yourClassToTest');
(please note: you have to press SWIFT+ENTER if you like to create a new line break in Google Chrome Console)
At this point you have added the class you want to test on the div.
Just use the web inspector, in order to change/inspect any CSS properties.
This solution lets you avoid to manually drag something to see your class/changes.
When i try to playback a recorded script, in which there is a click on css drop down like thing and select an option from it, i got the following error:
"Element not found".
Here there is nothing like loading so that it takes some time and element is not visible. It's just a plain web page.
Please help me in resolving this issue and go on with the recorded script.
Try invoking a mouseOver command on the underlying element, that should give the dropdown menu a hint to appear and the element you're missing will be visible.
I have an iFrame in my code and calling a page in this iFrame. The page contains a video player which is stored in my public_html/video folder.
This page on it's own runs perfectly. When it calls into the iframe in IE9, I am getting a blank white page...
I used many types of X-UA, but nothing happens.
Any suggestions?
The page is rendered according to the topmost frame (the browser mode is set only once at the beginning and all values in nested frames are being ignored).
I have a Flex HTML component that is displaying content from a remote URL and a button in the Flex application that reloads the content. However, it takes a few seconds for the IFrame's content to refresh. During this time, there is no obvious feedback to the user that any action is underway.
I would like to clear the contents of the IFrame, so there is immediate feedback after clicking refresh, and then load the remote URL again. Is there a way to do this?
I've tried setting the HTMLText property to "" and setting the IFrame location to "about:blank", and neither of these have the desired immediate effect. (on it's own, setting the location to about:blank immediately clears the IFrame, but if it is followed by resetting the location to the original URL, the immediate clearing doesn't occur. Is this something to do with the IFrame caching the original page?)
One approach is to remove the component from the display list and add a new instantiated component back in its place.
This will assure fully initialized state.
One other way you could get around would be having a blank iframe or loading screen ready with the same size and same position, while the contents are being loaded, hide the content iframe, and show the blank iframe or loading screen. This could be much easier to achieve a more flexible result.
I am completely new to script writing. I have to write a script in which I need to add a button next to the send button on the Gmail page.
I made the button in a div, so that it is now added to the interface, but I can't seem to position it in the right place. Any tips?
You're probably adding the button onto Gmail's top frame. Gmail uses multiple frames in their interface; the frame that contains the actual UI we all see (except for the chat boxes) is the "canvas_frame".
Put in a check to make sure that the script is operating on the correct frame. For example, in a Gmail script I wrote, I checked for the 'cP' class element (the body's class is cP).
if (document.getElementsByClassName('cP')[0]) {
// You know that you're in the canvas_frame because the outer frame does not contain any elements with the classname 'cP'
// Put all your code here
}
Hope this helps!