如何在Cypress中执行操作后选择下拉框值并捕获下拉列表？

一、捕获并记录下拉列表所有选项值 #

要获取下拉框的所有选项，需定位到<select>内部的<option>子元素，再遍历提取内容：

// 获取所有选项并打印文本
cy.get('#gradeLevels option').each(($option) => {
  const optionText = $option.text().trim();
  cy.log('年级选项：' + optionText);
}).then(($options) => {
  // 将所有选项文本存入数组，方便后续复用
  const allGradeTexts = $options.toArray().map(option => option.textContent.trim());
  cy.log('所有年级选项集合：', allGradeTexts);
});

二、逐个选择下拉框选项并执行后续操作 #

若需遍历每个选项依次选择并操作，可通过.then()结合原生循环处理异步队列：

cy.get('#gradeLevels option').then(($options) => {
  const optionsArray = $options.toArray();
  
  optionsArray.forEach((option) => {
    const optionText = option.textContent.trim();
    // 选择当前选项
    cy.get('#gradeLevels').select(optionText);
    
    // 此处添加选择选项后需要执行的操作（如断言、页面交互）
    cy.log('已选中：' + optionText);
    // 示例：断言选中值与选项value匹配
    cy.get('#gradeLevels').should('have.value', option.value);
  });
});

原代码问题说明 #

你之前的代码cy.get('#gradeLevels').each(...)直接遍历的是<select>元素本身，而非它的子选项，因此每次循环拿到的都是同一个select节点，无法获取到各选项内容。需修改定位器为#gradeLevels option才能遍历所有下拉选项。

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