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']
Related
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
I am having real problem with Arabic text in <pre> tag
For example if I put this code in a page view
<pre>
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
I get this display in browser
Here you can see that the arabic text is reversed
This happens just in ASP.NET Core MVC. In other frameworks, the text is displayed correctly.
I've tried to change the dir and the lang attributes but it does not help.
I copied your code snippet and reproduced the issue in my side, I noticed that the content in the page is wrong but in F12 is right, so I'm afraid the browser deal with specific language content automatically for the elements in <pre> tag... So I tried to change the direction manually with the style. How do you think about it?
<div>
<div>
<div style="direction:ltr;unicode-bidi: bidi-override;color:red">اول صفحة ويب</div>
<span>اول صفحة ويب</span>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</div>
<pre >
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span style="direction:rtl;unicode-bidi: bidi-override;">اول صفحة ويب</span></h1>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
</div>
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>
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.
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellite window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks!
Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW