如何在 select 下拉列表中捕获选项的值以进行比较？

Question

我的仪表板上有一个下拉菜单，可根据用户选择的选项值将用户重定向到新页面。下拉列表中的所有 ID 也是 URL 中的路由，所以我想我可以 select 列表中的任何选项，并断言 URL 路由包含该值。

我只是无法弄清楚如何将 selected 选项的值保存到测试本身的变量中。

我目前的测试。现在我有一个变量，我想存储值 (selectedIssueID)，但出现 Cannot read properties of undefined (reading 'apply') 错误。

我在这里有点迷路，所以如果有人有任何想法，我将不胜感激！

 it.only('Issue Analysis dropdown functionality check', () => {
   // Assert there are options in the dropdown
    cy.get('[data-cy=issue-analysis-select-issue-dropdown]').should(
      'have.length.gt',
      0
    )
   // grab the last option and store the value 
    let selectedIssueID = ''
    cy.get('[data-cy=issue-analysis-select-issue-dropdown] option')
      .last()
      .then(($lastOption) => {
        cy.get('[data-cy=issue-analysis-select-issue-dropdown]')
          .select($lastOption.text())
          .then((selectedIssueID = $lastOption.text()))
          .log(selectedIssueID)
      })
    // Assert it routes properly
    cy.url().should('include', `/analysis/${selectedIssueID}`)
  })

HTML（CInput 组件本身是一个包含样式和一些 vuejs 助手的包罗万象的输入）

<select
  data-cy="issue-analysis-select-issue-dropdown"
  id="0.2137294948228743"
  class="
    appearance-none
    border-0
    text-secondary-text text-sm
    bg-transparent
    min-w-min
    py-2
    pl-1
    leading-tight
    focus:outline-none
  "
  style="box-shadow: none"
>
  <option disabled="" value="" style="display: none;">Select an Issue You Want to Analyze</option>
  <option class="text-secondary-text" value="1">1</option>
  <option class="text-secondary-text" value="2">2</option>
  <option class="text-secondary-text" value="3">3</option>
  <option class="text-secondary-text" value="4">4</option>
  <option class="text-secondary-text" value="5">5</option>
  <option class="text-secondary-text" value="6">6</option>
  <option class="text-secondary-text" value="7">7</option>
  <option class="text-secondary-text" value="8">8</option>
  <option class="text-secondary-text" value="9">9</option>
</select>

Answer 1

只是 .then((selectedIssueID = $lastOption.text())) 中的一点语法错误。

但我也会先保存文本，然后 select 选项，因为这将导致 URL 更改和页面更改（您可能会丢失之前查询的元素，因为页面更改）

更新添加别名以允许 selectedIssueID 在 .select() 命令中使用。
参考：backflips

// grab the last option and store the value 
cy.get('[data-cy=issue-analysis-select-issue-dropdown] option').last()
  .then(($lastOption) => selectedIssueID = $lastOption.text())
  .as('selectedIssueID')

cy.get('@selectedIssueID').then(selectedIssueID => {
  cy.get('[data-cy=issue-analysis-select-issue-dropdown]')
    .select(selectedIssueID)
})

// Assert it routes properly
cy.url().should('include', `/analysis/${selectedIssueID}`)

Answer 2

您可以使用获取最后一个选项文本并将其保存为别名，然后获取别名并将其用作 url 上的断言。

cy.get('[data-cy=issue-analysis-select-issue-dropdown] option')
  .last()
  .invoke('text')
  .as('lastOptionText')

cy.get('@lastOptionText')
  .then(lot => {
    cy.get('[data-cy=issue-analysis-select-issue-dropdown] option')
      .select(lot)
    cy.url().should('include', `/analysis/${lot}`)
  })

如果您想继续使用您的方法，则必须对您的代码进行一些调整才能达到同样的效果。

let selectedIssueID

beforeEach(() => {
  // grab the last option and store the value 
  cy.get('[data-cy=issue-analysis-select-issue-dropdown] option')
    .last()
    .then(($lastOption) => {
      selectedIssueID = $lastOption.text()
    })
})

it.only('Issue Analysis dropdown functionality check', () => {
  // Assert there are options in the dropdown
  cy.get('[data-cy=issue-analysis-select-issue-dropdown]').should(
    'have.length.gt',
    0
  )
  cy.get('[data-cy=issue-analysis-select-issue-dropdown]')
    .select(selectedIssueID)

  // Assert it routes properly
  cy.url().should('include', `/analysis/${selectedIssueID}`)
})

如何在 select 下拉列表中捕获选项的值以进行比较？

How to capture the value of options in a select dropdown for comparison?

cypress

cypress-testing-library