如何在JavaScript/Protractor中实现永不报错的isVisible函数？

刚接触异步编程+Protractor确实容易踩坑，我来给你写一个完全符合要求的isVisible函数——它永远不会抛出错误或异常，也完全不包含expect语句：

核心实现思路 #

因为Protractor在找不到元素时会抛出NoSuchElementError，而且元素的isDisplayed()方法本身也是异步操作，所以我们需要：

• 用async/await处理异步流程
• 用try/catch捕获所有可能的异常，确保函数始终返回布尔值

完整代码 #

async function isVisible(elementFinder) {
  try {
    // 先验证元素是否能被定位到，再检查可见性
    await elementFinder.getWebElement();
    const isDisplayed = await elementFinder.isDisplayed();
    return isDisplayed;
  } catch (error) {
    // 任何错误（元素不存在、可见性检查失败等）都返回false
    return false;
  }
}

代码细节解释 #

• elementFinder：传入的是Protractor的元素定位器对象（比如$('#my-id')或$$('.my-class').first()），不是字符串选择器
• await elementFinder.getWebElement()：提前确认元素存在，避免后续isDisplayed()因元素不存在抛错
• try/catch块：兜底捕获所有异常场景（元素找不到、DOM动态变化导致元素消失等），直接返回false
• 全程没有expect语句，完全通过返回值传递结果

使用示例 #

// 在测试流程中调用
async function runTest() {
  const submitBtnVisible = await isVisible($('#submit-btn'));
  
  if (submitBtnVisible) {
    console.log('提交按钮可见，执行点击操作');
    await $('#submit-btn').click();
  } else {
    console.log('提交按钮不可见，跳过点击');
  }
}

额外注意事项 #

• 必须用await调用isVisible函数，因为它是异步函数
• 如果要批量检查多个元素的可见性，循环调用时每个调用都要加await
• 这个函数的行为逻辑：元素存在且可见返回true，其他所有情况（元素不存在、元素存在但不可见、定位失败）都返回false，完全满足你“绝对不能返回错误”的要求

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