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.
Related
I have an assigment, I don't understand it as i'm beginner.
Create a javascript script which will modify the DOM of a web-page.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?".
Thank you in advance.
I need to use only Javascript for this and I can only find answers
that use HTML
Web applications use HTML to contain, render and display elements in the viewport (browser window).
Where do you intend to render the form and capture user input?
You can build the DOM structure using JavaScript alone, however, there will still be a HTML file, which will contain the HTML elements created using javascript.
Please provide clarity as to your desired goal and what type of application this is being used for.
My gut feeling, for simplicity, is that you will require to use HTML as your template file, and JavaScript for interactivity and manipulation of the HTML file.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?". That's it.
This is a start, just to try to help you to understand the concepts.
I do, however, implore you to go and explore with confidence - you won't break anything, just give it a try!
I recommend you try taking a look at some of these articles, have a look at my (very rudimentary) code below, and feel free to ask any questions you have!
JS:-
W3 Schools JS and HTML reference
HTML:-
W3 Schools: HTML Forms
W3 Schools: Label Tag
W3 Schools: Text Area Tag (This has been left out of the solution on purpose - give it a try!!)
(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class??
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="Mickey Mouse">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="mickey#mouse.co.uk">
<br><br>
<input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
</head>
<body>
</body>
</html>
I'm trying to send keys to the following textarea html using python selenium:
<div class="spk-c spH-d"><div id="gwt-uid-23" class="sppb-a">
<div class="sppb-b spk-b">For example, flowers or used cars</div>
<textarea rows="2" aria-labelledby="gwt-uid-64 gwt-uid-23" id="gwt-debug-keywords-text-area" class="spk-a sppb-c">
</textarea>
</div>
<div role="alert" class="error" style="display:none"> Input contains a keyword that is too long. </div> <div class="error" style="display:none">Your product or service description can't exceed 1,000 words. Remove some words and try again.
</div>
</div>
and I get this error:
selenium.common.exceptions.ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with
Stacktrace:
here is my code:
textarea='textarea[id="gwt-debug-keywords-text-area"]'
element = WebDriverWait(driver, 15).until(lambda driver : driver.find_element_by_css_selector(textarea))
driver.find_element_by_css_selector(textarea).send_keys('plumbers')
Can you please help me out? It's been bugging me for a while. The html is from google keyword planner.
Thank you
You can use expected conditions to wait for the text box visibility
WebDriverWait(driver, 15).until(expected_conditions.visibility_of_element_located((By.ID, 'gwt-debug-keywords-text-area'))).send_keys('plumbers')
Edit
You need to switch to the iframe with the textarea in order to interact with it
# by the frame id attribute
driver.switch_to.frame(id)
# by the frame name attribute
driver.switch_to.frame(name)
# by the frame webelement
frame = drive.find_element(...) # locate the frame
driver.switch_to.frame(frame)
And to switch back
driver.switch_to.default_content()
The problem may not be with your selenium code, but the workflow for using the tool. I am not familiar with this adwords keyword planner, but when I did a Google search for the id of that text area and selenium, I came across some github code that looks like it is enabling the text area first:
browser.find_element_by_id("gwt-debug-splash-panel-find-keywords-selection-input").click()
browser.find_element_by_xpath("//textarea[#id='gwt-debug-keywords-text-area']").send_keys(keyword)
Try to use JS code to make element visible before sending text:
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').style.visibility = 'visible';")
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').style.display='block';")
Let me know if any exceptions occurs
UPDATE
If you want to send text to text area using JS you might need to execute following:
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').innerHTML='Here is some text';")
or
driver.execute_script("document.getElementById('gwt-debug-keywords-text-area').value='Here is some text';")
I enter the text into test area and save then I click on Edit button now i have to remove the text from textbox.
I am getting error when i execute the below command for clearing textbox.
`Execute Javascript window.document.getElementByName('resolution').value='';`
HTML:
<span class="textarea-text edit" sfuuid="1832">
<textarea class="input-xlarge wide tleft" name="resolution" cols="" rows="">test</textarea>
<p class="help-block"></p>
</span>
Here you have a textarea tag not a input tag with value attribute. You can clearly see that your textarea. Doesn't have a value attribute. The text "test" is the innerHTML of the element so try setting the innerHTML
LIKE
document.getElementById("").innerHTML=' '
Names are not necessarily unique. Thus, there is no getElementByName method. It is getElementsByName (note the plurality). If you want to just try your operation on the first element found in the DOM with that name, change your code to:
Execute Javascript window.document.getElementsByName('resolution')[0].value='';
Note that it is not necessary to use JavaScript to accomplish this either. Instead, you could do:
Input Text name=resolution ${EMPTY}
I have a web application which replaces content. This content has jquery ui check buttons. When I replace the content if a button already exists then don't add it again:
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
If I push the button (its state is checked) and if I replace the content, the button starts locked until the same content is replaced again.
I use Backbone.js to replace the content
jsfiddle
How can I unlock the check button?
You are duplicating id attributes and that leads to bad HTML, bad HTML leads to frustration, frustration leads to anger, etc.
You have this in your template that you have hidden inside a <div>:
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
Then you insert that same HTML into your .content-central. Now you have two elements in your page with the same id attribute and two <label> elements pointing to them. When you add the jQuery-UI button wrapper, you end up with a slightly modified version of your <label> as the visible element for your checkbox; but, that <label> will be associated with two DOM elements through the for attribute and everything falls apart.
The solution is to stop using a <div> to store your templates. If you use a <script> instead, the browser won't parse the content as HTML and you won't have duplicate id attributes. Something like this:
<script id="template-central-home" type="text/x-template">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</script>
and then this to access the HTML:
content.view = new ContentView({
model: content,
template: $('#template-' + template_name).html()
});
Demo: http://jsfiddle.net/ambiguous/qffsm/
There are two quick lessons here:
Having valid HTML is quite important.
Don't store templates in hidden <div>s, store them in <script>s with a type attribute other than text/html so that browser won't try to interpret them as HTML.
I took a detailed look at your fiddle after you mentioned this problem. The solution I suggested here was more like a quick fix.
If you want to follow the right thing to avoid long term problems and side effects you should consider what is mentioned here. This way your problem is solved and there are no other bugs.
I am creating a html document for class and there is an example in my notes that is very similar to what I have to do it has First Name, Last Name, and Phone Number, my question is what does this line of code mean? There is a .addphone in style but the code on the bottom only applies to phone why not first name or last name?
<!-- <div class="addphone" onclick="addPhone();">Add Phone</div> -->
<input id="adduser" type="submit" value="Add User" style="margin-top: 25px;">
</div>
The first line of code is an example of a clickable element. In this case has been commented out, meaning it will not be rendered in the browser.
For example:
<!-- Anything written here won't affect the page -->
Is it possible this line, plus the line in your stylesheet, are examples on how to write your other fields for your assignement?
Why not first name or last name?
I guess it's because your 'user' can have more than one phone, but not more than one first name or last name. This isn't really a programming question then though, is it?!
It's never good to put an onclick() event handler on a div element. It also looks like the div has been given a class for styling to make it look like a button or link. Well, if you need a button, or link, then use a button, or link. That way, keyboard support is automatically included.