单击单选按钮

时间:2017-11-14 08:39:57

标签: javascript html jasmine protractor

我有以下呈现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>

因此,要选择男性单选按钮,我执行以下操作

element(by.id('male-signup')).click();

抱怨Element not visible

然后我做了

var EC = protractor.ExpectedConditions;
var gender = element(by.id('male-signup'));
browser.wait(EC.visibilityOf(gender), 5000);
gender.click();

抱怨Failed: Wait timed out after 5005ms

代码有什么问题? 我只想点击性别男性单选按钮

更新

根据以下'Ernst Zwingli'的答案之一,我尝试了以下内容。但是,它仍然抱怨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 个答案:

答案 0 :(得分:0)

您可能还可以单击标签以选择单选按钮,有效单击的元素可能是其父元素。

试试这个:

//select your element, then go to its parent-element.
element(by.id('male-signup')).element(by.xpath('..')).click();

或者使用你的等待声明:

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

以下是您的HTML-Page作为代码段,您可以看到点击该标签也有效。

<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>

答案 1 :(得分:0)

试试timeout error

删除setTimeout 10000直至setTimeout 35000如果您不需要它。

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

})