Cypress: selecting and iterating over R shiny selectizeInput elements - r

Question

I am currently learning some very basic JS and Cypress in order to be able to write some UI test for the shiny R markdown application I am developing (very new to this!!). I have managed to write a simple test that asserts that a given value is selected by default when the app starts up. However, I would like to be able to select a specific element and more importantly, loop over the entire list of elements available in order to assert that the output is as expected.
I'm stuck figuring out how to select a specific element from the dropdown and also don't know how to implement a loop yet. Any pointers will be much appreciated!
Here is a simple shiny app that contains only a dropdown with 3 options (app.R file) as I cannot share the original code due to proprietary reasons:
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)
In my simple UI test, I have managed to write the assertions similar to this:
cy.get('select#element1 option:selected')
.should('have.value', 'descriptive')
But when I use the web inspector to inspect the structure of the selectizeInput, I don't understand why the options are not listed as select options. That seems to be the reason for why I cannot use something like cy.get('select#element1').select('comparative') to select a different value from the dropdown. I thought maybe the other options were "hidden", but I then found them in a separate div further down in the DOM:
I'm really just starting to learn all of this, so any pointers would be super helpful. Even just to help me google the right things, because googling how to work with select elements in cypress was apparently not the right thing?

Answer 1

You can use the eq() command if you want to select any items from the dropdown:
//Click to open the dropdown
cy.get('div.option').eq(1).click() //selects comparative
You can also use a combination of text and selector using contains() and select the item from drop-down:
//Click to open the dropdown
cy.contains('div.option', 'neutral').click() //selects neutral
You can also use the filter() command:
//Click to open the dropdown
cy.get('div.option').filter(':contains("neutral")').click() //selects neutral
If you want to loop through the elements and then select you can do something like:
Using the index Position
//Click to open the dropdown
cy.get('div.option').each(($ele, index) => {
if (index == 1) {
cy.wrap($ele).eq(index).click()
}
})
Using the element text
//Click to open the dropdown
cy.get('div.option').each(($ele, index) => {
if($ele.text() == "comparative") {
cy.wrap($ele).click()
}
})

Answer 2

Component libraries often enhance the select control in order to give a better look, additional features like multi-select. The plain HTML5 select is limited in how you can style and control it.
In the case of Shiny library, they have added both a <select> to hold the value plus a set of nested <div> to provide the enhancements (the next element block after <select>).
The <select> has style="display: none;" which means the user cannot interact with it directly, but it is updated in the javascript event handlers.
Doing e2e tests we want interact as a user would, but test the hidden <select> value since this is what is used by the R framework.
// 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
Looping
// 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)
})