使用量角器单击按钮后未加载下一页

Question

这是我用于单击按钮的代码。在第一页我有一个按钮，点击它会重定向到下一页。第二页长时间没有加载，测试失败

describe('Login', function() {


it('should display Login home', function() {
browser.get('https://xxxxx.org/yyyy/');
browser.driver.manage().window().maximize();
var acrIdBtn  = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));

acrIdBtn.click().then(function() {
    browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

  });
});
});

HTML 代码：

<div class="col-sm-12">
<!-- ngIf: method.label.text !== ' *' && method.input.id.length > 0 --><input tabindex="0" class="form-control ng-pristine ng-scope ng-empty ng-invalid ng-invalid-required ng-touched" id="ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput" aria-invalid="true" required="" type="text" placeholder="Username" autocomplete="off" ng-if="method.label.text !== ' *' &amp;&amp; method.input.id.length > 0" ng-init="AuthMethod.getUser()" focus-if="" ng-disabled="false" ng-change="AuthMethod.getMethodOnChange(method.input.id)" ng-model="AuthMethod.user"><!-- end ngIf: method.label.text !== ' *' && method.input.id.length > 0 -->
<!-- ngIf: AuthMethod.forgotUser.link --><a class="help-block link--color ng-binding ng-scope" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$MFALoginControl1$UserIDView$ctl00$ContentPlaceHolder1_MFALoginControl1_UserIDView_hlinkUsernameLink','')" ng-if="AuthMethod.forgotUser.link">Forgot User ID</a><!-- end ngIf: AuthMethod.forgotUser.link -->

Answer 1

首先让我们浏览一下代码并了解为什么会发生这种情况。

describe('Login', function() {
  it('should display Login home', function() {
    browser.get('https://xxxxx.org/yyyy/');
    browser.driver.manage().window().maximize();
    var acrIdBtn  = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));

    // click is thenable, this is okay
    acrIdBtn.click().then(function() {
       // This promise gets queued but this is a void function meaning. So in jasminwd, the
       // function to find the element and click is a void function and the promise
       // would not be awaited.         
       browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();
    });
  });
});

快速修复：

所以快速修复，确保回调返回承诺：

    acrIdBtn.click().then(function() {
       // If we return the click, jasminewd should await this callback.
       return browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

摆脱控制流

这似乎仍然依赖于控制流。作为旁注，我建议在您的配置文件中使用SELENIUM_PROMISE_MANAGER: false, 离开控制流并使用异步等待。请参阅Protractor in STS IDE -> Could not find update-config.json 以获得配置文件和 async / await 的一个很好的示例。

describe('Login', () => {
  it('should display Login home', async () => {
    await browser.get('https://xxxxx.org/yyyy/');
    await browser.driver.manage().window().maximize();
    // If you are using "element" but do not want to use wait for angular
    // think about using "await waitForAngularEnabled(false);"
    // If you prefer to use the WebDriver findElement version, then you could just keep it the same.
    // const acrIdBtn = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));
    const acrIdBtn = element(by.css('a.btn.btn-lg.btn-success'));
    await acrIdBtn.click();
    const contentBtn = element(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput'));
    await contentBtn .click();
  });
});

Answer 2

先检查一下按钮是否可点击总是好的：

const button = element(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput'));
await browser.wait(ExpectedConditions.elementToBeClickable(button));
await button.click();