Get selected content in a number input when click - input

I guess is not too much difficult but your help will be useful as always.
I had before a text input where the user if click in it select all the content from this input to be able to replace faster his content like in the next example:
<input type="text" value="whatever" onclick="this.setSelectionRange(0, this.value.length)">
So, my question will be, how can I do the same behaviour in a numeric input like the next one?
<input type="number" value="1111">
I tried to add obviously this onclick="this.setSelectionRange(0, this.value.length)" but seems only to work on the text inputs.

Actually, was easy.
I found this solution that works good.
<input type="number" value="111" onclick="this.select();">

Related

How to use scriptAll to grab all values when the intended value is not text type

I have a page with multiple textboxes and dropdowns with values that I am trying to validate. The values in them will be dynamic in each run.
The HTML looks something like:
<input readonly="readonly" class="form-control valid" data-val="true" data="ABC" aria-invalid="false" xpath="1">
What I want to do is grab the value of "data" for each textbox. I have used scriptAll before in such a case when I was grabbing text by using innerText. However, that won't work with a regular value such as in the HTML above.
I did try one solution that worked:
driver.value(//input[#data])
However, that just grabs the first textbox value, is there a way I can combine scriptAll with driver.value? OR would I be better off doing some JS here?
Thank you in advance!
Yes, refer the docs for scriptAll(): https://github.com/karatelabs/karate/tree/master/karate-core#scriptall
Use whatever JS works to get an attribute value. Haven't tried, but this should work, you get the idea:
* def list = scriptAll('input', "_.getAttribute('data')")

KarateUI - Finding inputs by placeholder attribute

I've been having trouble around finding elements by attribute/property. Following UI visible example:
<input tabindex="0" placeholder="www.stuff.com/example" type="text" id="sub-selector-37" class="form-control" value="">
The unique piece is the placeholder text.
I've tried the following:
And waitFor('input[placeholder=www.stuff.com/example]') - Error
And waitFor('input[placeholder="www.stuff.com/example"]') - Error
And waitFor('input[placeholder='www.stuff.com/example']') Finds nothing
Also tried a more direct input approach:
Then waitFor('{}Something else')
Then input('input[placeholder=www.stuff.com/example']', 'Stuff')
I'm hoping this is just good old PEBKAC on my part. Any suggestions would be greatly appreciated.
Here you go, use double-quotes and nest single-quotes:
And waitFor("input[placeholder='www.stuff.com/example']")
A tip: use the debugger and you can experiment with things like highlightAll('input') and narrow down what works: https://twitter.com/KarateDSL/status/1252817691963830272

Experience Editor input with placeholder rendering issue in Sitecore

this issue happened when a input DOM with placeholder in Sitecore Experience Editor, does someone know how to solve this?
<div class="form-group">
<input class="form-control" placeholder="#Html.Sitecore().Field("Placeholder_Test")" value="123" />
</div>
Thanks
When Sitecore renders #Html.Sitecore().Field in Experience Editor mode, it adds extra html layout around the field value to allow content authors to edit the text.
So your generated output is something like that:
<input class="form-control" placeholder="<code attr="blah">aa</code><span>this is a text</span>" value="123" />
As you can see, this is not a valid html. And that's why you see incorrect output in Experience Editor.
What it means? That you cannot edit attributes of inputs inside Experience Editor using #Html.Sitecore().Field.
The simplest solution is to just render the value there, like (replace Sitecore.Context.Item with your datasource if needed):
<input class="form-control" placeholder="#Sitecore.Context.Item["Placeholder_Test"]" value="123" />
And to use Edit Frame to allow editing the placeholder text ( https://www.google.com/search?q=sitecore+edit+frame )

Can't select label by text when label contains more than text

I am driving myself bonkers with this.
I have three form fields in a form:
Customer: required dropdown field
Weight: required text field
Status: optional text field
Each element has that label. The required fields' labels contain a span with an asterisk.
I'm using Xpather in Chrome. When I search for this, I receive 2 results, when I should get 3:
//*[contains(text(),'t')]
This makes no sense to me At All.
Customer, which is working:
<label for='customer-field'>
<span class='required-marker'>*</span>
Customer
<input id='customer-field' type='text' />
</label>
Weight, which is not working:
<label class='control-label'>
<span id='ctl01_requiredMarker' class='required-marker'>*</span>
Weight
</label>
Status, which is working:
<label class='control-label'>
Status
</label>
The only workaround that works for me is removing the required marker from the Weight label container. However, that doesn't explain how "Customer" gets matched at all.
Noteworthy: I'm trying to automate testing this page, so I can't really remove that span tag.
What's going on? And/or what do I do?
Try changing your XPath to the following:
//*[text()[contains(.,'t')]]
The source of this fix breaks it down far better than I could've done, so refer to that for detailed explanation! I've tested it myself using the XPath Checker extension for Firefox, and it matches your three items.
Try with the below method
driver.findElement(By.xpath("//span[#class='required-marker']/..")).getText().contains("Weight")
Please Let me know above method is working or not.
I think your html is where the issue lies.
This is probably what your html should look like:
<span class='required-marker'>*
<label for='customer-field'>Customer</label>
<input id='customer-field' type='text' />
</span>
<span id='ctl01_requiredMarker' class='required-marker'>*
<label class='control-label'>Weight</label>
</span>
<label class='control-label'>Status</label>
Are you using Selenium or WebDriver? What does WebDriver return as a response? Also make sure you add a "." before the xpath like .//*[contains(text(),'t')]
What does this print?
List<WebElement> elements = driver.findElement(By.xpath(".//*[contains(text(),'t')]"));
s.o.p(elements.size());

How to identify in selenium IDE an input followed by a label?

I have to identify a check-box using the label which follows it.
the code is the following:
<input type="checkbox" checked="" value="1" id="email-100-100" name="email-100-100">
<label for="email-100-100" class="firefinder-match">Email me when someone asks me to set a flag</label>
<br>
</td>
I tried
Target://following-sibling::label[text()="Email me when someone asks me to set a flag"]
Target://preceding-sibling::label[text()="Email me when someone asks me to set a flag"]
but in both cases selenium finds the text of label but not the check-box.
Could somebody help me in this?
Thank you in advance
Try
Target://label[text()="Email me when someone asks me to set a flag"]/../input[#type='checkbox']
It will work as long as the containing element of the label and checkbox only has one checkbox in it.
You can also find a label that contains text, which is useful for a partial match. In my case I had something like this:
<label for="blah">
<input name="blah" id="blah" type="checkbox" />
Store Locator Plus
</label>
The accepted solution worked for the specific example cited but requires an exact match. Since this comes up on the top of search results I figured I'd present the partial-match solution here as well.
For Selenium IDE you can set a target like this:
//label[contains(text(),'Store Locator Plus')]//input[#type="checkbox"]
The contains function was required because the label text had an HTML element as well which thwarted the //label[text()='Store Locator Plus'] target.