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);

}

})();