I have to click on element whose Id is changeable,means dynamic value assign to text box everytime . I have to insert value in text box.
Following is the inspect element code of text box
<div class="invoicing-details">
<div>
<label for="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca"> To </label>
<input id="PaidToContactID" type="hidden" value="" name="PaidToContactID">
<div class="controls">
<input id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca" type="hidden" style="display:none;" value="" name="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca">
<input id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" class=" autocompleter field " type="text" style="width:127px;" tabindex="10" value="" maxlength="255" name="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" autocomplete="off">
<div id="PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_suggestions" class="autocomplete" style="display: none; height: 200px; width: 200px;"> </div>
<script type="text/javascript">
</div>
</div>
"PaidToName_b62b89226e5f4fcbb74d0d27a9db88ca_value" this is text box id.
I used following code
self.set_text_value('div.invoicing-details input' ,"my value",true)
but it does not work and getting syntax error.
Can anyone help me and provide syntax how to write ruby script for seleinum.
Dynamic ids very bad for automation. You can try to add other property to input element with stable name. As i clearly understood you need to click on element and then input text in it?! I'm not good at ruby, but i think this should look like:
element = driver.find_elements(:css,".invoicing-details .autocompleter")
element.click
element.send_keys "Some text"
You can try to find id of an element using next xpath: //input[#id=(//label[contains(text(),'To')]/#for)]. Here you find a label by its text and then get for attribute (it is needed id).
element = driver.find_elements(:xpath,"//input[#id=(//label[contains(text(),'To')]/#for)]")
element.click
element.send_keys "Some text"
Related
I'm using Angular 13 and PrimeNG 13.4.1. I would like to have a label be directly above a text field, so I built
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="name" pInputText>
<label for="formLogoId">My Name</label>
</span>
</div>
</div>
However, when the field is rendered, the label appears superimposed over the text input ...
What's the proper way to position the label above the text field? I have this in my angular.json file, for waht it's worth ...
"styles": [
"node_modules/primeng/resources/themes/nova/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
Based on the attached HTML, you are applying Float Label.
If you want the label to be positioned at the top of input field, you can refer to InputText Demo (the Invalid section part).
HTML
<div class="p-field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText />
</div>
CSS
.p-field > * {
display: block;
}
The CSS part is crucial, which all the elements under the element with the p-field class will be applied with style: display: block.
Without it, the <label> element will be at the left and the <input> element at the right (position).
Sample StackBlitz Demo
Output
You may consider for PrimeFlex, which is a CSS library for Prime UI.
Install primeflex library.
npm install primeflex
Import CSS in angular.json or root stylesheet.
"node_modules/primeflex/primeflex.css"
Apply PrimeFlex styling.
<div class="field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText class="w-full" />
</div>
Refer: FormLayout
Sample StackBlitz Demo (PrimeFlex)
In my code I can usually find an element by Xpath and perform actions like shown below
await I.fillField('//*[#id="edit-name"]','user1');
I am seeing the following error when I perform the following action. As the ID is dynamically created. Is there a recommended approach to tackle this type of elements?
await I.fillField('//*[#id="crmUiId_1"]','SomeTextHere');
Error:
**TypeError: Cannot read property '$$' of null
at findElements (node_modules/codeceptjs/lib/helper/Playwright.js:2087:18)
at Playwright._locate (node_modules/codeceptjs/lib/helper/Playwright.js:822:12)**
Associated HTML:
<div crm-ui-field="{name: 'caseTypeDetailForm.title', title: ts('Title')}" class="ng-isolate-scope crm-section"><div class="label">
<label crm-ui-for="caseTypeDetailForm.title" crm-depth="1" crm-ui-force-required="" for="crmUiId_1"><span ng-class="cssClasses"><span ng-transclude=""><span class="ng-binding ng-scope">Title</span></span><span crm-ui-visible="crmIsRequired" class="crm-marker ng-isolate-scope" title="This field is required." style="visibility: inherit;">*</span></span></label>
<!-- ngIf: help -->
</div>
<div class="content" ng-transclude="">
<input crm-ui-id="caseTypeDetailForm.title" type="text" name="title" ng-model="caseType.title" class="big crm-form-text ng-pristine ng-scope ng-empty ng-invalid ng-invalid-required ng-touched" required="" id="crmUiId_1">
</div>
<div class="clear"></div>
</div>
The issue here is actually the ID "crmUiId_1" is dynamically generated. Instead I tried xpath with ng-model="caseType.title" but it doesn't seem to be working either.
I would just make sure you wait for it:
await page.waitForSelector('#crmUiId_1')
await page.fill('#crmUiId_1', 'whatever')
Otherwise the page might still be loading.
The cheatsheets and docs on Watir show something like this to set a radio button
b.radio(:id => "radio").set
How can I select a Radio button based on the text next to it?
Sometimes this text is inside the label tag , sometimes its just inside some div/form tag. How do we handle this in Watir??
(Label texts in CAPS in below examples)
Example 1:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
Example 2 :
<div class="isoversixteen_false_container">
<input id="isoversixteen_false" class="radio" type="radio" value="0" name="isoversixteen" autocomplete="off"/>
<label class="isoversixteen_false_label" for="isoversixteen_false">
<span class="label_main">UNDER 16</span>
</label>
</div>
<div class="isoversixteen_true_container">
<input id="isoversixteen_true" class="radio" type="radio" value="1" name="isoversixteen" autocomplete="off" checked="checked"/>
<label class="isoversixteen_true_label" for="isoversixteen_true">
<span class="label_main">16 OR OVER</span>
</label>
</div>
Orde's comment about using attributes of the input element is a good idea as it is the easiest to program. However, to answer the question:
Example 1 - Adjacent text node
In this example, the desired text is in an adjacent text node. Given that the radio buttons share the same parent, I think the easiest solution would be to use XPath:
browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set
The XPath says to:
Find an input element where
The following text node - ie the [1]
Has the text "MALE" or "FEMALE", ignoring the leading/following spaces - ie the [normalize-space(.) = "FEMALE"]
Example 2 - Label text
In this example, the checkboxes have a properly associated label element - ie the id of the checkbox matches the for attribute of the label. Watir supports locating elements by their label text through the :label locator:
browser.radio(label: 'UNDER 16').set
browser.radio(label: '16 OR OVER').set
Example - First following non-blank text node
If you want a single solution that works with both examples, the following seems to work:
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "UNDER 16"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "16 OR OVER"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "MALE"]]').set
browser.radio(xpath: '//input[following::text()[normalize-space(.) != ""][1][normalize-space(.) = "FEMALE"]]').set
The intent here is to find the first text node after the checkbox that has text (the [normalize-space(.) != ""][1] portion) and that text matches the expected text (the [normalize-space(.) = "UNDER 16" portion).
This is HTML structure I have in my example:
<div class="radio-inline">
<label for="job_type">Second Type</label>
<input id="job_service" name="job" type="radio" value="remote">
</div>
Normally I'd select it with:
#browser.input(:value => 'remote').click
However, per your question, I tried to see if I could select by text. I found this works, but may be dependent on the labels being nested in a div.
#browser.label(:text => /Second Type/).click
The / around "Second Type" were due to some weird line breaks in the HTML, may work with just quotes.
Below is my html
<div class="right" data-bindattr-13="13">
<h3>Company Name</h3>
<div class="input-row">
<input id="ember4258" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Full Company Legal Name</h3>
<div class="input-row">
<input id="ember4259" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Company Phone</h3>
<div class="input-row">
<input id="ember4260" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Federal Tax / Employer ID (EIN)</h3>
<div class="input-row">
<input id="ember4261" class="ember-view ember-text-field" type="text"/>
</div>
</div>
Since class value off all the text fields and respective parent div class attributes are same I need to fill these text fields without using nth-of-type.
I have done work around to create a CSS selector that should point the text box that is immediately after <h3>Full Company Legal Name</h3> .
h3:contains(^Company Name$)+div>input
But my Capybara script is not recognizing the above way and throwing the below error.
annotateInvalidSelectorError_': The given selector h3:contains(^Company Name$)+div>input is either invalid or does not result in a WebElement. The following error occurred: (Selenium::WebDriver::Error::InvalidSelectorError)
InvalidSelectorError: An invalid or illegal selector was specified
Can any one provide a CSS that matches my requirement?
Regards,
Avinash Duggirala
The contains pseudo class was deprecated, which is why the InvalidSelectorError occurs. There is currently no way to check text nodes using CSS-selectors.
Instead, you can use XPath to traverse the DOM to sibling elements.
text_field = page.find(:xpath, '//h3[text() = "Company Name"]/following-sibling::div[1]/input')
text_field.set('some value')
I got a big XML. A snippet of that XML look like this:
<div class="x-column-inner" id="ext-gen422" style="width: 850px;">
<div id="ext-comp-1206" style="width: 14px;" class=" x-column">
<div tabindex="-1" class="x-form-item x-hide-label" id="ext-gen434">
<label class="x-form-item-label" style="width:100px;" for="ext-comp-1180" id="ext-gen435"></label>
<div style="padding-left:105px" id="x-form-el-ext-comp-1180" class="x-form-element">
<div class="x-form-check-wrap" id="ext-gen436" style="width: 14px; height: 28px;">
<input type="checkbox" name="ext-comp-1180" id="ext-comp-1180" autocomplete="off" class=" x-form-checkbox x-form-field">
<label class="x-form-cb-label" for="ext-comp-1180" id="ext-gen437"> </label>
</div></div> <div class="x-form-clear-left">
</div>
</div>
</div>
<div id="ext-comp-1207" style="width: 150px;" class=" x-column">
<label id="ext-comp-1203" style="width: 140px;">Add to Watchlist</label>
</div>
<div id="ext-comp-1208" style="width: 107px;" class=" x-column">
I need to find 'input' node of checkbox type based on label node having text 'Add to Watchlist'.
As both 'input' and 'label' node lies in different hierarchy, // syntax doesn't seem to work:
//div[label[contains(text(),'Add to Watchlist')]]
will just give parent div of child label.
I tried to start from the topmost node of this snippet
$x("//div[#class='x-column-inner' and //label[contains(text(),'Add to Watchlist')]]")
but that is giving 6 possible matches.
Note: #id attribute can't be used as this is getting assigned dynamically to nodes so next time page loads #id will be different.
I don't want to use position() predicate as that makes XPATH static and xpath may break with any change in position.
You could try something like this, but it looks very greedy... Basically what it does is searching in every axes of the input tags to see if there is an associated label tag. So for each input it searches in its ancestors, descendants and siblings.
There are certainly some smarter solutions.
//input[#type = 'checkbox' and (#id = ancestor::label/#for or #id = descendant::label/#for or #id = following::label/#for or #id = preceding::label/#for)]
However your snippet is not interesting no input tag will be matched, please consider providing a better snippet. It would improve the answers accuracy.
Edit : Here is a (non-tested) way to add the 'Add to Watchlist' constraint.
//input[#type = 'checkbox' and (#id = ancestor::label[. = 'Add to Watchlist']/#for or #id = descendant::label[. = 'Add to Watchlist']/#for or #id = following::label[. = 'Add to Watchlist']/#for or #id = preceding::label[. = 'Add to Watchlist']/#for)]
But once again, those xpath requests are very greedy and your are not guaranteed to match every input element associated to a label for example the following input won't be match in this snippet:
<div>
<div>
<label for="id">Add to Watchlist</label>
</div>
<div>
<input type="checkbox" id="id" />
</div>
<div>
There may be more efficient solutions in one xpath request, but you should consider doing several request.
For example, one request to find every for attribute value of the label elements with the text 'Add to Watchlist' and then doing another request to find the associated input elements.
I should also try to restrict your request to the scope a the underlying form element. Perhaps I will edit with a better request if I find the time.
Edit 2
Here is a working and smarter request
//form//input[#type = 'checkbox' and #id = ancestor::form[1]//label[. = 'Add to Watchlist']/#for]
You can confront it to this snippet
<html>
<form>
<label for="bar">Add to Watchlist</label>
<div>
<div>
<label for="id">Add to Watchlist</label>
</div>
<div>
<input type="checkbox" id="id" />
<input type="checkbox" id="foo" />
<input type="checkbox" id="bar" />
<input type="checkbox" />
<input type="checkbox" id="" />
</div>
</div>
</form>
<label for="foo">Add to Watchlist</label>
</html>
Bust the most important is that you understand how it works and why it is better. Please take the time to think about it.