Hi i have the following simple radio button
<label>
<input type="radio" name="radioOption1" value="option1">
System option1.
</label>
How would i use selenium to verify the radio button and its label is not visible.
selenium.isVisible("//input[#name='radioOption1' and #value='option1']");
would verify if the option is not visible but i want to verify the whole label is not visible.
xpath has a parent pseudo-pointer, not so sure about Selenium implemetation
//parent::input[#name='radioOption1' and #value='option1']
or
//label[./input[#name='radioOption1' and #value='option1']]
Related
While selecting radio button inside laravel Dusk i am getting
Facebook\WebDriver\Exception\ElementNotInteractableException: element
not interactable
Here is my code
$browser->visit('/test')
->radio('question_outer_3', '29')
->assertTitleContains('Test');
This is my templete
<input type="radio" class="radio user_questions " name="question_outer_3" id="option29" value="29" data-question="11" data-option="29" data-scroll-to=" #question_outer_4 ">
Often elements are "not interactable" when are not in the viewport (e.g. you have to scroll to reach them, or are still to be appended in the DOM after a Javascript call).
Scrolling and waiting for text may help.
We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
When I'm trying to click checkbox I getting an error
browser.checkbox(:id, 'AgreeToProceedWithPersonalData').click
Element is not clickable at point (314.5, 448). Other element would receive the click: <label for="AgreeToProceedWithPersonalData"></label>
And when I click at element below I getting agreement page opened.
browser.label(:for, 'AgreeToProceedWithPersonalData').click
How do I can set checkbox and do not open agreement?
<div class="checkbox">
<input data-val="true" data-val-mustbetrue="Ваше согласие необходимо для продолжения" data-val-required="The I agree to proceed personal data field is required." id="AgreeToProceedWithPersonalData" name="AgreeToProceedWithPersonalData" type="checkbox" value="true" autocomplete="off" checked="checked">
<label for="AgreeToProceedWithPersonalData">I agree to proceed personal data.
Read the agreement
</label>
<span class="field-validation-valid" data-valmsg-for="AgreeToProceedWithPersonalData" data-valmsg-replace="true"></span>
</div>
Often times developers like to make things pretty by layering things on top of standard html elements, and the driver doesn't like that.
Please don't over-use this, as it is not good practice for most things, but in situations like this I find myself needing to do:
browser.checkbox(id: 'AgreeForBKIRequest').fire_event :click
Most probably there is something very custom with javascript on the page if fire_event is not working. So it is hard to suggest and it will be nice if you will provide the url of the page to experiment with.
However you could try such suggestion with no guaranty (just guess)
browser.execute_script("window.stop")# That will stop all the scripts on the page. May be usefull may be not
browser.execute_script("document.getElementById('AgreeToProceedWithPersonalData').click();")# That will perform click using pure javascript
I am currently using selenium webdriver 2.35 for firefox being programmed in ruby. I am having an issue where I can not get the webdriver to focus correctly on an input field element. By default, there is some gray text already populated in the field. When a user clicks on this field, that gray text is supposed to disappear and allow the user type into field.
Using the webdriver, I would send the click command to that element and it would click, but nothing would visually happen. I also checked to see the active element and in fact it is that field(after clicking on the element). (I used this to check: driver.switch_to.active_element)
Also, I would send keys to that field and it will show up gray either appended to the default text or by clearing that field and sending those keys
Methods that I used but did not work
1) driver.find_element(element).click
2) driver.action.move_to.element.click.perform
Does anyone have any suggestions? (I know that this may sound ambiguous but feel free to question me need any more information)
I am not sure if this helps or not but here is the html from before the click(also the same result after using the click function in selenium
This is the html before the click (and the result after using the selenium click function
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-empty-field" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
This html appears after is after the user manually clicks on the field.
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-focus" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
I also noticed that after the user manually clicks on the field, the selenium commands work correctly