如何在 Cypress 中正确选择 HTML 下拉框中的空值选项（空字符串）

Cypress 的 cy.contains() 不支持空字符串匹配，但可通过 cy.select() 直接传入空字符串值来选中 <option value=""> 选项，这是测试表单重置、默认空选项等场景的标准做法。

当使用 Cypress 测试 Django 前端下拉框时，若需验证用户选择“空选项”（即 ``），不可使用 `cy.contains('')`——该方法会直接报错 “cy.contains() cannot be passed an empty string”。正确方式是绕过文本匹配，直接基于 `value` 属性调用 `cy.select('')`，Cypress 会精准定位并触发对应 option 的选择行为。

在实际测试中，推荐使用元素 ID（如 #id_update_freq）精确定位 select 元素，而非依赖 .eq(5) 这类易受 DOM 结构变动影响的索引方式，以提升测试稳定性。以下为可直接运行的完整示例：

describe('Select empty option in Django form', () => {it('should select and verify the empty frequency option', () => {// 访问页面（根据实际场景补充 cy.visit()）// cy.visit('/your-form-page/')// 直接通过 value="" 选择空选项cy.get('#id_update_freq').select('');// 验证 select 元素当前 value 确实为空cy.get('#id_update_freq').should('have.value', '');// 可选：进一步验证 UI 状态（如 placeholder 显示、后续字段禁用等）// cy.get('#id_update_freq').parent().find('.help-text').should('contain.text', 'Valitse taajuus');});});

注意事项：

1. cy.select('') 要求目标 <option> 的 value 属性严格等于空字符串（即 <option value="">），而非仅文本内容为空；
2. 若 HTML 中空选项写为 <option value="">""</option>，其显示文本为两个英文双引号，但 select('') 仍匹配 value，而非 innerText；
3. 避免使用 cy.contains('').then(...).select(...) 的链式写法——既冗余又因空字符串被拒绝而失败；
4. 在 CI 环境中建议添加显式断言（如 should('have.value', '')），确保状态变更被可靠捕获。

总结：测试空选项的本质是验证控件对 value="" 的响应能力，而非查找“空白文本”。cy.select('') 是语义清晰、稳定可靠且 Cypress 最新推荐的解决方案。