如何使用Cypress/JavaScript从选择中调用所有选项值？

发布于 2025-02-11 00:35:01 字数 1053 浏览 1 评论 0原文

我正在尝试在下获取所有value选择标签，以便有一个数组。这是我的代码：

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>

问题在于它仅返回第一个选项...并非全部。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

听风吹 2025-02-18 00:35:02

.invoke（'attr'，'value'）正在引起问题，它将选项的数组更改为单个值。

将attr（）移动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)
})

.invoke('attr', 'value') is causing the problem, it changes the array of options 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)
})

回复收藏 0 原文

蔚蓝源自深海 2025-02-18 00:35:02

我的建议是用数据属性来定位元素，然后在（）中执行。然后定位选择元素，然后做children（）。然后是每个（）块，以迭代每个选项元素。

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])
  })
})

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])
  })
})

回复收藏 0 原文

~没有更多了~