赛普拉斯：选择和迭代 R 闪亮的 selectizeInput 元素

Question

我目前正在学习一些非常基本的 JS 和 Cypress，以便能够为我正在开发的闪亮的 R markdown 应用程序编写一些 UI 测试（对此非常陌生！！）。我设法编写了一个简单的测试，该测试断言在应用程序启动时默认选择给定值。但是，我希望能够选择特定元素，更重要的是，循环遍历可用元素的整个列表，以断言输出符合预期。

我不知道如何从下拉列表中选择特定元素，也不知道如何实现循环。任何指针将不胜感激！

这是一个简单的闪亮应用，仅包含一个带有 3 个选项的下拉菜单（app.R 文件），因为由于专有原因，我无法共享原始代码：

library(shiny)

ui <- fluidPage(

    selectizeInput(inputId = 'element1', label = "Test input", 
                choices = c('descriptive', 'comparative', 'neutral'),
                selected = 'descriptive')
 
)

server <- function(input, output) {}

# Run the application 
shinyApp(ui = ui, server = server)

在我的简单 UI 测试中，我设法编写了类似这样的断言：

cy.get('select#element1 option:selected')
.should('have.value', 'descriptive')

但是当我使用网络检查器检查selectizeInput 的结构时，我不明白为什么这些选项没有列为选择选项。这似乎是我不能使用 cy.get('select#element1').select('comparative') 之类的东西从下拉列表中选择不同值的原因。我以为其他选项可能是“隐藏的”，但后来我在 DOM 中的一个单独的 div 中找到了它们：

我真的才刚刚开始学习所有这些，所以任何指针都会非常有帮助。甚至只是为了帮助我在谷歌上搜索正确的东西，因为谷歌搜索如何使用 cypress 中的选择元素显然不是正确的事情？

Answer 1

如果您想从下拉列表中选择任何项目，可以使用eq() 命令：

//Click to open the dropdown
cy.get('div.option').eq(1).click() //selects comparative

您还可以使用contains() 结合使用文本和选择器，然后从下拉列表中选择项目：

//Click to open the dropdown
cy.contains('div.option', 'neutral').click() //selects neutral

您也可以使用filter() 命令：

//Click to open the dropdown
cy.get('div.option').filter(':contains("neutral")').click() //selects neutral

如果您想遍历元素然后选择，您可以执行以下操作：

1. 使用索引位置

//Click to open the dropdown
cy.get('div.option').each(($ele, index) => {
  if (index == 1) {
    cy.wrap($ele).eq(index).click()
  }
})

1. 使用元素文本

//Click to open the dropdown
cy.get('div.option').each(($ele, index) => {
  if($ele.text() == "comparative") {
    cy.wrap($ele).click()
  }
})

Answer 2

组件库通常会增强选择控件以提供更好的外观，以及多选等附加功能。纯 HTML5 选择的样式和控制方式受到限制。

在 Shiny 库的情况下，他们添加了一个 <select> 来保存值以及一组嵌套的 <div> 以提供增强功能（<select> 之后的下一个元素块）。

<select> 具有 style="display: none;"，这意味着用户无法直接与其交互，但它会在 javascript 事件处理程序中更新。

我们希望像用户一样进行 e2e 测试，但要测试隐藏的 <select> 值，因为这是 R 框架使用的值。

// Test the initial value of hidden select
cy.get('select#element1')
  .should('have.value', 'descriptive')
  .find('option')
  .should('have.length', 1)             // only one option on the select

cy.get('select#e1')
  .next()                        // access the UI block
  .click()                       // open the "select"
  .contains('comparative')       // chose an option
  .click()

// Test the new value of hidden select
cy.get('select#e1')
  .should('have.value', 'comparative')
  .find('option')
  .should('have.length', 1)      // still only one option

循环

// Test the initial value of hidden select
cy.get('select#element1')
  .should('have.value', 'descriptive')
  .find('option')
  .should('have.length', 1)             // only one option on the select

const choices = ['descriptive', 'comparative', 'neutral']

choices.forEach(choice => {
 
  cy.get('select#e1')
    .next()                        // access the UI block
    .click()                       // open the "select"
    .contains(choice)              // chose this choice
    .click()

  // Test the new value of hidden select
  cy.get('select#e1')
    .should('have.value', choice)
})