咨询：在Bootstrap应用中使用Protractor等待页面加载的方法

我之前在做Angular+Bootstrap项目时，刚好研究过Protractor的页面加载等待方案，结合Bootstrap的组件特性，分享几个实用的方法，亲测有效：

一、基础页面加载等待 #

如果你的Bootstrap项目是和Angular结合的，Protractor自带的browser.waitForAngular()其实已经能覆盖大部分场景——它会等待Angular的所有数据绑定和异步操作完成，这时候Bootstrap的基础组件通常也加载就绪了。

但如果是纯静态Bootstrap项目（非Angular），可以通过检查document.readyState来确保页面资源完全加载：

browser.wait(() => {
  return browser.executeScript('return document.readyState === "complete"');
}, 10000, '页面资源加载超时');

二、Bootstrap特定组件的等待 #

Bootstrap很多组件有自己的加载/动画状态，需要针对性等待：

1. 等待模态框完全显示（含动画结束） #

Bootstrap模态框显示时会添加show类，同时有300ms的过渡动画。我们可以结合可见性检查和状态属性来等待：

const EC = protractor.ExpectedConditions;
const modal = element(by.css('#your-modal-id'));

// 等待模态框可见且aria-hidden为false（Bootstrap的标准状态属性）
browser.wait(EC.and(
  EC.visibilityOf(modal),
  () => modal.getAttribute('aria-hidden').then(hidden => hidden === 'false')
), 5000, '模态框加载超时');

// 如果需要确保动画完全结束，可以监听transitionend事件
browser.wait(() => {
  return browser.executeScript(`
    return new Promise(resolve => {
      const modalEl = document.querySelector('#your-modal-id');
      if (modalEl.classList.contains('show')) {
        resolve(true);
      } else {
        modalEl.addEventListener('transitionend', () => resolve(true), { once: true });
      }
    });
  `);
}, 3000, '模态框动画结束超时');

2. 等待下拉菜单展开 #

点击下拉触发按钮后，需要等待.dropdown-menu出现show类：

const dropdownToggle = element(by.css('.dropdown-toggle'));
const dropdownMenu = element(by.css('.dropdown-menu'));

dropdownToggle.click();
browser.wait(EC.classPresent(dropdownMenu, 'show'), 3000, '下拉菜单展开超时');

3. 等待加载按钮/进度组件 #

如果有Bootstrap的加载按钮（带spinner-border的那种），可以等待加载状态消失：

const submitBtn = element(by.css('.btn-primary'));

// 等待按钮的加载 spinner 消失
browser.wait(EC.invisibilityOf(submitBtn.element(by.css('.spinner-border'))), 5000, '按钮加载状态未结束');

三、封装可复用的自定义等待函数 #

为了避免重复代码，可以封装一个通用的Bootstrap元素等待函数，检查元素的存在、可见性和稳定状态：

const waitForBootstrapElement = (element, timeout = 5000) => {
  const EC = protractor.ExpectedConditions;
  return browser.wait(EC.and(
    EC.presenceOf(element),
    EC.visibilityOf(element),
    // 确保元素尺寸稳定（动画结束的标志）
    () => element.getSize().then(size => size.width > 0 && size.height > 0)
  ), timeout, `元素 ${element.locator().toString()} 加载超时`);
};

// 使用示例
const myCard = element(by.css('.card'));
waitForBootstrapElement(myCard);

几个注意事项 #

• 绝对不要用browser.sleep()！固定时长等待很容易因为环境差异导致失败，显式等待才是可靠的选择。
• 如果用的是ng-bootstrap这类Angular封装的Bootstrap组件，可以结合组件自身的状态（比如isOpen()方法）来等待，比直接操作DOM更可靠。
• Bootstrap默认动画时长是300ms，所以设置等待超时的时候，至少要留够动画完成的时间（比如3000ms就足够）。

内容的提问来源于stack exchange，提问作者Jonny