We have a web application which has a list of reports, which I am trying to automate.
There is an option to view all these reports. When I open a report to view, there are some values I need to select to view it, which is where I am stuck.
The id used for these reports are generic. If the id for <label>Application<lable> is <select id="id1" name="id[1]" class="valid">, the same label in a different report will have a different id. How do I proceed from here?
Giving the tags of two sample reports:
First report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_1__Name" name="id[1].Name" type="hidden" value="PackageID">
<select id="id_1__SelectedValues" name="id[1].SelectedValues" class="valid">
</div>
Second report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_5__Name" name="id[5].Name" type="hidden" value="PackageID">
<select id="id_5__SelectedValues" name="id[5].SelectedValues" class="valid">
</div>
Not sure if this suggestion is suitable for your scenario, but you could get the id with jQuery and store it in a hidden field:
var id = $('.className').attr('id');
or use control's ClientID property.
Anyway, to select proper value you just need
#browser.select_list(:id, "id_5__SelectedValues").set("3")
Related
I used different ways. But can not handle.
cy.get('#form-group-936cd4f5-19ab-4f3c-bfd9-563bf46212b3 > .fal')
.click()
.attachFile('files/sample.pdf', {force: true})
cy.get('#form-group-936cd4f5-19ab-4f3c-bfd9-563bf46212b3 > .form-control)
.attachFile('files/sample.pdf', {force: true})
cy.get('#form-group-936cd4f5-19ab-4f3c-bfd9-563bf46212b3 > .fal')
.attachFile('files/sample.pdf', {subjectType: 'drag-n-drop'})
HTML
<div _ngcontent-ete-c120="" class="form-group upload-doc ng-star-inserted" id="form-group-936cd4f5-19ab-4f3c-bfd9-563bf46212b3"> <label _ngcontent-ete-c120="" class="ng-star-inserted">Please provide bank account statement</label><!----> <input _ngcontent-ete-c120="" type="text" readonly="" class="form-control ng-untouched ng-pristine ng-valid"><i _ngcontent-ete-c120="" class="fal fa-upload"></i> <!----> <!----> </div> –
Hidden file upload input
<input _ngcontent-juf-c120="" type="file" ng2fileselect="" class="uploader" accept="application/pdf,application/acrobat,application/nappdf,application/x-pdf,image/pdf,image/jpeg,image/pjpeg,image/png">
enter image description here
cypress-file-upload only checks type="file" for subjectType: 'drag-n-drop' option, the default subjectType: 'input' does not check.
Cannot tell it your test are any good, there not enough info given (except the 3rd will not work).
Pause and inspect the DOM after #1 & #2, to see if there's a valid attachment DTO.
But attaching the file is only part of the story, you will need to find out what event is used and .trigger() it.
I have the following HTML snippet:
<input type="text" id="manufacturer" list="manufacturers" placeholder="Search by manufacturer name or supplier code" class="form-control form-control-2-3" value="" name="manufacturer">
<datalist id="manufacturers">
<select>
<div>
<option value="Jaguar">AA</option>
<div></div>
</div>
<div>
<option value="Audi">AB</option>
<div></div>
</div>
<div>
<option value="Mercedes">AC</option>
<div></div>
</div>
</select>
</datalist>
It's a dropdown menu and I want to select one of the options. No matter what I try with any find command or select function. I always get the same error:
Selenium::WebDriver::Error::ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
Does anyone have any suggestions on how to scope to those options and select one?
Thanks.
What you're trying to do isn't currently possible because it's not actually a dropdown select element. The <datalist> option elements are never actually visible on the page because the standard states "In the rendering, the datalist element represents nothing and it, along with its children, should be hidden." - https://html.spec.whatwg.org/dev/form-elements.html#the-datalist-element . Instead any <option> elements in the datalist are just used as autofill suggestions for the input element (but don't actually restrict the value a user can input in any way). Because of this and since the datalist user can just type anything they want into the input element you can set the input value like any other text input.
fill_in("manufacturer", with: 'Jaguar')
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I am taking a look of using hosted fields / form in Braintree (here: https://developers.braintreepayments.com/guides/hosted-fields/setup-and-integration/javascript/v2).
In the example html form on the above page, all the fields it has are all hosted fields (cc number, exp date, cvv).
My question is: in the same form, I want to add a few more normal form fields, to collect other information, such as shipping address, delivery notes, etc.
I tried and looks like it works at least in sandbox, but since the doc doesn't mention anything like that, I just want to confirm it.
Anyone has some idea?
Thanks
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
You can add any additional fields to the form by just adding more input tags. Using the example from the docs, if I wanted to add first-name and last-name to the form:
<form action="/" id="my-sample-form">
<label for="card-number">Card Number</label>
<div id="card-number"></div>
<label for="cvv">CVV</label>
<div id="cvv"></div>
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date"></div>
<label for="first-name">First Name</label>
<input type="text" name="first-name" id="first-name">
<label for="last-name">Last Name</label>
<input type="text" name="last-name" id="last-name">
<input type="submit" value="Pay" />
</form>
I need some help with the following issue. I am pretty new to JavaScript so this one is pretty tough for me. Any help would be greatly appreciated!
We have a form for registration that is already in use and I need to make some amends to it to enhance its usability. The form itself already contains several validation scripts and I need to add in a new one - an error message to appear next to the mobile field. I am unable to amend the form HTML itself so I have to do everything by javascript – I need to bind the new function to the submit button so that it fires AFTER all the other validations (field highlight, pop ups), but before the page turns over.
Here is the form (I have just left in the feild i need to amend) :
<form method="post" action="#" id="register_form" class="validate">
<input type="hidden" name="page" value="" />
<input type="hidden" name="unregistered" value="false" />
<fieldset>
<legend>I am a new online customer</legend>
<div class="element">
<label for="mobile_number">Mobile:**</label>
<input name="mobileNumber" type="text" id="mobile_number" title="Please enter at least one number" class="text validate {validate:{minLength:10, eitherOr:'#telephone_number', messages:{minLength:'Please enter a valid phone number (at least #NUM digits long)', eitherOr:'Please enter either your Telephone or Mobile number'}}}" />
</div>
<div class="element continue_shopping_cont submit">
<button type="submit" class="submit button small_button"><span>Register</span></button>
</div>
<input type="hidden" name="secure_from" value="" />
</fieldset>
</form>
Could someone help show me how i am supposed to do this and how is best to target this field?