JavaScript脚本如何断言select下拉框的元素内容?
使用JavaScript脚本断言select下拉框的元素内容，需要考虑页面元素是否加载成功，出错时打印等，主要实现功能功能需包括如下几点：
1. 等待下拉框元素加载完成（支持超时设置）
2. 获取下拉框中所有选项的文本内容
3. 比较实际元素内容与预期元素
4. 打印错误信息
使用说明：使用时只需传入下拉框的CSS选择器和预期选项数组即可，脚本会自动处理元素等待和内容验证。
脚本示例如下：
/**
* 断言下拉框元素包含预期的文本选项
* @param {string} selector - 下拉框的CSS选择器
* @param {Array<string>} expectedOptions - 预期的选项文本数组
* @param {number} [timeout=5000] - 等待元素的超时时间（毫秒）
* @returns {Promise<void>} - 当断言成功时解析，失败时抛出错误
*/
async function assertSelectOptions(selector, expectedOptions, timeout = 5000) {
// 等待下拉框元素出现
const selectElement = await waitForElement(selector, timeout);
// 获取下拉框中所有选项的文本
const actualOptions = Array.from(selectElement.options)
.map(option => option.text.trim())
.filter(text => text !== ''); // 过滤空文本
// 比较实际选项与预期选项
if (!arraysAreEqual(actualOptions, expectedOptions)) {
throw new Error(`下拉框选项不匹配！\n` +
`预期: ${expectedOptions.join(', ')}\n` +
`实际: ${actualOptions.join(', ')}`);
}
console.log('下拉框选项断言成功！');
}
/**
* 等待元素出现的辅助函数
* @param {string} selector - 元素的CSS选择器
* @param {number} timeout - 超时时间（毫秒）
* @returns {Promise<Element>} - 当元素出现时解析为DOM元素
*/
async function waitForElement(selector, timeout) {
return new Promise((resolve, reject) => {
const startTime = Date.now();
function checkElement() {
const element = document.querySelector(selector);
if (element) {
resolve(element);
return;
}
if (Date.now() - startTime > timeout) {
reject(new Error(`等待元素 "${selector}" 超时（${timeout}ms）`));
return;
}
requestAnimationFrame(checkElement);
}
checkElement();
});
}
/**
* 比较两个数组是否相等（忽略顺序）
* @param {Array} arr1 - 第一个数组
* @param {Array} arr2 - 第二个数组
* @returns {boolean} - 如果数组相等返回true，否则返回false
*/
function arraysAreEqual(arr1, arr2) {
if (arr1.length !== arr2.length) return false;
const sortedArr1 = [...arr1].sort();
const sortedArr2 = [...arr2].sort();
return sortedArr1.every((value, index) => value === sortedArr2[index]);
}
// 使用示例
(async () => {
try {
await assertSelectOptions('#mySelect', ['选项1', '选项2', '选项3']);
} catch (error) {
console.error('断言失败:', error.message);
}
})();
