Question

在非Angular网站上，当我点击某个单选按钮时，会出现页面加载gif。在Protractor测试中，我想等到这个加载器gif消失，然后检查另一个元素。

加载程序的HTML（始终存在）：

<div class="loader" style="display: none;">
    <div id="loader">
        <img src="/img/loading.gif">
    </div>
    <div class="totalMaskForLoader"></div>
</div>

我在测试中做了什么：

        ...
        //  click on balance dropdown
        page.sortByBalanceSelector.click();

        browser.wait(function() {
                    // return a boolean here. Wait for spinner to be gone.
                    return !browser.isElementPresent(by.css(".loader"));
                }, 20000);

        // compare to the starting player's username
        expect(page.hasText(page.usernameCellButton)).not.toContain(startingUsername);

问题是我总是得到

20009ms后等待超时

我如何等待加载程序gif消失？

Answer 1

内置invisibilityOf预期条件专门用于此用例：

import React             from 'react';
import AppBar            from 'material-ui/AppBar';
import { getStyles }     from 'material-ui/AppBar/AppBar';
import MenuItem          from 'material-ui/MenuItem';

class App extends React.Component {
  static get contextTypes() {
    return { muiTheme: React.PropTypes.object.isRequired };
  }
  render() {
    const styles = getStyles(this.props, this.context);
    const { button: { iconButtonSize }} = this.context.muiTheme;
    const { appBar } = this.context.muiTheme;
    const hasIconMenu = false;
    let iconMenu = null;
    if (hasIconMenu) {
      styles.flatButton.top = -styles.flatButton.marginTop;
      styles.flatButton.marginTop = 0;
      iconMenu = (
        <IconMenu
          iconStyle={styles.iconButtonIconStyle}
          iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        >
          <MenuItem primaryText="Refresh" />
          <MenuItem primaryText="Help" />
          <MenuItem primaryText="Sign out" />
        </IconMenu>
      );
    }
    const rightIcons = (
      <div>
        <FlatButton label="My Channels" style={styles.flatButton} />
        <FlatButton label="Favorite" style={styles.flatButton} />
        <FlatButton label="Login" style={styles.flatButton} />
        {iconMenu}
      </div>
    );

    return (
      <div>
        <AppBar
          title="Title"
          iconElementRight={rightIcons}
        />
        {this.props.children}
      </div>
    );
  }

您也可以使用stalenessOf，这基本上意味着＆＃34;不存在＆＃34;。

您当前的方法存在的问题是您正在应用＆＃34;而不是＆＃34;由page.sortByBalanceSelector.click(); var loader = element(by.id("loader")); var EC = protractor.ExpectedConditions; browser.wait(EC.invisibilityOf(loader), 5000);返回的承诺，并且，因为承诺总是真实的，所以你总是得到＆＃34;假＆＃34;由于等待条件，因此超时错误。

如何在非Angular页面

1 个答案: