Clicking on radio button
Question
I have following rendered HTML
<div class="col-xs-8 no-padding">
<label class="radio-inline gender-label">
<input type="radio" name="gender" id="male-signup" value="MALE" ng-model="signup.gender" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
<label for="male-signup">Male</label>
</label>
<label class="radio-inline gender-label">
<input type="radio" name="gender" id="female-signup" value="FEMALE" ng-model="signup.gender" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required">
<label for="female-signup">Female</label>
</label>
</div>
So, to select Male radio button I did the following
element(by.id('male-signup')).click();
It complained Element not visible
Then i did
var EC = protractor.ExpectedConditions;
var gender = element(by.id('male-signup'));
browser.wait(EC.visibilityOf(gender), 5000);
gender.click();
It complained Failed: Wait timed out after 5005ms
What is wrong with code? I simply want to click on Gender male radio button
Update:
As per one of the answer below from 'Ernst Zwingli' I tried following. However, It still complains Failed: Wait timed out after 5005ms
var EC = protractor.ExpectedConditions;
var gender = element(by.id('male-signup')).element(by.xpath('//*[@id="top"]/div[2]/div/div/div/form/div[8]/div[2]/label[1]/label'));
browser.wait(EC.visibilityOf(gender), 5000);
gender.click();
2 answers
solution1
0 ACCPTED 2017-11-14 08:53:46
As you probably can also click the label to select the radio-button, the element, which is to be clicked effectively might be its parent.
Try this:
//select your element, then go to its parent-element.
element(by.id('male-signup')).element(by.xpath('..')).click();
Or with your wait-statement:
var EC = protractor.ExpectedConditions;
//this selects the <label class="radio-inline gender-label"> above "male-signup"
//potentially the parent-element is visible instead of the id-element
var gender = element(by.id('male-signup')).element(by.xpath('..'));
browser.wait(EC.visibilityOf(gender), 5000);
gender.click();
And here is your HTML-Page as snippet, where you see, that clicking the label also works.
<html> <head></head> <body> <div class="col-xs-8 no-padding"> <label class="radio-inline gender-label"> <input type="radio" name="gender" id="male-signup" value="MALE" ng-model="signup.gender" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required"> <label for="male-signup">Male</label> </label> <label class="radio-inline gender-label"> <input type="radio" name="gender" id="female-signup" value="FEMALE" ng-model="signup.gender" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required"> <label for="female-signup">Female</label> </label> </div> </body>
solution2
0 2017-11-14 09:13:48
Try this for your timeout error .
Delete setTimeout 10000 until setTimeout 35000 If you dont need it.
$(document).ready(function() {
var EC = protractor.ExpectedConditions;
var gender = element(by.id('male-signup')).element(by.xpath('//*[@id="top"]/div[2]/div/div/div/form/div[8]/div[2]/label[1]/label'));
setTimeout(gender, 2000);
setTimeout(gender, 5000);
setTimeout(gender, 10000);
setTimeout(gender, 15000);
setTimeout(gender, 20000);
setTimeout(gender, 25000);
setTimeout(gender, 30000);
setTimeout(gender, 35000);
gender.click();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.