Selenium "get elements inside another element" in nodejs - node.js

I'm trying to click in the third input box but I can't use a xpath [3] because it's isolated by divs. How can I get the third "div class price filter" and then get the input?
<div class="search-prices">
<div class="search-price-header">
<h1>Bid Price:</h1>
<button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter">
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled" disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="search-price-header">
<h1>Buy Now Price:</h1><button class="flat camel-case disabled" disabled="">Clear</button>
</div>
<div class="price-filter"></div>
<div class="info"><span class="label">Min:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button></div>
</div>
<div class="price-filter">
<div class="info"><span class="label">Max:</span></div>
<div class="ut-numeric-input-spinner-control">
<button class="btn-standard decrement-value disabled"disabled=""></button>
<input type="tel" class="numericInput" placeholder="Any">
<button class="btn-standard increment-value"></button>
</div>
</div>
</div>
I tried something like
var priceFilter = driver.findElement(By.xpath("//div[#class='price-filter'][3]"));
var numericInput = priceFilter.findElement(By.xpath("//input[#class='numericInput']"))
numericInput.click();
But my click always happens in the first input, any idea why?

Try this and let me know whether this works or not.
var numericInput =priceFilter.findElement(By.xpath("(//input[#class='numericInput'])[3]"))
numericInput.click();

