使用Cypress测试Django前端时，如何选择空字符串选项？

问题场景 #

你尝试用以下代码测试选择空字符串选项：

// Next try to remove frequency    
cy.get('select').eq(5).find('option').contains('').then((selectOption) => {  
  cy.get('select').eq(5).select(selectOption.text());
}); 

运行后触发报错：

cy.contains() cannot be passed an empty string 

对应的HTML结构中确实存在空值选项：

<select id="id_update_freq" class="form-control" name="update_freq">
  <option value=""></option> 
  <option value="vk">Viikkotilasto</option>  
  <option value="kk">Kuukausitilasto</option> 
  <option value="nv">Kolmannesvuositilasto</option>
  <option value="kv">Puolivuositilasto</option>
  <option value="pv">Vuositilasto</option>
</select>

解决方法 #

方法1：直接通过value值选择（最简便）

Cypress的select()命令支持直接传入选项的value属性值，空字符串正好是目标选项的value，可以简化代码：

// 用id选择器更可靠，避免依赖DOM顺序
cy.get('select#id_update_freq').select('');

方法2：通过filter定位空选项元素

如果需要先定位到空选项元素再执行选择，可以使用filter()替代contains()：

cy.get('select#id_update_freq option')
  .filter('[value=""]')  // 筛选value为空的option
  .then((emptyOption) => {
    cy.get('select#id_update_freq').select(emptyOption.val());
  });

补充建议

避免使用eq(5)这种依赖DOM元素顺序的选择器，一旦页面结构调整，测试就会失效。优先使用id、name这类固定属性定位元素，比如示例中的#id_update_freq。

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