Develop Reference

How to click on an element generated by javascript using selenium

I'm trying to make a bot that creates accounts for me, but I can't interact with the element where I need to send my credentials.
All I know is that the element that I'm trying to interact with is generated in javascript, after clicking on another button. I found multiple answers but all were in others languages than Node.js.
I'm trying to send credentials on this element:
<input type="text" name="pseudo" id="pseudo" placeholder="Mon pseudo légendaire" style="margin-bottom: 10px;" maxlength="10">
I tried to use this:
driver.findElement(By.xpath('//*[#id="pseudo"]')).sendKeys('CREDITENTIALS')
Which returns me this error: Webdrivererror: element is not visible.
HTML element code looks like this :
<input type="text" name="pseudo" id="pseudo" placeholder="Mon pseudo légendaire" style="margin-bottom: 10px;" maxlength="10">
The problem is not that i have to wait until the element that im trying to interact with is displayed because it is already displayed, the problem is that i want to click on the second element that match with my findElement by xpath, because what im trying to click on is existing 2 times in the html code and only the second one is interactible.
Update (from the comments)
This element is within the following <div> tag:
<div id="modal_message_wrapper" class="block_scrollable_wrapper scrollbar-light yellow noise inscription">

You can construct an unique xpath clubbing up the id, name and placeholder attribute as follows:
driver.findElement(By.xpath("//input[#id='pseudo' and #name='pseudo' and #placeholder='Mon pseudo légendaire']")).sendKeys('CREDITENTIALS')
Update
As you mentioned that the desired element is within:
<div id="modal_message_wrapper" class="block_scrollable_wrapper scrollbar-light yellow noise inscription">
So you can use the following line of code:
driver.findElement(By.xpath("//div[#class='block_scrollable_wrapper scrollbar-light yellow noise inscription' and #id='modal_message_wrapper']//input[#id='pseudo' and #name='pseudo' and #placeholder='Mon pseudo légendaire']")).sendKeys('CREDITENTIALS')
Note: It's quite evident the element is within a Modal Dialog Box, so definitely you have to induce a waiter in the form of WebDriverWait before you attempt to send any character sequence to the <input> element.

How can I get dynamically input field id in jquery on button click and save to another button.

I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.

Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.

webBrowser.document cannot find element

Hello All
Before write this post I read and tried this:
Null Value from GetElementById using C#
How to getelement by class?
C# get element by name
and more.
So
1. I have control on form webBrowser1
2. webBrowser1.Navigation("my url").
3. Check that webBrowser1.ReadyState == WebBrowserReadyState.Complete.
4. After this I tried find element that in i.e. looks like:
<div class="button" style="float: right;">
<input name="uc_InvoiceLines$btnBook" tabindex="5030" class="btnBook btn"
id="uc_InvoiceLines_btnBook" onclick="javascript: return
ValidationOnBooking('You are about to book the invoice. Do you want to
continue','Invoice lines');" type="submit" value="Book">
</div>
5. foreach (HtmlElement ch in webBrowser1.Document.All)
i cannot see this element in .Inner/Outer HTML/TEXT
6. I guest this element has been created by js but don't understand why I can see it in i.e. explore and cannot find in webBrowser1.Document.All?
Anybody can help me to find this "Fantom"?

"So it is on different document. If cross domain iframe and this framed page doesn't handle post message API, you cannot access it. Otherwise read one of the many dupe: stackoverflow.com/questions/1088544/… or stackoverflow.com/questions/9393532/cross-domain-iframe-issu‌​e etc... – A. Wolff "
Thank you very much it's correct answer.

How can have an ng-if two way conditionality within a button?

I have a button that I would like to not autofocus on a textfield if the browser is Internet explorer. There are other ids and various things in the button element I didn't include. I know I could include two separate ng-if statements and repeat both pieces of button classes from the outside, one with and one without forcefoucus.
Is there a possible way of putting the ng-if inside the button tag so I wouldn't need to repeat the other stuff in the button tag?
Non IE
<button type="button"
otherStuff
ng-click="doStuff(); forceFocus('currentPassword')"
</button>
IE
<button type="button"
otherStuff
ng-click="doStuff()"
</button>

in your forceFocus function add one more parameter: isInternetExp. So that you can return false if isInternetExp value is true
forceFocus('currentPassword', isInternetExp)

Dynamically add <div> inside <input>

I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.

input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.

A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.

You can't add div inside of input element (unless you want it in input's value).

No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.

Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.