Clicking on radio button

simbada Published at Dev

simbada

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();

Ernst Zwingli

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.