如何在 Cypress 中正确选择 HTML 下拉框中的空值选项（空字符串）-html教程-PHP中文网

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

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

当使用 cypress 测试 django 前端下拉框时，若需验证用户选择“空选项”（即 `

在实际测试中，推荐使用元素 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');
  });
});

⚠️ 注意事项：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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