I have a page which appears with some pre-filled data in input boxes. I want to select the input box which has my desired content, based on the content itself. This content isn't part of page HTML, but rather appears as value attribute in the element properties.
I have written a simple HTML file (test.html) to demonstrate the problem:
<!DOCTYPE html>
<html>
<head>
<title> Hello </title>
</head>
<body>
<div id="test">
<input type="text"> <br> <br>
<input type="text"> <br> <br>
<input type="text"> <br> <br>
</div>
<script type="text/javascript">
let input_nodes = document.querySelectorAll("input")
for(var i = 0; i < input_nodes.length; i++) {
input_nodes[i].value = 'value_' + i;
}
</script>
</body>
</html>
On this page I want to select the element with entered value as value_1. It doesn't appear in page HTML, but can be seen in element properties.
Using test.html file in my local, I could see 3 input box in UI
As you can see this xpath
//div[#id='test']//input[2]
represent the node that you've been looking to do send_keys
Try this:
String preFilledValue = "value_1";
List<WebElement> elements = driver.findElements(By.xpath("//div[#id='test']/input"));
for (WebElement ele : elements) {
if (preFilledValue.equals(ele.getAttribute("value"))) {
System.out.println("Element found");
}
}
}
Related
I'm getting HTML template response from API service, in that sometimes I'm getting link and its href value is empty string(but innerText has some value),
Can anyone help me how can I hide the anchor tag if only text is present and href is empty.
Sometimes HTML response provides multiple empty links, give solution to hide all the empty links.
<div class="hyper-btn">
User Profile
</div>
To hide anchor tag, by using CSS will hide the elements from document.
<!DOCTYPE html>
<html>
<style>
.hyper-btn a[href=""] {
display: none !important;
/* will hide all the empty anchor tags */
}
</style>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
</body>
</html>
To remove anchor tags from DOM itself, add below JavaScript
<!DOCTYPE html>
<html>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
<script>
const linkList = document.querySelectorAll('.hyper-btn a');
linkList.forEach(element => {
const targetURL = element.getAttribute('href');
if(!targetURL) {
element.remove(); // will be removed from DOM
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- $("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
}); -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'+post_id.value>Click to redirect</a>
</body>
</html>
How to create a link incorporating user input from the input box
I'm trying to attempt a similar mechanism but as I'm too new to HTML, I'm unable to quickly club it with jquery.
Appreciate any help! Thanks!
My sample query - https://www.w3schools.com/code/tryit.asp?filename=GPZYOB9C4JFW
When I initially tried this approach the url generated had [ input object HTML ] something like this instead of the user input string.
You need to put the jQuery code inside a <script> tag after the one that ooads the jQuery library.
Also put the code inside $(document).ready() so it runs after the HTML is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input#post_id").on("change", function() { // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
</head>
<body>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'>Click to redirect</a>
</body>
</html>
You just need to have <script> tag and jQuery document ready tag $(function() { to make it work.
<script>
$(function() {
$("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
edit: I can only access to the html of the div with the id
I want to do something similar to this but i can't access to css file due to my companies setup. I need to do this from HTML without css
<html>
<head>
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
"I need to do this from HTML without css"
I'm assuming for some reason you cannot use style blocks <style></style> in your html, e.g. in some email contexts.
You can overcome this by using inline style style="background-color:yellow;"
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input style="background-color:yellow;">
</div>
</div>
</div>
</body>
</html>
Edit based on Javascript
"thanks but I can only edit the html of the div with the id"
So this is the javascript that you can insert into the html code.
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
<html>
<head>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
If you are inserting into the html text directly, you need to put them within the <script></script> block before adding them at the bottom of the html just before </body>:
...
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
</body>
There are a few different ways you can handle this, but it kind of depends on what you mean by saying you can't use CSS. The HTML is pretty much always styled with CSS. But you can add CSS a few different ways.
Inline style: This is what I suspect you might need. Place a style attribute in the div and provide it with the appropriate directions. Example:
<div id = "fileView_ctl01_D_STRT" style="background-color: yellow;">
An internal stylesheet: As you've demonstrated above, you can embed an internal stylesheet.
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
Javascript: Finally, you can control styles with Javascript. You have to grab the element you want to style, for example, with the id you've assigned, and apply a style to it. Just as chatnoir has demonstrated:
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
This code can be in a separate, external file that you call to in the HTML via the "src" attribute.
Without CSS, you're pretty much limited to this stuff: https://stackoverflow.com/a/21951731/7055314.
I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.
This is what I have before that div is clicked:
<div>This is the content.</div>
I wan this to become the following when it's clicked:
<input>This is the content.</input>
And to change back when the user clicks elsewhere.
Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.
Any help is appreciated.
Try this
<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>
and controller has function like
function cntrl($scope){
$scope.showInput = false;
$scope.toggleShowInput = function()
{
$scope.showInput = !$scope.showInput;
}
}
If you use Angular, you should write both element and toggle one for the other when the user click :
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
<input ng-show="inputIsOn" type="text">
</body>
</html>
Nope, but the good news is that you don't need that to happen!
In your controller:
$scope.showInput = false;
$scope.myContent = "This is the content";
Back in your HTML file:
<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />
Now when the button is clicked, the input field will display, but the text will not.
I have a HTML file like this:
<html>
<head>
<title>Test</title>
<script language="javascript">
function removeElements() {
alert( document.getElementById("FileArea").innerHTML );
var RemoveElms = document.getElementsByTagName("p");
for (i = 0; i < RemoveElms.length; ++i) {
var newelm = document.createElement("SubScript");
newelm.innerHTML = "1";
RemoveElms[i].parentNode.insertBefore(newelm, RemoveElms[i]);
}
alert( document.getElementById("FileArea").innerHTML );
}
</script>
</head>
<body id="BodyID">
<h2>Test</h2>
<input type="button" value="Remove elements" onmousedown="removeElements(); return false" unselectable="on">
<div id="FileArea"><p>Here is a test</p></div>
</body>
I am trying to add an element <SuperScript>. In the alert all the characters of this element changed into lowercase <superscript>. Can I control this? This is mainly happening in Chrome.
Chrome parses all elements and adds them to the document in an uniform way. This also happens with newlines and such.
See this: Case conventions on element names?