使用带有元素 by.id 量角器测试错误的输入框

Question

我正在尝试在我的登录页面中使用我的输入框的 ID，但我在 Protractor 中收到以下错误：

Failed: No element found using locator: By css selector, *[id="signin--username"])

这是我的登录.js

var logIn = function() {
    this.navigate = function() {
        browser.get(browser.params.server);
    };
    this.usernameInputBox = element(by.id('signin--username'));
    this.passwordInputBox = element(by.id('signin--password'));
    this.dontHaveAnAccountButton = element(by.id('signin--no-account-question'));

    this.logInButton = element(by.id('signin--log-in'));
    this.Modal = element(by.css('.modal-dialog'));
    this.ModalButton = element(by.xpath('//*[@id="app"]/div[3]/div/div/form/div[3]/button'));
};

module.exports = new logIn();

来自log-in.html的片段

<div class="form-group">
  <div class="input-group input-group-lg">
    <span class="input-group-addon">
       <span class="glyphicon glyphicon-user"></span>
        </span>
          <input type="text"
           id="signin--username" 
           class="form-control"
           placeholder="{{'username' | translate}}" 
           ng-model="username"
           name="username" 
           required
           autofocus data-autofill
           >
   </div>
</div>

量角器测试 Javascript 文件：

module.exports = function() {
describe('Login Page', function() {

    var loginPage = require('../pages/log-in.js');
    var saveScreenshot = require('../screenshot.js');

    beforeEach(function() {
        loginPage.navigate();
    })

    it('should log in (with correct credentials)', function() {
        browser.waitForAngular();
        loginPage.usernameInputBox.sendKeys('service');
        loginPage.passwordInputBox.sendKeys('s5rv1c5');
        loginPage.logInButton.click();
        browser.waitForAngular();
        expect(browser.getCurrentUrl()).toContain(browser.params.server + '#/jobs/my_jobs');
    })

  });
};

非常感谢任何帮助！谢谢。

Answer 1

看起来像是时间问题。改进导航页面对象方法以等待页面加载 - 等待用户名字段to become present：

var logIn = function() {
    this.usernameInputBox = element(by.id('signin--username'));
    this.passwordInputBox = element(by.id('signin--password'));
    this.dontHaveAnAccountButton = element(by.id('signin--no-account-question'));

    // ...

    this.navigate = function() {
        browser.get(browser.params.server);

        var EC = protractor.ExpectedConditions;
        browser.wait(EC.presenceOf(this.usernameInputBox), 5000, "Username field is still not present");
    };
};

Answer 2

您没有正确提供唯一选择器。这就是发生此错误的原因。

使用element(by.model('username')).sendKeys('your user name');

我假设你给出了登录文本框的 html。

希望这会有所帮助。 :)