i am trying to get all values under select tag in order to have an array.
This is my code:
cy.get('[data-tab-name-prefix="selectedFonds[0]]')
.scrollIntoView()
.should('be.visible')
.find('[name="selectedFonds[0][name]"]')
.find('option')
.invoke('attr', 'value').then($options => {
cy.log($options)
})
<div data-tab-name-prefix="selectedFonds[0]">
<div class= something>
<div class= something else>
<select class=form-control name="selectedFonds[0][name]">
<option value="first value"> First Value </option>
<option value="second value"> Second Value </option>
<option value="third value"> Third Value </option>
<option value="forth value"> Forth Value </option>
</select>
</div>
</div>
</div>The problem is that it returns only the first option... not all of them.
My suggestion would be to target the element with the data attribute then do within(). Then target the select element and do children(). Followed by a each() block to iterate over every option element.
const values = ['first value', 'second value', 'third value', 'fourth value']
cy.get('[data-tab-name-prefix="selectedFonds[0]]')
.scrollIntoView()
.should('be.visible')
.within( ($el) => {
cy.get('select')//based on your HTML you have only one select inside this div
.should('be.visible')
.children()
.each( ($el, index) => {
cy.get($el)
.should('have.value', values[index])
})
})
.invoke('attr', 'value') is causing the problem, it changes the array to a single value.
Move the attr() call inside the .then().
const expectedValues = ['First value', 'Second value', 'Third value', 'Fourth value']
cy.get('[data-tab-name-prefix="selectedFonds[0]]')
.scrollIntoView()
.should('be.visible')
.find('[name="selectedFonds[0][name]"]')
.find('option')
.then($options => {
const values = [...$options].map(option => option.getAttribute('value').trim())
return values
})
.should('deep.eq', expectedValues)
})