Cypress如何选中并遍历R Shiny的selectizeInput下拉元素

核心原理说明 #

Shiny的selectizeInput底层基于selectize.js自定义组件实现，不会把所有选项渲染为原生<select>的<option>节点，因此无法直接使用Cypress原生的.select()方法操作，需要模拟用户真实点击交互完成选择。

1. 选中下拉框指定元素 #

按以下步骤实现指定值选择，以选择comparative为例：

// 点击selectize输入区域，展开下拉选项
cy.get('#element1')
  .next('.selectize-control')
  .find('.selectize-input')
  .click()

// 定位到目标选项并点击
cy.get('#element1')
  .next('.selectize-control')
  .find('.selectize-dropdown-content [data-value="comparative"]')
  .click()

// 断言选中结果符合预期
cy.get('select#element1 option:selected')
  .should('have.value', 'comparative')

注意：通过inputId关联对应selectize组件的方式可以避免页面存在多个下拉框时的定位冲突

2. 遍历全部可选元素并断言 #

可以先定义预期选项列表，再批量校验可选值完整性、逐个验证选择逻辑：

// 定义预期的所有可选值
const expectedChoices = ['descriptive', 'comparative', 'neutral']

// 校验下拉框可选值和预期完全匹配
cy.get('#element1')
  .next('.selectize-control')
  .find('.selectize-input')
  .click()
cy.get('#element1')
  .next('.selectize-control')
  .find('.selectize-dropdown-content [data-value]')
  .then($options => {
    const actualChoices = [...$options].map(el => el.dataset.value)
    expect(actualChoices).to.deep.equal(expectedChoices)
  })

// 遍历所有选项，逐个验证选中逻辑
expectedChoices.forEach(choice => {
  cy.get('#element1')
    .next('.selectize-control')
    .find('.selectize-input')
    .click()
  cy.get('#element1')
    .next('.selectize-control')
    .find(`.selectize-dropdown-content [data-value="${choice}"]`)
    .click()
  cy.get('select#element1 option:selected')
    .should('have.value', choice)
})

可搜索的相关关键词 #

• Cypress 测试 selectize.js
• Shiny selectizeInput 自动化测试
• Cypress 自定义下拉框操作

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