Try this xpath: (//div[#class='price-filter']//input)[3]

The xpath that works for me is:
//div[#class='price-filter'][3]//input[#class='numericInput']
thank you guys!

Related

Can't click in input text fields in Bootstrap Modal

I have seen several similar posts to my issue and have tried suggestions but none of them are working and I am hoping that someone can help me. I have a simple modal which contains 2 text input fields. I have a button which user presses to launch the modal - but when modal launches I can't click in either of the fields contained within the form.
My modal is as follows:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="resetModalLabel">Reset Plan Duration</h5>
</div>
<div class="modal-body" style="width: 375px;">
<form>
<p class="text-dark">Modify quantities below to reset plan duration:</p>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Backward:</button>
</div>
<input id="planStart" name="planStart" tabindex=1 class="form-control" type="text" value="3" aria-describedby="prepend" />
</div> <!-- input-group.// -->
<div id="invalidstart" class="invalid-feedback pull-right">You must specify a valid number > 0.</div>
</div> <!-- form-group// -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-info btnPrepend">Days Forward:</button>
</div>
<input id="planEnd" name="planEnd" tabindex=1 class="form-control" type="text" value="2" aria-describedby="prepend" />
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
</form>
</div>
<div class="modal-footer">
<button id="actionNo" type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetPlanDuration('cancel')">Cancel <i class="fa fa-times" aria-hidden="true"></i></button>
<button id="actionYes" type="button" class="btn btn-success" data-dismiss="modal" onclick="resetPlanDuration('reset')">Reset <i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>```
As I said, modal displays fine but I cannot modify values in form fields.

How to access a webpage with body display:none using Selenium Python

I see the following HTML code when I import it from website throught selenium. The ids I want to access are hidden inside the body and I am not able to access them using Selenium Python.
</head>
<!--[if IE 9]>
<body style="display:none" class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body style="display:none">
<!--<![endif]-->
This is the code I see in the website through inspect option.
<form action="" method="post" class="form login col-sm-6 col-sm-offset-3" data-stage="DataStore1">
<fieldset class="row">
<div class="form-group">
<label class="sr-only separator" for="idToken1">
<span>Benutzername</span>
</label>
<input type="text" id="idToken1" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup" class="form-control input-lg" placeholder="Benutzername" autofocus="">
</div>
<div class="form-group">
<label for="idToken2" class="aria-label sr-only separator">
<span>Passwort</span>
</label>
<input type="password" id="idToken2" name="callback_1" class="form-control input-lg" placeholder="Passwort" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="remember-forgot clearfix">
<div class="checkbox pull-left">
<label for="remember"><input type="checkbox" name="loginRemember" id="remember"> Remember my username</label>
</div>
</div>
<div class="form-group">
<input id="loginButton_0" name="callback_2" type="submit" role="button" index="0" value="Log in" class="btn btn-lg btn-block btn-uppercase btn-primary">
</div>
ch license between the licensee and ForgeRock AS.
</fieldset>
</form>
I am using Chrome webdriver.
from selenium import webdriver
driver = webdriver.Chrome(r'C:\WebDriver\bin\chromedriver.exe')
driver.get('https://app.int.eu.acdc.fdc.swarm.audi/goldenalgo#dario/data-distribution')
a = driver.find_element_by_id("idToken1")
a.send_keys(username)
print(w.value_of_css_property("display"))
print(driver.page_source)
time.sleep(5)
driver.find_element_by_id('idToken2').send_keys(password)
driver.find_element_by_id('loginButton_0').click()
driver.close()
driver.find_element_by_id("idToken1") this doesn't work and returns the error "unable to find element with css selector error in selenium".
Thanks in advance

CSS Flexbox RadioButton fields alignment

I am trying to align the fields that are part of radio button. But it's not working.
How can I get all the fields in one line ?
.container3 {
display:flex
}
<body>
Suspension flag
<div class=container3>
<div id="suspy" >
<input type="radio" id="suspension-flag-yes" name = "suspension-flag" value="Y">
</div>
<div>
<label for="suspension-flag-yes"> yes</label>
</div>
<div id="suspn" >
<input type="radio" id="suspension-flag-no" name = "suspension-flag" value="N">
</div>
<div>
<label for="suspension-flag-no"> no</label>
</div>
</div>
</body>

Redirected after submit form Formit Modx

I got redirected after I submit the form, and I want to remain on the same page. I am not sure why I got redirected, I am not using &redirectTo for this.
I try some things but nothing worked till now.
[[!FormIt?
&hooks=`spam,email,FormItSaveForm,successMess`
&formName= `Contact Form`
&emailTpl=`emailChunkTpl`
&emailTo=`email#gmail.com`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<input type="hidden" name="nospam:blank" value="" />
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<span class="error-message error" > [[!+fi.error.input-name]] </span>
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
<span class="error-message error" >[[!+fi.error.input-email]] </span>
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
[[+placeholder]]
</div>
</div>
</from>
As in my answer on your other post, you should remove all the hooks and try one at a time (after you've cleaned up the markup for this form).
And what is successMess? Is that a custom snippet you've made? It's not a Formit hook that I have heard of. If it's your custom snippet you should paste the code into your question so we can see it.

How can I extract the text from a div tag with style attribute set as "display: none;" through selenium

My html looks like this:
<div class="row">
<div class="col-md-7">
<ul class="breadcrumb">
<li id="get_data">Get data</li>
<li id="sampling_task">Sampling</li>
<li id="confirm_task">Confirmation</li>
</ul>
<div class="container-fluid">
<form action="#" method="post" enctype="multipart/form-data" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_fileA" class="col-sm-3 control-label" style="text-align: left">
Select dataset A<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileA|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label for="id_fileB" class="col-sm-3 control-label" style="text-align: left">
Select dataset B<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileB|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group" id="sample_btn" style="display: none">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="button" name="theButton" id="sample-step" value="Start Sampling" class="btn btn-success btn-large disabled" style="border-radius: 5px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="sample_msg" style="display: none;">
<p id="sample_text" style="font-size: medium">
Some ABCD message
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="get_sample_confirm_msg" style="display: none;">
<p>
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="YesButton" id="accept-step" value="Accept & Continue" class="btn btn-success disabled">
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="NoButton" id="cancel-step" value="Cancel Sampling" class="btn btn-danger disabled">
</p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-5">
</div>
</div>
The backend is a javascript and on button click, it do processing and if something fails the javascript code update the message.
var error = "<div class='alert alert-danger'><p>We encountered an error while sampling: <br /><strong>Sampling failed!!</strong></p>"; error += "<p>Please <a href='mailto:abcd#gmail.com'>contact us</a> if this error persists.</p>";
error += "</div>";
$('#sample_msg').html(error);
Now, in my selenium code if I do this:
sample_msg = self.driver.find_element_by_id('sample_msg')
I get an empty list result. What I want is to do is read the error in the "sample_msg" class if any and I have tried few things but its not working out. Help is appreciated. Thanks.
If you want to get access to hidden text you might need to use below code:
sample_msg = self.driver.find_element_by_id('sample_msg').get_attribute('textContent').strip()
Note that text property allows to get text from visible elements only
As you are trying to extract the error message Some ABCD message it is contained within a <p> tag which have parent <div> tag with style attribute set as display: none;. So to extract the text you can use the following code block :
element = driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
print(driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']/p").get_attribute("innerHTML"))
So, you have to wait for sometime after clicking the button and once some message appears then you need to extract that message.
Try below:-
WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id));
or
wait.until(ExpectedConditions.elementToBeClickable(By.id));
to be precise.
See also:
org.openqa.selenium.support.ui.ExpectedConditions for similar shortcuts for various wait scenarios.
org.openqa.selenium.support.ui.WebDriverWait for its various constructors.
You can check the python syntax also on the above links.

Resources