如何在选择下拉菜单中捕获选项的值进行比较?

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

我只是有麻烦弄清楚如何获得所选选项的值保存到测试本身的变量。

目前为止我所做的测试。现在我有一个变量，我想存储值(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}`)
})

(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>

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

但是我也会先保存文本，然后选择选项，因为这会导致URL更改和页面更改(您可能会因为页面更改而丢失先前查询的元素)

添加别名，允许selectedIssueID在.select()命令中使用。
Ref: 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}`)

您可以使用get最后一个选项文本并将其保存为别名，然后稍后获取别名并将其用作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}`) })

相关内容

最新更新

热门标签：