I got a web page which has other Html code within itself. The problem is Selenide/Selenium can access only outer html but can't reach the inner one. Is there any trick which let me reach inner input element?
The html code looks like this:
<!Doctype html>
<html>
...
<div>
<iframe>
#document
<!Doctype html>
<html>
<div>
<input class="text-area">
</div>
</html>
</iframe>
</div>
...
</html>
While debugging my test I always get ElementNotFound exception using those locators
$x("//input") or
$("input.text-area")
The problem was with Iframe tag on the page. I've managed to switch to it and get my elements within
Related
I'm trying to do something as simple as changing the text in my <p> tag from "hello" to "goodbye: but I can't get it to work.
Here is my html
<body>
<div id="passwordBox">
<!-- <div id="title">
<span>PASSWORD GENERATOR</span>
</div> -->
<p id="password">Hello</p>
</div>
</body>
here is my js
document.getElementById('password').innerHTML = "goodbye";
My js is linked correctly in my head. Other functions that I had in there were working correctly. So I'm wondering what the issue is. I'm sure it's something simple that I am just not seeing but I can't figure it out.
HTML execution happens top-down. HTML calls each script it finds while parsing the HTML document. Since you placed your script in "head" the script gets called immediately. When the script is called, your DOM is not yet ready and your script accesses your DOM element returning a null. So load the script after your DOM is loaded completely ie., after body or just before ""
So the ideal code should look like:
<html>
<body>
<div>
<p id="password">Hello</p>
</div>
</body>
<script>
document.getElementByID("password").innerHTML="goodbye";
</script>
</html>
Or you can still load your script from the head, but just add a button along with event listener (onClick) which calls the JavaScript function when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent() {
document.getElementById("demo").innerHTML="goodbye";
}
</script>
</head>
<body>
<p id="password">Hello</p>
<button onclick="changeContent()">Try it</button>
</body>
</html>
Given the following html markup structure:
<body>
<div id=Body>
<div>
<iframe>//Data within iframe is generated dynamically
<html>
<head></head>
<body>
<div id="abcdef">
<div></div>
<div></div>
<div></div>
</body>
</html>
</iframe>
</div>
<body>
I want to access the xpath and CSS Selector for <div id="abcdef"> but I am not able to, as it is referring to the internal <html> tag as different frame.
Using
<body>
<div id="Body">
<iframe>//Data within iframe is generated dynamically
<html>
<head></head>
<body>
<div id="abcdef">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
</iframe>
</div>
</body>
I was able to successfully select that element with:
//iframe//div[#id = 'abcdef']
Try it out here: http://www.freeformatter.com/xpath-tester.html
However, this is not going to work in the DOM, because of iframe security restrictions. This xpath is correct, but you can test in the chrome dev console with
$x("//iframe//div[#id = 'abcdef']")
and see that you do not get any results. When dealing with HTML documents, your browsers are going to restrict your access to iframes, so you will need to actually grab the iframe, read the html, and then search that html. You will not be able to use an xpath or css selector, as far as I am aware, without getting the content of the iframe and then searching through it as it's own document/element.
Grabbing the iframe like below worked,
driver.switch_to.frame(driver.find_element_by_id('frameid'));
To refer more methods,
Here's a link
Switching to frame, enables you to access all the elements directly.
for above example xpath will be:
//*[#id='abcdef']
Say for example this is my html document.
<html>
<head>
</head>
<body>
<div id="1">
</div>
<div id="2">
</div>
<div id="3">
</div>
</body>
</html>
How in VB.net would would i set the webrowser control to scroll automatically or focus on a specific element?
Thanks
HTML ID and Class names can't begin with a digit, so id="1" is invalid.
What happens with the page after it is rendered is the web browser's business. VB.Net is server side code, so you're better off using JavaScript.
<body onLoad='document.getElementById("myDiv1").focus();'>
After reading a little more closely, I see you specified scrolling in a WebBrowser control. Have a look at this answer.
I am trying to insert some MathJax code into a contentEditable div, like so:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script>
</head>
<body>
<div id="editor" contentEditable="true" style="width:400px;height:400px;">
</div>
and the JS
$(document).ready(function () {
$('#editor').focus();
var code = "\\alpha";
var html = '<span id="_math"><script type="math/tex;mode=in-line">'+ code +'</script></span>';
document.execCommand('insertHTML', false, html);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, '_math']);
});
Which renders OK, but once this is inserted, the element freezes and further input is not possible. Can someone point out the problem here.
You need to call MathJax when the content changes. See this fiddle: http://jsfiddle.net/rfq8po3a/ (note, I had to escape the < and > in html).
This was achieved with a few things:
1) move the MathJax logic into its own function, refreshMathJax which will re-populate the tag and code.
2) call this function when first loading the page, and again onBlur.
3) Clear the editable element onFocus. Without this, the editable element can't be reused easily. You can change the onFocus callback function to instead replace the contentEditable html with the original LaTeX content.
I'm trying to use Google's Closure library for the HTML editor. I created a goog.editor.SeamlessField but if I enter a word that is too long for the width, it puts a scrollbar in and covers the text. How do I fix this?
This appears to be happening only in Firefox. Here is some HTML that demos the problem:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='/closure-library/closure/goog/base.js'></script>
<script>
goog.require('goog.dom');
goog.require('goog.editor.SeamlessField');
</script>
<script>
function init() {
var d = goog.dom.getElement('div1');
var f = new goog.editor.SeamlessField(d);
f.makeEditable();
}
</script>
</head>
<body>
<div style='width:150px;'>
<div id='div1'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<button onclick='init();'>Create editor</button>
</body>
</html>
DOM fragments generated by this SeamlessField component differ for Chromium and Firefox. The former gets an classic div element, the later issues an iFrame. The scheme has something to do with how Firefox handles content-editable elements. By styling the iFrame, you should be able to avoid the scrollbar.