<frameset border="0" rows="25,*" frameSpacing="0" frameBorder="0" onbeforeunload="doUnload()" onunload="doUnload()" onkeydown="fn_KeyDown(event)">
<frame name="link" scrolling="no" src="Links.aspx?FromWhere=DB" marginwidth="0" marginheight="0" BORDER="0" target="_self">
<script >
alert('');</script>
<frame id="Sub" src="../Home/Home.aspx?FromWhere=DB" scrolling="Yes" name="Sub" >
</frameset>
How to switchto the frame here and perform operations in selenium?
If you want to switch to first frame driver.switchTo().frame(driver.findElement(By.cssSelector("frame[name='link']")));
If you want to switch to the Second frame with name 'Sub'
driver.switchTo().frame(driver.findElement(By.cssSelector("frame[name='Sub']")));
or
driver.switchTo().frame(driver.findElement(By.cssSelector("frame#Sub")));
Related
Hi I have parent frame called "bottomframe" inside that have two child frames called "Header" and "Main"
I would like to switch between frames "Header" and "Main" but I am not able to come out from one sub frame.
<iframe id="bottomframe" name="bottomframe" scrolling="yes" src="Home_content.aspx?C=93&L=YTERPIT%40WIN.DESY.DE&sysMsg=0" width="100%" height="100%" align="left"></td></tr></table><input type="hidden" name="iprocure24url" value="https://iprocure.eu1.inforcloudsuite.com/xfel" /></body></html></iframe>
<frameset rows="75,*" bgcolor="lightgrey" border="0"><frame src="punchoutheader.aspx?EvendorKey= 3257" name="Header" marginwidth="0" marginheight="0" width="100%" height="100%" scrolling="no"><frame src="OciPunchOutPage.aspx?EvendorKey= 3257" name="Main" marginwidth="0" marginheight="0" width="100%" height="100%"></frameset>
<frame src="punchoutheader.aspx?EvendorKey= 3257" name="Header" marginwidth="0" marginheight="0" width="100%" height="100%" scrolling="no">
</frame>
<frame src="OciPunchOutPage.aspx?EvendorKey= 3257" name="Main" marginwidth="0" marginheight="0" width="100%" height="100%">
</frame>
</frameset>
</iframe>
I tried below in pytest with selenium
driver.switch_to.frame("bottomframe")
driver.switch_to.frame("Header")
bodyText = driver.find_element_by_tag_name('body').text
print(bodyText)
This above works fine but now I would like to switch to another subframe "Main" so I tried below
driver.switch_to.frame("bottomframe")
driver.switch_to.frame("Header")
bodyText = driver.find_element_by_tag_name('body').text
print(bodyText)
# back to default web page frame
driver.switch_to.default_content()
driver.switch_to.frame("bottomframe")
driver.switch_to.frame("Main")
and i get NoSuchFrameException if I go to "Main" frame.
Could you help me out to switch between frames "Main" and "Header"
A good approach
A better way to switch frames will be to induce WebDriverWait for the availability of the intended frame with expected_conditions set to frame_to_be_available_and_switch_to_it as follows
WebDriverWait(driver, 10).until(EC.frame_to_be_available_and_switch_to_it((By.NAME,"Main")))
OR
WebDriverWait(driver, 10).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//frame[#name='Main']")))
Switching back from frame
To switch back to the Parent Frame you can use the following line of code:
driver.switch_to.parent_frame()
To switch back to the Top Level Browsing Context / Top Window you can use the following line of code:
driver.switch_to.default_content()
I'm trying to create an SVG filter that will "cut" an image in half horizontally, and move the lower part a few pixels to the right. This filter is to be used in CSS.
For this, i am using feDisplacementMap on a rectangle that is generated with 2 feFlood merged together.
This is how i generate the rectangle to be used by the displacement map. I think it is properly generated:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- red channel for displacement, other channels neutral -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<!-- all channels neutral for no displacement -->
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
</filter>
</svg>
Now for the full example with the displacementMap, the filter does not seem to have any effect:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
BUT if i remove the primitiveUnits attribute from the filter, i can get the displacement working:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
From what i understand, i need the primitiveUnits attribute to be "objectBoundingBox", otherwise i can't use percentages of the original HTML element's bounding box so removing this attribute is not an option. But am i hitting a browser bug here or am i missing something ?
Two small errors. You need to put a % in the x of the second flood.
result="rect-blue" x="0%" y="0%" width="100%" height="50%"
And the scale in your displacement primitive needs to be objectBoundingBox as well - so 0.1 (but that's super big - so I changed it to 0.01 below so you can actually see what's happening).
<feDisplacementMap in2="rect" in="SourceGraphic" scale=".01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
And in general, it's best to express objectBoundingBox dimensions as decimals - Firefox, at one point at least, wouldn't accept percentages. And it's also best to define your filter higher in the document than the HTML it will apply to (Safari at one point at least, couldn't find the filter if you did it this way).
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0" y="0.5" width="1" height="0.5"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0" width="1" height="0.5"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="0.01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
<div class="container">
<h1>MY AMAZING TEST TEXT</h1>
</div>
It seems that just adding the remote file in the src property is not enough for Chrome.
<video width="720" height="400" >
<source src="http://mysite/master.m3u8" type="video/mp4" />
</video>
Try type="application/x-mpegURL" on the source, or
<video width="720" height="400" src="http://mysite/master.m3u8"></video>
I need to access to a form element which is in the frame "menu"
<html>
<head>
<script>.........
</script>
<title>The Main page</title>
</head>
<frameset onload="init();" rows="70,*" frameborder="0" border="false" framespacing="0">
<frameset cols="32000,0,0" frameborder="0" border="true" framespacing="0">
<frame scrolling="no" marginheight="0" marginwidth="0" target="logo" src="about:blank" name="logo"></frame>
<frame scrolling="no" noresize="" marginheight="0" marginwidth="0" target="temp" src="about:blank" name="temp"></frame><frame scrolling="no" noresize="" marginheight="0" marginwidth="0" target="system" src="about:blank" name="system"></frame>
</frameset>
<frameset cols="165,*" frameborder="0" border="false" framespacing="0">
<frame scrolling="no" noresize="" marginheight="0" marginwidth="3" target="menu" src="about:blank" name="menu"> </frame>
<frame scrolling="auto" noresize="" marginheight="0" marginwidth="3" target="work" src="about:blank" name="work"></frame>
</frameset>
</frameset>
</html>
I tried this:
menuPage = (HtmlPage)page.getFrameByName("menu").getEnclosedPage();
But what I get is
<?xml version="1.0" encoding="ISO-8859-1"?>
<html>
<head/>
<body/>
</html>
I tried different other odd thing but never succeed to get the content of the frame.....
If somebody have already done this I will be happy to get some clues..
Ok, I found it eventually. The javascript was loading. But besides and most important I was not accessing correctly the frame content. So By looking deeply in the dom with firstchild and sibbling I arrived to see what I was looking for. So the first code working is the following and need some tweaks:
HtmlElement frameset1 = page.getBody();
node = frameset1.getFirstChild().getNextSibling();
HtmlFrame fr1 = (HtmlFrame) node.getFirstChild();
FrameWindow fw1 = (FrameWindow) fr1.getEnclosedWindow();
HtmlPage p1 = (HtmlPage) fw1.getEnclosedPage();
Thanks for your time
I have the following code, where a button has four resizers. When I use the top left resizer for example, it button shrinks from the bottom right, as opposed to shrinking and moving so that the top left corner follows the cursor. I've looked in Mozilla's docs and on Google, and tried adding custom on mousedown event handlers to move the thing around - but to no avail. How do I make this behave correctly?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://ades/content/main.js"/>
<hbox>
<stack style="padding: 0;">
<button id="b" label="Resizable" style="margin: 0;"/>
<resizer dir="topleft" style="background: red; -moz-appearance: none;"
element="b" left="0" top="0" width="5" height="5" />
<resizer dir="topright" style="background: black; -moz-appearance: none;"
element="b" right="0" top="0" width="5" height="5"/>
<resizer dir="bottomleft" style="background: black; -moz-appearance: none;"
element="b" left="0" bottom="0" width="5" height="5"/>
<resizer dir="bottomright" style="background: black; -moz-appearance: none;"
element="b" right="0" bottom="0" width="5" height="5"/>
</stack>
</hbox>
</window>
I'm not sure how to achieve what you want but if you're resizing your button it will always reposition itself in the stack (which is at the beginning of the hbox), so it will always be at the beginning of the hbox. You might try with absolute positioning but I'm not sure if that'll work either.