New Relic监控脚本如何选择下拉菜单首个可用选项

问题说明 #

• 搭建覆盖「搜索商品-选择商品-选择尺码-加入购物车」流程的New Relic监控测试时，部分商品尺码处于缺货状态，硬编码选择指定尺码的逻辑会直接导致测试运行中断失败
• 现有代码已实现基础下拉选择能力，需调整逻辑实现自动选中下拉菜单中第一个非缺货的可用选项

现有参考代码 #

//Example: Selecting an option and retrieving the selected label/value
var By = $driver.By,
selectbox;
// ----------------------------------------------------------------------------- //
// Helper function that returns the first selected option given a select element
function findSelected(select) {
var d = $driver.promise.defer();
select.findElements(By.tagName('option')).then(function (options) {
options.forEach(function(option) {
option.isSelected().then(function(selected) {
if (selected) {
d.fulfill(option);
}
});
});
});
return d.promise;
}
// ----------------------------------------------------------------------------- //
// Load the page
$browser.get("测试页面地址").then(function(){
  // Focus the iframe
  $browser.switchTo().frame("iframeResult");
  // Click on select
    return $browser.waitForAndFindElement(By.name("cars"), 15000).then(function(elem) {
    selectbox = elem;
    selectbox.click();
  });
}).then(function() {
  // Select an option
    return selectbox.findElement(By.css("option[value='audi']")).click();
})

实现逻辑调整 #

核心修改点是替换原有硬编码匹配指定value选项的逻辑，改为遍历所有下拉选项，过滤不可用项后选择第一个符合要求的选项：

1. 定位到下拉选择框后，拉取全部<option>子元素
2. 逐个校验选项可用性，通用判定规则可根据自身页面的缺货标记调整：
   • 排除带disabled属性的选项（大部分站点会给缺货尺码加该原生属性）
   • 排除带有缺货标识class（比如out-of-stock、disabled）的选项
   • 排除选项文本包含「缺货」「售罄」「无货」关键词的选项
3. 找到第一个满足可用条件的选项后直接触发点击，终止后续遍历

修改后可运行代码 #

var By = $driver.By,
selectbox;

// 原有获取已选中选项的工具函数可保留
function findSelected(select) {
var d = $driver.promise.defer();
select.findElements(By.tagName('option')).then(function (options) {
options.forEach(function(option) {
option.isSelected().then(function(selected) {
if (selected) {
d.fulfill(option);
}
});
});
});
return d.promise;
}

// 新增：校验选项是否可用的工具函数，可根据页面实际的缺货标记调整判断规则
function isOptionAvailable(option) {
  var d = $driver.promise.defer();
  // 同时校验属性、class、文本三类缺货标记
  $driver.promise.all([
    option.isEnabled(),
    option.getAttribute('class'),
    option.getText()
  ]).then(function(res) {
    var isEnabled = res[0];
    var optionClass = res[1] || '';
    var optionText = res[2] || '';
    // 判定为可用的条件：未被禁用、class不含缺货标识、文本不含缺货关键词
    var isAvailable = isEnabled 
      && !optionClass.includes('out-of-stock') 
      && !optionClass.includes('disabled')
      && !optionText.includes('缺货')
      && !optionText.includes('售罄')
      && !optionText.includes('无货');
    d.fulfill(isAvailable);
  });
  return d.promise;
}

// 页面流程逻辑
$browser.get("对应电商商品页地址").then(function(){
  // 若页面有iframe需要切换则保留对应逻辑，无则删除
  // $browser.switchTo().frame("iframeResult");
  // 定位尺码选择框，替换为页面对应的尺码选择器定位规则
  return $browser.waitForAndFindElement(By.name("size-selector"), 15000).then(function(elem) {
    selectbox = elem;
    selectbox.click();
    // 拉取所有下拉选项
    return selectbox.findElements(By.tagName('option'));
  });
}).then(function(options) {
  // 遍历选项找到第一个可用项
  var selectFirstAvailable = function(index) {
    if (index >= options.length) {
      throw new Error('当前商品无可用尺码');
    }
    var currentOption = options[index];
    return isOptionAvailable(currentOption).then(function(available) {
      if (available) {
        // 命中可用选项，点击选中
        return currentOption.click();
      } else {
        // 当前选项不可用，检查下一个
        return selectFirstAvailable(index + 1);
      }
    });
  };
  // 从第一个选项开始校验
  return selectFirstAvailable(0);
}).then(function() {
  // 选中尺码后后续的加入购物车等逻辑可在此处续写
  console.log('已自动选中第一个可用尺码');
})

注意：代码中的选择器定位规则、缺货判定关键词需要和实际页面源码匹配，比如如果站点的缺货尺码是给option加data-stock="0"属性，只需要在isOptionAvailable函数里新增对应属性的校验逻辑即可。

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