How to check the checkbox based on the Text value.
1. Text Value is dynamic and is separated from check box.
2. I need to check the checkbox only if that text is present.
Here is the HTML code:
<input type="checkbox" name="_Adjustment3" headerid="226849" detailid="380105" onchange="enableDisableAmountBox(this)" class="ace" xpath="1">
<span class="lbl" xpath="1">
<a href="#"/>
</span>
</td>
<td xpath="1">AutomatedSchedule$03/04/2019, $, $, $, $</td>
<td xpath="1">10000</td>
I want to check the check box based on text (i.e., AutomatedSchedule$03/04/2019, $, $, $, $)
I Presume the text AutomatedSchedule is constant and rest of the text is getting change.
In that case use contains and look for sub-string in side td tag.
identify the td tag with text contains AutomatedSchedule.
then use preceding-sibling td which contains input checkbox.
use Wait Until Element Is Visible.
Then click on the element.
Wait Until Element Is Visible xpath://td[contains(.,'AutomatedSchedule')]/preceding-sibling::td[1]/input[#type='checkbox'] 10
Click Element xpath://td[contains(.,'AutomatedSchedule')]/preceding-sibling::td[1]/input[#type='checkbox']
Related
I write a text in text area box but what I write is not showing via inspect element. Please help I want it show what I write in text box when I inspect element it.
<div class="F0XO1GC-j-k">
<label for="gwt-uid-4809"> Write an invitation message </label>
<textarea class="gwt-TextArea F0XO1GC-Nb-g" rows="10" id="gwt-uid-4809" dir="ltr"></textarea>
<div class="F0XO1GC-Nb-o" aria-hidden="true" style="display: none;"></div>
<div class="F0XO1GC-b-S F0XO1GC-Nb-f" style="display: none;" aria-hidden="true"></div>
<div class="F0XO1GC-b-Db"> The group's name, description, and address will automatically be included in the email. </div>
</div>
I expect it to show value when I inspect element it.
Your expectations are wrong. This is normal behaviour.
The content of the textarea element is the default value of the field (used to initially populate the field and set its value when a reset button is activated).
The value you type into it is the current value.
The DOM inspector shows you the content, so it shows the default value.
When you submit the form, or read its value property with JavaScript, you will get the current value.
In the following,
<section id="section2" class="MightChange1 MightChange2">
<div id="dynamicIdxxx" class="dynamic1 dynamic2 dynamic3">
<div id="againDynamic" ..>
<div id="someDynamicCanBeRelayed" class="xyz">
<button id="dynmaicBtnxx" class="Cannot be relayed">
<span ....>
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
How to select the span (with id=dynamic23) using text of bdi (which INTEGER changes).
I could write like following
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button")
The challenge is, sometimes below
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
will be changed to (without bdi tag)
<span id="dynamic23" class="PartOfDoesntChange"> show INTEGER more details <span>
One option to handle is I can use two xpath's with and without bdi using selenium OR conditions. Either way, I would get the result and use that element.
Is there any better alternatives for such scenarios or by using css selectors?
try this simple one //span[contains(., 'show INTEGER more details')], Don't replace the . to text(), otherwise it will only match one element
You can use UNION operator |. See my example below.
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button") | //*[#id='section2']//span[contains(text(),'more details')]/ancestor::button")
To select the span element using the text show INTEGER more details you can use the following xpath :
//button[#id='dynmaicBtnxx']//*[contains(.,'show INTEGER more details')]//preceding::span[1]
Note : Seems values are dynamic so you may have to induce WebDriverWait for the element as well.
This might help:
.//*[contains(., 'show INTEGER more details')]/ancestor::button[starts-with(#id,'dynmaicBtn')]
The * (star) at the start will select the tag with your required text whether it is span or bdi. Ancestor will select a button whose id starts-with your text followed by changing int's.
I'm facing a small problem regarding Knockout JS databind on a span. I want to bind a number alongside a percentage symbol. My original HTML markup is this one:
<span>10</span><span>%</span>
Then, I'd try to make the number dynamic with the following expression (I'm forfeiting the JS as it works corrctly and I don't think it's necessary for my case):
<span data-bind="text: cartTotalPrice" /><span>%</span>
Misteriously, the that contains the % symbol disappears, only displaying the binded number. But then if I do the following, the number and the symbol are correctly displayed:
<span data-bind="text: cartTotalPrice() + '%'" />
Why does this happen? Is it normal?
Thanks.
I believe the problem is that you are not closing your span tag. Use an explicit closing </span>.
<span data-bind="text: cartTotalPrice"></span><span>%</span>
I have this label and checkbox
<label><input type="checkbox" id="SameAsPrimaryAddress" />Same As Primary Address</label>
Is there a CSS selector that will only affect the label text and not the checkbox or do I have to separate my label from the input or give the label an ID or class to be able to do this?
It depends
In that case and if you only need that HTML, you can.
But
It is better to wrap your text with a span or a div to avoid problems you can encounter.
Here's a demo
http://jsfiddle.net/6aS4k/
Then you can add style with label span {}
Your answer: No. There is no selector to only target the free floating text of an element, without affecting the inherited properties of other elements within. To explicitly style your text, you would actually want to wrap your text in another element to target in your CSS, like a span.
However, in your specific case, that checkbox does not have many (if any) inherited properties in most browsers default stylesheet. So, a long as you aren't using a reset stylesheet or otherwise normalizing that input to inherit style properties you could get away with styling the label to affect only the text.
In the end, I would recommend that your label should actually correspond to your input separately, which would also semantically make sense. This would also allow you to make use of the for attribute, which will allow clicking on your label to toggle the corresponding checkbox as well, which is a win for usability!
<div>
<input type="checkbox" id="SameAsPrimaryAddress" />
<label for="SameAsPrimaryAddress">Same As Primary Address</label>
</div>
I have found an example in the net where the label tag and its 'for' attribute were used to hint the browser to which control the label belongs to. E.g:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
My question is if I actually have two controls where the same single label should be assigned to the combination of both (not to each one, if possible), eg:
a label text + a numeric input field + a text (unit) input field
Should I
assign the label only to the numeric input field (because it can't be done) or
is it possible to put the numeric and text input field into a single span tag and attach the label to that span?
or can both input controls be placed inside the single label tag?
Which solution will work for accessibility on all browsers?
The for attribute of labels can indeed be used with any element (so long as the ID matches) but only for a single element. Additionally, it really only makes sense for form elements.
From the spec:
for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
And:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element.
(emphasis mine)