Skip to main content
Cypress应用

select

选择 <select> 元素中的 <option> 选项。

在 .select() 之后继续链式调用依赖于该主题的命令是不安全的。

语法​

.select(value)
.select(values)
.select(value, options)
.select(values, options)

用法​

正确用法

cy.get('select').select('user-1') // 选择 'user-1' 选项

错误用法

cy.select('John Adams') // 错误，不能直接链式调用 'cy'
cy.clock().select() // 错误，'clock' 不返回 <select> 元素

参数​

value (String, Number)

要选择的 <option> 的 value、index 或文本内容。

values (Array)

要选择的多个 <option> 的 value、index 或文本内容的数组。

options (Object)

传入一个选项对象以改变 .select() 的默认行为。

选项默认值描述
forcefalse强制执行操作，禁用等待可操作性
logtrue在命令日志中显示该命令
timeoutdefaultCommandTimeout在超时前等待 .select() 解析的时间

生成结果 了解主题管理​

  • .select() 返回与原始主题相同的主题。
  • 在 .select() 之后继续链式调用依赖于该主题的命令是不安全的。

示例​

文本内容​

选择文本为 apples 的 option​

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
// 返回 <option value="456">apples</option>
cy.get('select').select('apples').should('have.value', '456')

Value​

选择 value 为 "456" 的 option​

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
// 返回 <option value="456">apples</option>
cy.get('select').select('456').should('have.value', '456')

Index​

选择 index 为 0 的 option​

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
// 返回 <option value="456">apples</option>
cy.get('select').select(0).should('have.value', '456')

选择多个选项​

选择文本为 "apples" 和 "bananas" 的选项​

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
cy.get('select')
  .select(['apples', 'bananas'])
  .invoke('val')
  .should('deep.equal', ['456', '458'])

选择 value 为 "456" 和 "457" 的选项​

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
cy.get('select')
  .select(['456', '457'])
  .invoke('val')
  .should('deep.equal', ['456', '457'])

选择 index 为 0 和 1 的选项​

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
cy.get('select')
  .select([0, 1])
  .invoke('val')
  .should('deep.equal', ['456', '457'])
info

注意： 向 cy.select() 传入数组将仅选择数组中匹配的选项，其他所有选项将保持未选中状态（即使之前已选中）。同样，调用 cy.select([]) 并传入空数组将清除所有选项的选中状态。

强制选择​

强制选择一个隐藏的 <select>​

<select style="display: none;">
  <optgroup label="Fruits">
    <option value="banana">Banana</option>
    <option value="apple">Apple</option>
  </optgroup>

  <optgroup></optgroup>
</select>
cy.get('select')
  .select('banana', { force: true })
  .invoke('val')
  .should('eq', 'banana')

强制选择一个禁用的 <select>​

向 .select() 传入 { force: true } 将覆盖对禁用 <select> 的可操作性检查。但是，它不会覆盖对禁用 <option> 或禁用 <optgroup> 中选项的可操作性检查。更多详情请参阅此问题。

<select disabled>
  <optgroup label="Veggies">
    <option value="okra">Okra</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>

  <optgroup></optgroup>
</select>
cy.get('select')
  .select('okra', { force: true })
  .invoke('val')
  .should('eq', 'okra')

已选选项​

您可以使用 jQuery 的:selected 选择器获取当前选中的选项。

<select id="name">
  <option>Joe</option>
  <option>Mary</option>
  <option selected="selected">Peter</option>
</select>
cy.get('select#name option:selected').should('have.text', 'Peter')

注意事项​

可操作性​

.select() 是一个遵循可操作性规则的操作命令。

然而，向 .select() 传入 { force: true } 不会覆盖对禁用 <option> 或禁用 <optgroup> 中选项的可操作性检查。更多详情请参阅此问题。

规则​

要求 了解命令链​

  • .select() 需要链式调用返回 DOM 元素的命令。
  • .select() 要求元素为 select 类型。

断言 了解断言​

  • .select() 会自动等待元素达到可操作状态。
  • .select() 会自动重试直到所有链式断言通过。

超时设置 了解超时机制​

  • .select() 可能会因等待元素达到可操作状态而超时。
  • .select() 可能会因等待添加的断言通过而超时。

命令日志​

选择文本为 "Homer Simpson" 的选项

cy.get('select').select('Homer Simpson')

上述命令将在命令日志中显示为：

Command Log select

当点击命令日志中的 select 时，控制台会输出以下内容：

Console Log select

另请参阅​

目录